Forms are only lightly styled. This is partly to keep things simple, but also to avoid breaking the functionaility of elements like select boxes. These can be buggy to style.

An email field with an inline label and a description underneath.

The select box is the same height as an input box/button so you align them horizontally.

Each field is wrapped in a <div> with a class of field. If you want the labels to be inline you add another class to the div: <div class="field inline-label">. This sets the label and any input element to display: inline-block.

If you want the input elements to line up vertically then you need to set a width on the labels for that particular form. By default the inline labels will be the size of the label text, plus 5px margin to the right.


Checkboxes need the inline-label and checkbox classes on the parent <div>. We leave the default styling on the boxes themselves.

Form buttons

If you have the choice of submit buttons you might want to use the <button> element rather than using <input type="submit">. The <button> element gives you more styling options.

Here is <input type="submit" value="Submit" class="blue">:

and here is <button type="submit" class="blue">Submit</button>:

Notice we can use the class to change the colour. Here is the button with a class of orange:


Here is a fieldset with the generic class tinted to give a grey background. It also includes a <legend> ('My fieldset'). The submit button is aligned right because its container <div> has a general class of align-right. I've given all the labels the same width in a document-level style rule.

My fieldset

An email field with an inline label and a description underneath.