Pure CSS form elements are used to take information from the user. Using Pure CSS ,we can create different types of pure css forms such as:
To create default form inline form, simply add .pure-form
class to the <form>
element base class.
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
To create stacked form, just assign .pure-form-stacked
class to the <form>
element base class having class .pure-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
To create an aligned form ,you have to add .pure-form-aligned
& .pure-form
to the <form>
element base class.
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