Forms - Grid System
Table of contents
Overview
All form classes are based on formalize.me and Twitter Bootstrap.
There are three styles of common web forms:
| Name | Class | Description |
|---|---|---|
| Vertical | No class required | Stacked, left-aligned labels over controls |
| Inline | .form-inline |
Left-aligned label and inline-block controls for compact style |
| Horizontal | .form-horizontal |
Use grid system, right-aligned labels on same line as controls |
Checkboxes and radio buttons
While most of the form elements require no additional CSS, checkboxes and radio buttons each have a class name to assist with their presentation. This is due to the fact that they are both coded as labels/inputs and therefore, additional CSS is needed to override those inherited styles.
Example
Browser default
With class form-checkbox
View code
<label class="form-checkbox" for="checkbox-1a">
<input type="checkbox" value="option1" id="checkbox-1a"> 1 </label>
<label class="form-checkbox" for="checkbox-1b">
<input type="checkbox" value="option2" id="checkbox-1b"> 2 </label>
<label class="form-checkbox" for="checkbox-1c" >
<input type="checkbox" value="option3" id="checkbox-1c"> 3 </label>
With class form-checkbox form-label-inline
View code
<label class="form-checkbox form-label-inline" for="checkbox-2a">
<input type="checkbox" value="option1" id="checkbox-2a"> 1 </label>
<label class="form-checkbox form-label-inline" for="checkbox-2b">
<input type="checkbox" value="option2" id="checkbox-2b"> 2 </label>
<label class="form-checkbox form-label-inline" for="checkbox-2c" >
<input type="checkbox" value="option3" id="checkbox-2c"> 3 </label>
Example
Browser default
With class form-radio
View code
<label for="male" class="form-radio"><input type="radio" name="gender" id="male"> Male</label> <label for="female" class="form-radio"><input type="radio" name="gender" id="female"> Female</label>
With class form-radio form-label-inline
View code
<label for="male-1" class="form-radio form-label-inline"><input type="radio" name="gender" id="male-1"> Male</label> <label for="female-1" class="form-radio form-label-inline"><input type="radio" name="gender" id="female-1"> Female</label>
Vertical form
No extra markup, standard form controls.
Example 1
View code
<form>
<label for="home-mail">E-mail:</label>
<input type="text" id="home-mail" size="30" />
<label for="home-password">Password:</label>
<input type="password" id="home-password" size="10" />
<label for="home-remember" class="form-checkbox">
<input type="checkbox" id="home-remember">
Remember Me
</label>
<input type="submit" class="button button-accent" value="Sign in">
</form>
Example 2
View code
<form class="background-light">
<label for="home-mail2">E-mail:</label>
<input type="text" id="home-mail2" size="30" />
<label for="home-password2">Password:</label>
<input type="password2" id="home-password2" size="10" />
<label for="home-remember2" class="form-checkbox">
<input type="checkbox" id="home-remember2">
Remember Me
</label>
<input type="submit" class="button button-accent" value="Sign in">
</form>
Inline form
Inputs are block level to start. For .form-inline forms, we force all elements to be inline-block.
Example 1
View code
<form class="form-inline span-5">
<label for="email1" class="wb-invisible">Email</label>l <input type="text" id="email1" class="width-20" placeholder="Email" />
<label for="pword1" class="wb-invisible">Password</label> <input type="password" id="pword1" class="width-20" placeholder="Password" />
<label class="form-checkbox">
<input type="checkbox" />
Remember me </label>
<button type="submit" class="button button-accent">Sign in</buttonv
</form>
Example 2
View code
<form class="form-inline span-5 background-light">
<label for="email2" class="wb-invisible">Email</label>l <input type="text" id="email2" class="width-20" placeholder="Email" />
<label for="pword2" class="wb-invisible">Password</label> <input type="password" id="pword2" class="width-20" placeholder="Password" />
<label class="form-checkbox2">
<input type="checkbox2">
Remember me </label>
<button type="submit" class="button button-accent">Sign in</button>
</form>
Example 3
View code
<form> <div class="form-inline"> <input type="submit" class="button button-accent" value="Submit feedback" id="submit" name="submit"> <input type="reset" class="button" value="Reset"> </div> </form>
Horizontal form
The form-horizontal class behaves like a grid parent.
All nested grid cells within the form-horizontal must include the row-start and row-end CSS, as this layout behaves like a parent/child grid system.
To make horizontal forms, we are required to use the grid system.
Example 1
View code
<form class="form-horizontal">
<div class="span-1 row-start">
<label for="hor-01">E-mail</label>
</div>
<div class="span-4 row-end">
<input type="text" id="hor-01" class="width-70" />
</div>
<div class="clear"></div>
<div class="span-1 row-start">
<label for="hor-02" >Password</label>
</div>
<div class="span-4 row-end">
<input type="password" id="hor-02" class="width-30" />
</div>
<div class="clear"></div>
<div class="span-1 row-start"></div>
<div class="span-4 row-end">
<label class="form-checkbox" for="hor-03">
<input type="checkbox" value="option1" id="hor-03" />
Remember Me</label>
</div>
<div class="clear"></div>
<div class="span-1 row-start"></div>
<div class="span-4 row-end">
<button type="submit" class="button button-accent">Sign in</button>
</div>
<div class="clear"></div>
</form>
Example 2
View code
<form class="form-horizontal background-light">
<div class="span-1 row-start margin-top-medium">
<label for="hor-01-2">E-mail</label>
</div>
<div class="span-4 row-end margin-top-medium">
<input type="text" id="hor-01-2" class="width-70" />
</div>
<div class="clear"></div>
<div class="span-1 row-start">
<label for="hor-02-2" >Password</label>
</div>
<div class="span-4 row-end">
<input type="password" id="hor-02-2" class="width-30" />
</div>
<div class="clear"></div>
<div class="span-1 row-start"></div>
<div class="span-4 row-end">
<label class="form-checkbox" for="hor-03-2">
<input type="checkbox" value="option1" id="hor-03-2" />
Remember Me</label>
</div>
<div class="clear"></div>
<div class="span-1 row-start"></div>
<div class="span-4 row-end">
<button type="submit" class="button button-accent">Sign in</button>
</div>
<div class="clear"></div>
</form>
Control states
Extend form controls
Buttons
Refer to: Buttons
- Date modified: