Pure CSS Forms
Pure CSS forms consist of labels and input fields. It is generally used to either collect the information from the users or display the information to the users. The pure CSS framework gives different predefined classes that are used to enhance the look of the HTML forms. It styles the HTML forms and makes them too elegant. Pure CSS form is mainly divided into three categories on the basis of the label's and input field's alignment. These are:
- Default Form
- Stacked Form
- Aligned Form
Pure CSS Forms Classes: There are the following predefined classes in the purecss form.
-
.pure-form- This class is useful to create inline form or horizontal form. -
pure-form-stacked- It is used to create a vertically stacked form. The input field lies just below the labels. -
pure-form-aligned- It is used to create an aligned form in pure.css. -
pure-group- To group sets of text-based input elements. -
pure-input-rounded- It is used to make a rounded corner of the input field elements. -
pure-checkbox- It is used to enhance the look of pure css checkbox. -
pure-radio- It is used for radio button to enhance the appearance.
Default Form
To create default inline Pure CSS form, simply add .pure-form class to the <form> element base class.
General Syntax
<form class="pure-form"></form>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1 custom--alignment">
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label for="default-remember"> <input type="checkbox" id="default-remember" /> Remember me </label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</div>
<!-- /pure-u-sm-1-2-->
</div>
<!--/pure-g-->
Source Code: Output
Stacked Form
To create a stacked form, add .pure-form-stacked, and .pure-form classes to the <form> element. This is a vertical form in which the input field is placed just below the label.
General Syntax
<form class="pure-form pure-form-stacked"></form>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password" />
<label for="profession">Profession</label>
<select id="profession">
<option>Design</option>
<option>Development</option>
<option>Graphics Design</option>
</select>
<label for="remember" class="pure-checkbox"> <input id="remember" type="checkbox" /> Remember me </label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</div><!-- /pure-u-sm-1-2-->
</div><!--/pure-g-->
Source Code: Output
Aligned Form
To create an aligned form, add .pure-form-aligned, and .pure-form classes to the <form> element. In this form, the labels are right-aligned against the form input controls, but but on smaller screens revert to a stacked form.
General Syntax
<form class="pure-form pure-form-aligned"></form>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1">
<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" />
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password" />
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address" />
</div>
</fieldset>
</form>
</div>
</div>
Source Code: Output
Multi-Column Form (With Pure Grids)
A multi-column form uses a pure grid and responsive grid. Therefore, it displays a form in different columns on the specified screens. Responsive grid systems work on the default Pure grid. Therefore, you must add the CDN path of responsive grids to the existing project.
To create multi-column forms, you will have to include form elements in the Pure Grids. After that, you can make the grid responsive so that it looks pretty on all the screen sizes.
Source Code
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-first-name">First Name</label>
<input type="text" id="multi-first-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-last-name">Last Name</label>
<input type="text" id="multi-last-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-email">E-Mail</label>
<input type="email" id="multi-email" class="pure-u-23-24" required="" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-city">City</label>
<input type="text" id="multi-city" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-state">State</label>
<select id="multi-state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="multi-terms" class="pure-checkbox">
<input type="checkbox" id="multi-terms" /> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
Source Code: Output
Web Tutorials
