Forms

There are three main types of forms,

1. INLINE
2. SMALL
3. LIST.

These forms contain no block-level elements but are the sole content of a BOX. They are typically a collection of labels and inputs that run together in a logical format for example the top-search BOX.

These forms constitute the numerous function buttons found on an ecommerce site eg. add to basket, checkout, remove etc… The form will /NOT/ be the sole contents of a BOX and will have a class .small. The markup follows this pattern:

  <form class="small">
    <fieldset>
      <input type="hidden" name="..." value="..." />
      .... hidden inputs
      <input type="submit or image" class="submit" />
    </fieldset>
  </form>

The submit button will be either a type=“image” (if a button set) or a regular type=“submit”.

NOTE: Currently some SMALL forms can overlap with the INLINE forms definition ie. add to basket form which has a quantity input contained within a <label>. Perhaps INLINE and SMALL should be combined… SMALL forms don't have /their own/ BOX however…

These constitute the bulk of the web forms within the site. They are LIST forms because the fields are laid out in lists and grouped into <fieldset>s.

NOTE: Accessibility is still being worked out here. An unordered list and use of <h3> rather than <legend> may be more appropriate however <fieldset>s are required to contain any input. Standards and accessibility are quite reasonable so /Not Urgent/

An overview of the LIST form markup:

• <fieldset>
  All sets of inputs are grouped into <fieldset>s This is for accessibility and it's also a logical structure to work with.
• <legend>
  The <legend> element is used to give the fieldset a title. Typically it will appear embedded in the top border of the fieldset:
  
• <ol>
  An <ol> or ordered-list is used to wrap the form fields.
  • <li class=“text required”>
    Within the <ol> the <li>s are given special classnames to indicate some information about the field. This has two advantages: 1) CSS Hooks for styling required fields, text fields, dropdown box fields, textarea fields etc… and 2) Javascript hooks for inline/AJAX validation.
    • .text This accounts for most of the fields. It is for a simple text box.

The submit buttons all have the .submit class name on them. Depending on the type of form they appear in there may be some extra markup you can use.

In LIST type forms