Default Form
To create a default inline form, add the pure-form
classname to any <form>
element.
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
Stacked Form
To create a stacked form with input elements below the labels, add the pure-form-stacked
classname to a <form>
element alongside pure-form
.
<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">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</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>
Aligned Form
To create an aligned form, add the pure-form-aligned
classname to a <form>
element alongside pure-form
. In an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a stacked form.
<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>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Multi-Column Form (with Pure Grids)
To create multi-column forms, include your form elements within a Pure Grid. Creating responsive multi-column forms (like the example below) requires Pure Responsive Grids to be present on the page.
<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="first-name">First Name</label>
<input id="first-name" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="last-name">Last Name</label>
<input id="last-name" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="city">City</label>
<input id="city" type="text">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
Grouped Inputs
To group sets of text-based input elements, wrap them in a <fieldset>
element with a pure-group
classname. Grouped inputs work well for sign-up forms and look natural on mobile devices.
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
Input Sizing
Input elements have fluid width sizes in a syntax that is similar to Pure Grids. You can apply a pure-input-*
class to these elements.
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
</form>
You can control input sizing even further by wrapping them in grid containers. In the example below, the <input>
elements have a pure-input-1
class, but are wrapped in a <div>
with a specific grid class.
<form class="pure-form pure-g">
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-3-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-8">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div>
<div class="pure-u-1-8">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div>
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
</div>
<div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div>
<div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div>
<div class="pure-u-1">
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
</div>
</form>
Required Inputs
To mark a form control as required, add the required
attribute.
<form class="pure-form">
<input type="email" placeholder="Requires an email" required>
</form>
Disabled Inputs
To disable a form control, add the disabled
attribute.
<form class="pure-form">
<input type="text" placeholder="Disabled input here..." disabled>
</form>
Read-Only Inputs
To make a form input read-only, add the readonly
attribute. The difference between disabled
and readonly
is read-only inputs are still focusable. This allows people to interact with the input and select its text, whereas disabled controls are not interactive.
<form class="pure-form">
<input type="text" value="Readonly input here..." readonly>
</form>
Rounded Inputs
To display a form control with rounded corners, add the pure-input-rounded
classname.
<form class="pure-form">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">Search</button>
</form>
Checkboxes and Radios
To normalize and align checkboxes and radio inputs, add the pure-checkbox
or pure-radio
classname.
<form class="pure-form">
<label for="option-one" class="pure-checkbox">
<input id="option-one" type="checkbox" value="">
Here's option one.
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
Here's a radio button. You can choose this one..
</label>
<label for="option-three" class="pure-radio">
<input id="option-three" type="radio" name="optionsRadios" value="option2">
..Or this one!
</label>
</form>