Materialize - Hình thức

Materialize có CSS ​​rất đẹp và đáp ứng để thiết kế biểu mẫu. CSS sau được sử dụng:

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

input-field

Đặt vùng chứa div làm vùng chứa trường đầu vào. Cần thiết.

2

validate

Thêm kiểu xác thực vào một trường đầu vào.

3

active

Hiển thị đầu vào với kiểu hiện hoạt.

4

materialize-textarea

Được sử dụng để tạo kiểu cho một vùng văn bản. Các vùng văn bản sẽ tự động thay đổi kích thước thành văn bản bên trong.

5

filled-in

Hiển thị một hộp kiểm với kiểu hộp đầy.

Thí dụ

Ví dụ sau minh họa việc sử dụng các lớp đầu vào để giới thiệu một biểu mẫu mẫu.

materialize_forms.htm

<html>
   <head>
      <title>The Materialize Form Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">   
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <div class = "input-field col s6">
                  <i class = "material-icons prefix">account_circle</i>
                  <input placeholder = "Username" value = "Mahesh" id = "name"
                     type = "text" class = "active validate" required />
                  <label for = "name">Username</label>
               </div>
               
               <div class = "input-field col s6">      
                  <label for = "password">Password</label>
                  <input id = "password" type = "password" placeholder = "Password"
                     class = "validate" required />          
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Email" id = "email" type = "email"
                     class = "validate">
                  <label for = "email">Email</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <i class = "material-icons prefix">mode_edit</i>
                  <textarea id = "address" class = "materialize-textarea"></textarea>
                  <label for = "address">Address</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Comments (Disabled)" id = "comments"
                     type = "text" disabled />
                  <label for = "comments">Comments</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <p>
                     <input id = "married" type = "checkbox" checked = "checked" />
                     <label for = "married">Married</label>
                  </p>
                  
                  <p>
                     <input id = "single" type = "checkbox" class = "filled-in" />
                     <label for = "single">Single</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow" type = "checkbox" disabled = "disabled" />              
                     <label for = "dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                   <p>
                     <input id = "male" type = "radio" name = "gender"
                        value = "male" checked />
                     <label for = "male">Male</label>
                  </p>
                  
                  <p>
                     <input id = "female" type = "radio" name = "gender"
                        value = "female" checked />
                     <label for = "female">Female</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow1" type = "radio" name = "gender"
                        value = "female" disabled />
                     <label for = "dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>           
         </form>       
      </div>
   </body>   
</html>

Kết quả

Xác minh kết quả.

Kiểm soát đầu vào quan trọng

Materialize cung cấp CSS cho nhiều loại điều khiển đầu vào. Bảng sau chi tiết như nhau.

Sr.No. Kiểu nhập Tên & Mô tả
1 Lựa chọn

Nhiều loại đầu vào được lựa chọn

2 Công tắc

Các loại công tắc

3 Tập tin

Các loại đầu vào tệp khác nhau

4 Phạm vi

Nhiều loại đầu vào phạm vi khác nhau

5 Bảng chọn ngày

Bảng chọn ngày

6 Bộ đếm ký tự

Bộ đếm ký tự