구체화-양식

Materialise는 양식 디자인을위한 매우 아름답고 반응이 빠른 CSS를 가지고 있습니다. 다음 CSS가 사용됩니다-

Sr. 아니. 클래스 이름 및 설명
1

input-field

div 컨테이너를 입력 필드 컨테이너로 설정합니다. 필수입니다.

2

validate

입력 필드에 유효성 검사 스타일을 추가합니다.

active

활성 스타일로 입력을 표시합니다.

4

materialize-textarea

텍스트 영역의 스타일을 지정하는 데 사용됩니다. 텍스트 영역은 내부 텍스트에 맞게 자동으로 크기가 조정됩니다.

5

filled-in

채워진 상자 스타일로 확인란을 표시합니다.

다음 예제는 샘플 양식을 보여주기 위해 입력 클래스를 사용하는 방법을 보여줍니다.

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>

결과

결과를 확인하십시오.

중요한 입력 컨트롤

Materialise는 다양한 유형의 입력 컨트롤을위한 CSS를 제공합니다. 다음 표는 동일합니다.

Sr. 아니. 입력 유형 이름 및 설명
1 고르다

다양한 유형의 선택 입력

2 스위치

다양한 유형의 스위치

파일

다양한 유형의 파일 입력

4 범위

다양한 유형의 범위 입력

5 날짜 선택기

날짜 선택기

6 캐릭터 카운터

캐릭터 카운터