Forms
Cross browser normalized responsive forms with minimal styling to allow easy overrides and lean CSS.
All inputs are responsive with progressively enhanced fallbacks for unsupported types. A hook class .focus
is available to add focus to fields,
.no-edit
can be used to mimic non-editable inputs, and all fields can be made to display inline by adding the class .inline-block
or
stretch to full width by adding the class .full-width
.
Smaller elements such as radio and checkbox inputs can be aligned by wrapping them in a div with the class .input-tamer
.
Standard Layout
Horizontal Layout
Add class .form-horizontal
.
The Markup
The entire markup for the first form. Note the lack of extra elements required for arranging inputs.
<form action="#">
<fieldset>
<legend>Default Form</legend>
<label for="input-focused1">Focused</label>
<input type="text" id="input-focused1" class="focus" value="focused input..." />
<label for="input-disabled1">Disabled</label>
<input type="text" id="input-disabled1" disabled value="disabled input..." />
<p>Support text to help describe the input.</p>
<label for="input-no-edit1">Non editable</label>
<span id="input-no-edit1" class="no-edit">No edit</span>
<label for="select-default1">Select</label>
<select id="select-default1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="input-file1">File upload</label>
<input id="input-file1" type="file" />
<label for="input-password1">Password</label>
<input type="password" id="input-password1" />
<label for="input-time1">Time</label>
<input type="time" id="input-time1" />
<label for="input-week1">Week</label>
<input type="week" id="input-week1" />
<label for="input-month1">Month</label>
<input type="month" id="input-month1" />
<label for="input-date1">Date</label>
<input type="date" id="input-date1" />
<label for="input-datetime1">Datetime</label>
<input type="datetime" id="input-datetime1" />
<label for="input-datetime-local1">Datetime Local</label>
<input type="datetime-local" id="input-datetime-local1" />
<label for="input-search1">Search</label>
<input type="search" id="input-search1" />
<label for="input-color1">Color</label>
<input type="color" id="input-color1" />
<label for="input-range1">Range</label>
<input type="range" id="input-range1" min="0" max="100" value="50" />
<label for="input-email1">Email</label>
<input type="email" id="input-email1" />
<label for="check-disabled1">Disabled Checkbox</label>
<div class="input-tamer">
<input type="checkbox" id="check-disabled1" value="option1" disabled="">
</div>
<label for="default-textarea1">Textarea</label>
<textarea id="default-textarea1"></textarea>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn">Save changes</button>
<button class="btn">Cancel</button>
</div>
</form>