basics

Overview

Forms are built using an unordered list assigned class="remove-sides", and list items assigned class="row".

Example
WCMS use
MVC.net use
Code 
<ul class="remove-sides">
    <li class="row">…</li>
    <li class="row">…</li>
</ul>

Inside each <li> element, attach label, inputs, help like so:

<li class="row">
    <label for="txtBox">[label]</label>
    <span class="help"></span>
    <input type="text" id="txtBox" placeholder="Enter some text" />
</li>

Where a text input would benefit from explanatory text or a sample input, use the placeholder attribute as above

Input types

Use the HTML5 input types:

  • Email address
    type="email"
  • Telelphone number
    type="tel"
  • URL/Web link
    type="url"

Smaller controls can sit side-by-side (where appropriate to do so) by simply nesting columns inside the <li> row.

Grouping radio buttons/checkboxes

Radio button and checkbox groups should be placed inside their own fieldset with a legend.

Giving six columns classes to the list items will sit them side-by-side and help them flow down the screen.

Pick your favourite Ghostbuster optional

If your radio buttons are just Yes/No then you can use one-half column class so they sit side-by-side even on small screens

Is Ghostbusters your favourite film? required

For shame :(

A wise choice

Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release