Forms - Grid System

Table of contents

Related accessibility topics

Design add-on

Consider restyling the default button effect.

Button CSS

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.

Learn about a grid parent/child 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

CSS: focused

View code 
<input type="text" value="This is focused…" id="focusedInput" class="width-80 focused" />

CSS: form-uneditable-input

View code 
<input type="text" id="uneditable" placeholder="Some value here" disabled="disabled" class="width-80 form-uneditable-input" />

CSS: button-disabled. Borrowed from Button CSS

View code 
<input type="text" disabled="disabled" placeholder="Disabled input here…" id="disabledInput" class="width-80 button-disabled" />
View code 
<label class="form-checkbox">
<input type="checkbox" disabled="disabled" value="option1" id="optionsform-checkbox2" />
This is a disabled checkbox </label>

CSS: form-alert and form-text-inline

View code 
<div class="span-2 form-alert row-start">
	<label for="inputWarning" >Input with warning
	<span class="form-text-inline">Something may have gone wrong</span>
	</label>
</div>
<div class="span-4 form-alert row-end">
	<input type="text" id="inputWarning" />
</div>

CSS: form-attention and form-text-inline

View code 
 <div class="span-2 row-start form-attention">
	<label for="inputError" >Input with error
	<span class="form-text-inline">Please correct the error</span>
	</label>
</div>
<div class="span-4 row-end form-attention">
	<input type="text" id="inputError">
</div>

CSS: form-confirm and form-text-inline

View code 
<div class="span-2 row-start form-confirm">
	<label for="inputSuccess" >Input with success<
	<span class="form-text-inline">Woohoo!</span>
	;/label>
</div>
<div class="span-4 row-end form-confirm">
	<input type="text" id="inputSuccess">
</div>
View code 
<div class="span-2 row-start form-confirm">
	<label for="selectError" >Select with success
	<span class="form-text-inline">Woohoo!</span>
	</label>
</div>
<div class="span-4 row-end form-confirm">
	<select name="selectError" id="selectError">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

Extend form controls

CSS: span-* from the grid system

Width CSS option 1






View code 
<input type="text" id="span1" placeholder=".span-1" class="span-1 margin-bottom-medium" />
<br />
<input type="text" id="span2" placeholder=".span-2" class="span-2 margin-bottom-medium" />
<br />
...

CSS: width-*

Width CSS option 2

View code 
<label for="opt2w20" class="wb-invisible">Width CSS option 2 - .width-20</label> <input type="text" id="opt2w20" placeholder=".width-20" class="width-20 margin-bottom-medium" />
<label for="opt2w30" class="wb-invisible">Width CSS option 2 - .width-30</label> <input type="text" id="opt2w30" placeholder=".width-30" class="width-30 margin-bottom-medium" />
...

CSS: none

Block text option 1

Here's some help text

View code 
<label for="helptext-1" class="wb-invisible">Block help option 1</label>

<input type="text" size="16" id="helptext-1" class="span-2 margin-bottom-none">

<p>Here's some help text</p>

CSS: form-help-block

Block help option 2

Here's some help text

View code 
<div class="form-alert">
	<label for="helptext-1a" class="wb-invisible">Block help option 2 - .form-alert</label>
    <input type="text" size="16" id="helptext-1a" class="span-2 margin-bottom-none" />
    <p class="form-help-block">Here's some help text</p>
</div>

Here's some help text

View code 
<div class="form-attention">
	<label for="helptext-1a" class="wb-invisible">Block help option 2 - .form-attention</label>
    <input type="text" size="16" id="helptext-1a1" class="span-2 margin-bottom-none" />
    <p class="form-help-block">Here's some help text</p>
</div>

Here's some help text

View code 
<div class="form-confirm">
	<label for="helptext-1a2" class="wb-invisible">Block help option 2 - .form-confirm</label>
    <input type="text" size="16" id="helptext-1a2" class="span-2 margin-bottom-none" />
    <p class="form-help-block">Here's some help text</p>
</div>

CSS: form-text-inline

Inline help option 1

Here's some help text

View code 
<label for="helptext-2" class="wb-invisible">Inline help option 1</label>
<input type="text" size="16" id="helptext-2" class="span-2 margin-bottom-none" />
<p class="form-text-inline">Here's some help text</p>

CSS: form-text-inline

Inline help option 2

Here's some help text

View code 
<div class="form-alert">
	<label for="helptext-2a" class="wb-invisible">Inline help option 2 - .form-alert</label>
    <input type="text" size="16" id="helptext-2a" class="span-2 margin-bottom-none" />
    <p class="form-text-inline">Here's some help text</p>
</div>

Here's some help text

View code 
<div class="form-attention">
	<label for="helptext-2a1" class="wb-invisible">Inline help option 2 - .form-attention</label>
    <input type="text" size="16" id="helptext-2a1" class="span-2 margin-bottom-none" />
    <p class="form-text-inline">Here's some help text</p>
</div>

Here's some help text

View code 
<div class="form-confirm">
	<label for="helptext-2a2" class="wb-invisible">Inline help option 2 - .form-confirm</label>
    <input type="text" size="16" id="helptext-2a2" class="span-2 margin-bottom-none" />
    <p class="form-text-inline">Here's some help text</p>
</div>

CSS: form-input-prepend and form-addon

@
View code 
<div class="form-input-prepend">
	<span class="form-addon">@</span><input type="text" size="16" id="prependedInput" class="span-2 margin-bottom-none" />
</div>

CSS: form-input-append and form-addon

.00
View code 
<div class="form-input-append">
	<input type="text" size="16" id="appendedInput" class="span-2 margin-bottom-none" /><span class="form-addon">.00</span>
</div>

CSS: form-input-prepend, form-input-append and form-addon

$.00
View code 
<div class="form-input-prepend form-input-append">
	<span class="form-addon">$</span><input type="text" id="appendedPrependedInput" class="width-30" /><span class="form-addon">.00</span>
</div>

CSS: form-input-append and form-addon

View code 
<div class="form-input-append">
	<input type="text" id="appendedButton" class="width-30" /><button type="button" class="form-addon">Go!</button>
</div>

Buttons

Refer to: Buttons