English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Textfields
  • 时间：2024-09-17

Material Design Lite - Textfields

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of text inputs. The following table psts down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-textfield

Identifies container as an MDL component and is required on "outer" span element.
2

mdl-js-textfield

Sets basic MDL behavior to input and is required on "outer" span element.
3

mdl-textfield__input

Identifies element as textfield input and is required on input or textarea element.
4

mdl-textfield__label

Identifies element as textfield label and is required on label element for input or textarea elements.
5

mdl-textfield--floating-label

Apppes floating label effect and is optional; goes on "outer" span element.
6

mdl-textfield__error

Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7

mdl-textfield--expandable

Identifies a span as an MDL expandable text field container; used for expandable input fields, and is required on "outer" span element.
8

mdl-button

Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" span s label element.
9

mdl-js-button

Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" span s label element.
10

mdl-button--icon

Identifies label as an MDL icon container; used for expandable input fields, and is required on "outer" span s label element.
11

mdl-input__expandable-holder

Identifies a container as an MDL component; used for expandable input fields, and is required on "inner" span element.
12

is-invapd

Identifies the textfield as invapd on initial load and is optional on mdl-textfield element.

Example

The following example will help you understand the use of the mdl-textfield classes to show the different types of textfields.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </span>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </span>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </span>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </span>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </span>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multipne Text Field</td><td>Expandable Multipne Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </span>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <span class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <span class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </span>
                  </span>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Result

Verify the result.