Saturday, March 11, 2017

Pure.CSS Forms

PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
S.N.Class Name & Description
1pure-form
Represents a compact inline form.
2pure-form-stacked
Represents a stacked form with input elements below the labels. To be used with pure-form.
3pure-form-aligned
Represents an aligned form with input elements below the labels. To be used with pure-form.
4pure-input-rounded
Displays a form control with rounded corners
5pure-button
Beautifies a button.
6pure-checkbox
Beautifies a checkbox.
7pure-radio
Beautifies a radio.

Example

purecss_forms.htm
<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   <body> 
      <form class="pure-form pure-form-aligned">
         <fieldset>
            <div class="pure-control-group">      
               <label for="name">Username</label>
               <input id="name" type="text" placeholder="Username" required>          
            </div>
            <div class="pure-control-group">      
               <label for="email">Email</label>
               <input id="email" type="text" placeholder="Email Address" required>       
            </div>
            <div class="pure-control-group">      
               <label for="comments">Comments</label>
               <input id="comments" type="text" placeholder="Comments">       
            </div>
            <div class="pure-controls">
               <label  for="married" class="pure-checkbox">
                  <input id="married" type="checkbox" checked="checked">
                  Married
               </label>
               <br>
               <label  for="single" class="pure-checkbox">
                  <input id="single" type="checkbox">
                  Single
               </label>
               <br>
               <label for="dontknow" class="pure-checkbox">
                  <input id="dontknow" type="checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
            <div class="pure-controls">
               <label for="male" class="pure-radio">
                  <input id="male" type="radio" name="gender" value="male" checked>
                  Male
               </label>
               <br>
               <label for="female" class="pure-radio">
                  <input id="female" type="radio" name="gender" value="female">
                  Female
               </label>
               <br>
               <label for="dontknow1" class="pure-radio">
                  <input id="dontknow1" type="radio" name="gender" value="female" disabled>
                  Don't know (Disabled)
               </label>
               <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
         </fieldset>
      </form>       
   </body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)