Tuesday, March 7, 2017

Materialize - Form

Materialize has a very beautiful and responsive CSS for form designing. The following CSS are used:
S.N.Class Name & Description
1input-field
Set the div container as input field container. Required.
2validate
Adds validation styles to an input field.
3active
Shows an input with active style.
4materialize-textarea
Used to style a text-area. Text-areas will auto resize to the text inside.
5filled-in
Shows an checkbox with filled box style.

Example

The following example showcases the use of input classes to showcase a sample form.
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>

Result

Verify the result.

Important Input Controls

Materialize provides CSS for numerous types of input controls. Following table details the same.
S.N.Input Type Name & Description
1Select
Various types of selects inputs.
2Switches
Various types of switches.
3File
Various types of file inputs.
4Range
Various types of range inputs.
5Date Picker
Date Picker.
6Character Counter
Character Counter
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)