Thursday, March 16, 2017

W3.CSS - Forms

W3.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
Class NameDescription
w3-groupRepresents a bordered container. Can be used to group a label and input.
w3-inputBeautifies an input control.
w3-labelBeautifies a label.
w3-checkbox w3-checkmarkBeautify a checkbox/ radio button.

Example

w3css_forms.htm
<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body> 
      <form class="w3-container w3-card-8">
         <div class="w3-group">      
            <input class="w3-input" type="text" style="width:90%" required>
            <label class="w3-label">User Name</label>
         </div>
         <div class="w3-group">      
            <input class="w3-input" type="text" style="width:90%" required>
            <label class="w3-label">Email</label>
         </div>
         <div class="w3-group">      
            <textarea class="w3-input" style="width:90%" required></textarea>
            <label class="w3-label">Comments</label>
         </div>
         <div class="w3-row">
            <div class="w3-half">
               <label class="w3-checkbox">
                  <input type="checkbox" checked="checked">
                  <div class="w3-checkmark"></div> Married
               </label>
      <br>
               <label class="w3-checkbox">
                  <input type="checkbox">
                  <div class="w3-checkmark"></div> Single
               </label>
      <br>
               <label class="w3-checkbox">
                  <input type="checkbox" disabled>
                  <div class="w3-checkmark"></div> Don't know (Disabled)
               </label>
      <br>
      <br>
            </div>
            <div class="w3-half">
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="male" checked>
                  <div class="w3-checkmark"></div> Male
               </label>
      <br>
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="female">
                  <div class="w3-checkmark"></div> Female
               </label>
      <br>
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="female" disabled>
                  <div class="w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>       
   </body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)