Forms

Structure

In a standard form, all fields should appear in a <li> inside a <ul> inside the <form>.

HTML

<form>
    <ul>
        <li>
            [form field]
        </li>
        <li>
            [form field]
        </li>
        <li>
            [form field]
        </li>
    </ul>
    <button class="button">Submit</button>
</form>

Examples

• Text

HTML

<li>
    <label for="text-field">Text</label>
    <input type="text" name="text-field" id="text-field" />
</li>

• Text Optional

HTML

<li>
    <label for="text-field-optional">Text <em>Optional</em></label>
    <input type="text" name="text-field-optional" id="text-field-optional" />
</li>

• Text with help text

  Example help text

HTML

<label for="text-field-help">Text with help text</label>
<input type="text" name="text-field-help" id="text-field-help" title="Example help text" />
<p class="field-explanation">Example help text</p>

• Email

HTML

<li>
    <label for="email-field">Email</label>
    <input type="email" name="email-field" id="email-field" />
</li>

• Password

HTML

<li>
    <label for="password-field">Password</label>
    <input type="password" name="password-field" id="password-field" />
</li>

• Textarea

HTML

<li>
    <label for="textarea">Textarea</em></label>
    <textarea name="textarea" id="textarea" rows="4" cols="30" ></textarea>
</li>

• Checkboxes

  Option 1 Option 2 Option 3

HTML

<li>
    <fieldset class="inline-fields">
        <legend>Checkboxes</legend>

        <label for="checkbox1">
            <input type="checkbox" name="checkbox1" id="checkbox1" class="checkbox" checked="checked" />
            Option 1
        </label>

        <label for="checkbox2">
            <input type="checkbox" name="checkbox2" id="checkbox2" class="checkbox" />
            Option 2
        </label>

        <label for="checkbox3">
            <input type="checkbox" name="checkbox3" id="checkbox3" class="checkbox" />
            Option 3
        </label>
    </fieldset>
</li>

• Radio buttons

  One Two Three

HTML

<li>
    <fieldset class="inline-fields">
        <legend>Radio buttons</legend>

        <label for="radio1">
            <input type="radio" name="radio1" id="radio1" class="checkbox" />
            One
        </label>

        <label for="radio2">
            <input type="radio" name="radio2" id="radio2" class="checkbox" checked="checked" />
            Two
        </label>

        <label for="radio3">
            <input type="radio" name="radio3" id="radio3" class="checkbox" />
            Three
        </label>
    </fieldset>
</li>

• Dropdown City Centre Leith North Southwest

HTML

<li>
    <label for="dropdown">Dropdown</label>
    <select name="dropdown">
        <option value="City Centre">City Centre</option>
        <option value="Leith">Leith</option>
        <option value="North">North</option>
        <option value="Southwest">Southwest</option>
    </select>
</li>

• File

HTML

<li>
    <label for="file-upload-field">File</label>
    <input class="file-upload" type="file" name="file-upload-field" id="file-upload-field" />
</li>

• Inline search (e.g. address lookup)
  Look up

HTML

<li>
    <label for="inline-search">Inline search (e.g. address lookup)</label>
    <div class="form-wrapper clearfix">
        <input type="search" name="inline-search" id="inline-search" />
        <button class="button">Look up</button>
    </div>
</li>

• Person 1

  Forename Surname
  Person 2

  Forename Surname
  Person 3

  Forename Surname

HTML

<li class="multiple-fieldsets">
    <fieldset>
        <legend>Person 1</legend>

        <label for="person1-forename">Forename</label>
        <input type="text" name="person1-forename" id="person1-forename" value="" />
        <label for="person1-surname">Surname</label>
        <input type="text" name="person1-surname" id="person1-surname" value="" />
    </fieldset>

    <fieldset>
        <legend>Person 2</legend>

        <label for="person2-forename">Forename</label>
        <input type="text" name="person2-forename" id="person2-forename" value="" />
        <label for="person2-surname">Surname</label>
        <input type="text" name="person2-surname" id="person2-surname" value="" />
    </fieldset>

    <fieldset>
        <legend>Person 3</legend>

        <label for="person3-forename">Forename</label>
        <input type="text" name="person3-forename" id="person3-forename" value="" />
        <label for="person3-surname">Surname</label>
        <input type="text" name="person1-surname" id="person3-surname" value="" />
    </fieldset>
</li>

Submit button

Next

HTML

<button class="button">Next</button>