Material Design Lite - Textfields

MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước và hiển thị các loại đầu vào văn bản khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

mdl-textfield

Xác định vùng chứa là một thành phần MDL và được yêu cầu trên phần tử div "bên ngoài".

2

mdl-js-textfield

Đặt hành vi MDL cơ bản cho đầu vào và được yêu cầu trên phần tử div "bên ngoài".

3

mdl-textfield__input

Xác định phần tử là đầu vào trường văn bản và được yêu cầu trên phần tử đầu vào hoặc phần tử textarea.

4

mdl-textfield__label

Xác định phần tử là nhãn trường văn bản và được yêu cầu trên phần tử nhãn cho các phần tử đầu vào hoặc vùng văn bản.

5

mdl-textfield--floating-label

Áp dụng hiệu ứng nhãn nổi và là tùy chọn; đi vào phần tử div "bên ngoài".

6

mdl-textfield__error

Xác định span dưới dạng thông báo lỗi MDL và là tùy chọn; đi vào phần tử span cho phần tử đầu vào MDL với mẫu.

7

mdl-textfield--expandable

Xác định một div là một vùng chứa trường văn bản có thể mở rộng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên ngoài".

số 8

mdl-button

Xác định nhãn dưới dạng nút biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài".

9

mdl-js-button

Đặt hành vi cơ bản cho vùng chứa biểu tượng; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài".

10

mdl-button--icon

Xác định nhãn như một vùng chứa biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài".

11

mdl-input__expandable-holder

Xác định một vùng chứa như một thành phần MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên trong".

12

is-invalid

Xác định trường văn bản là không hợp lệ khi tải ban đầu và là tùy chọn trên phần tử mdl-textfield.

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-textfield để hiển thị các loại trường văn bản khác nhau.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link 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 = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div 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>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div 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>
                  </div>
               </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 = "#">
                  <div 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>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div 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>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div 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>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div 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>
                     <div 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>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Kết quả

Xác minh kết quả.