Forms

Warning: Please ensure that all form inputs have an appropriate label! Never use a placeholder instead of a label.

Text field

<form action="" data-validate="" method="post">
  <fieldset>
    <div>
      <label for="f-name">Name (required): </label><input aria-required="true" data-error="Please enter your name." id="f-name" name="f[name]" type="text" />
    </div>
    <div>
      <label for="f-email">Email (pattern matching): </label><input data-error="Please enter a valid email." data-pattern="email" id="f-email" name="f[email]" type="email" />
    </div>
    <div>
      <label for="f-id">Product Code (regex pattern matching): </label><input data-error="Single digit followed by three uppercase letters." data-pattern="[0-9][A-Z]{3}" id="f-id" maxlength="4" name="f[p_id]" placeholder="3ABC" type="text" />
    </div>
    <div>
      <label for="f-message">Message: </label><textarea aria-required="true" data-error="Please enter a message." id="f-message" name="f[message]" placeholder="Please enter a message"></textarea>
    </div>
  </fieldset>
  <footer>
    <input type="submit" />
  </footer>
</form>

Checkbox and radio buttons

Select preferred option (required):
Make a selection (implicitly required): 
<form method="post" action="" data-validate>

  <fieldset>
    <div>
      <legend>Select preferred option (required):</legend>
      <div class="inline">
        <input type="checkbox" id="c1" class="checkbox" aria-required="true" name="f[approve]" data-error="Please select an option" />
        <label for="c1">
          <span>Option 1</span>
        </label>
      </div>
      <div class="inline">
        <input type="checkbox" id="c2" class="checkbox" aria-required="true" name="f[approve]" data-error="Please select an option" />
        <label for="c2">
          <span>Option 2</span>
        </label>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div>
      <legend>Make a selection (implicitly required):</legend>
      <div class="inline">
        <input checked aria-required="true" name="f[radio]" type="radio" id="radio-1-1" value="yes" data-error="Please make a selection" />
        <label for="radio-1-1">
          <span>Yes</span>
        </label>
      </div>
      <div class="inline">
        <input aria-required="true" name="f[radio]" type="radio" id="radio-1-2" value="no" data-error="Please make a selection" />
        <label for="radio-1-2">
          <span>No</span>
        </label>
      </div>
    </div>
  </fieldset>

  <footer>
    <input type="submit">
  </footer>
</form>

Select

<form action="" data-validate="" method="post">
  <fieldset>
    <div>
      <select aria-label="This label is hidden from view but not from screen readers" aria-required="true" name="f[select]">
        <option value="-1">
          Please select
        </option>
        <optgroup>
          <option>
            Hi
          </option>
        </optgroup><optgroup>
          <option>
            Another group
          </option>
          <option>
            Another group, another opt
          </option>
        </optgroup></select>
    </div>
    <div style="width:50%">
      <label for="s2">Alternate style dropdown </label><select aria-required="true" class="alt" data-error="Please make a selection from the 2nd dropdown, this help error message is particularly long to test out just how long an error message can be" id="s2" name="f[select2]">
        <option value="-1">
          Please select
        </option>
        <optgroup>
          <option>
            Hi
          </option>
        </optgroup><optgroup>
          <option>
            Another group
          </option>
          <option>
            Another group, another opt
          </option>
        </optgroup></select>
    </div>
  </fieldset>
  <footer>
    <input type="submit" />
  </footer>
</form>

Search field

<form action="http://search-au.funnelback.com/s/search.html" method="get">
  <fieldset>
    <input name="collection" type="hidden" value="unimelb-researchers" />
    <div class="inline attached">
      <span class="fill"><input aria-label="Search for experts by name or research topic" aria-required="true" data-error="Please enter a keyword" name="query" placeholder="Search for experts by name or research topic" type="search" /></span><span><button class="inline-button" type="submit"><span class="small icon--hide-label" data-icon="search">Go</span></button></span>
    </div>
    <div>
      <input class="checkbox" id="s-c1" name="facetScope" type="checkbox" value="f.Supervisor%20Availability%7C1=Available" /><label for="s-c1"><span>Show only available supervisors</span></label>
    </div>
  </fieldset>
</form>

Form error

<form action="#" data-validate="" method="post">
  <div aria-atomic="true" class="form-error" role="alert">
    <p>
      We didn't recognise the username or password you entered.
    </p>
  </div>
  <fieldset>
    <div>
      <label for="f-username">Username: </label><input aria-required="true" data-error="Please enter your username." id="f-username" name="f[username]" type="text" />
    </div>
    <div>
      <label for="f-password">Password: </label><input aria-required="true" data-error="Please enter your password." id="f-password" name="f[password]" type="password" />
    </div>
  </fieldset>
</form>

Required Fields

  • The aria-required attribute informs screen readers that input fields require a value.

<label for="firstname">First name (required):</label>
<input aria-required="true" type="text" id="firstname" name="fname" />
  • The data-required attribute can be used to display a * symbol next to a label.

<label for="firstname" data-required="true">First name:</label>
<input aria-required="true" type="text" id="firstname" name="fname" />

Required fields example

<form action="" data-validate="" method="post">
  <fieldset>
    <div>
      <label data-required="true" for="f-name-2">Name: </label><input aria-required="true" data-error="Please enter your name." id="f-name-2" name="f[name]" type="text" />
    </div>
    <div>
      <label data-required="true" for="f-email-2">Email: </label><input data-error="Please enter a valid email." data-pattern="email" id="f-email-2" name="f[email]" type="email" />
    </div>
  </fieldset>
  <footer>
    <input type="submit" />
  </footer>
</form>

Why Labels are Important

  • Screen readers go into forms mode when they encounter form input fields. Unless form elements have labels associated with them, the screen reader cannot tell the user what data needs to be entered.
  • Adding a 'for' attribute to the label and an 'id' to the input field tells the screen reader that the input field has a label.

Example 1a - How to do it


<label for="firstname">First name:</label>
<input type="text" id="firstname" name="fname" />

Example 1b - How not to do it


First name:
<input type="text" name="fname" />

Example 1c - How not to do it


<input type="text" name="fname" placeholder="First name" />

Why Fieldsets are Important

  • Fieldsets are a semantic grouping of related form elements.
  • The first element inside the fieldset should be a legend element, which provides a label for the group.

Example 2a - How to do it


<fieldset>
  <legend>Is this your country of citizenship as well?</legend>
  <input type="radio" name="yes" id="citizenship-yes" value="yes"/>
  <label for="citizenship-yes">Yes</label>
  <input type="radio" name="no" id="citizenship-no" value="no"/>
  <label for="citizenship-no">No</label>
</fieldset>

Example 2b - How not to do it


Is this your country of citizenship as well?
<input type="radio" name="yes" id="citizenship-yes" value="yes"/>
<label for="citizenship-yes">Yes</label>
<input type="radio" name="no" id="citizenship-no" value="no"/>
<label for="citizenship-no">No</label>

Example 3a - How to do it


<fieldset>
  <legend>Please select research area or department you wish to study</legend>
  <input type="checkbox" name="biomedical" id="research-biomedical" value="Biomedical"/>
  <label for="research-biomedical">Biomedical</label>
  <input type="checkbox" name="chem-bio" id="research-chem-bio" value="Chemical & Biomolecular"/>
  <label for="research-chem-bio">Chemical & Biomolecular</label>
</fieldset>

Example 3b - How not to do it


Please select research area or department you wish to study
<input type="checkbox" name="biomedical" id="research-biomedical" value="Biomedical"/>
<label for="research-biomedical">Biomedical</label>
<input type="checkbox" name="chem-bio" id="research-chem-bio" value="Chemical & Biomolecular"/>
<label for="research-chem-bio">Chemical & Biomolecular</label>

Inline form

<form action="" method="get">
  <fieldset>
    <div class="inline attached">
      <span class="fill"><input aria-label="Inline form" aria-required="true" data-error="Please enter a keyword" name="query" placeholder="Inline form" type="text" /></span><span><button class="inline-button" type="submit"><span class="small icon--hide-label" data-icon="send">Go for it!</span></button></span>
    </div>
  </fieldset>
</form>
<form action="" method="get">
  <fieldset>
    <div class="inline attached">
      <span class="fill"><input aria-label="Inline form" aria-required="true" data-error="Please enter a keyword" name="query" placeholder="Inline form" type="text" /></span><span><input class="inline-button" type="submit" value="Go for it!" /></span>
    </div>
  </fieldset>
</form>
<form action="" method="get">
  <fieldset>
    <div class="inline detached">
      <span class="fill"><input aria-label="Inline form (detached)" aria-required="true" data-error="Please enter a keyword" name="query" placeholder="Inline form (detached)" type="text" /></span><span><input class="inline-button" type="submit" value="Go for it!" /></span>
    </div>
  </fieldset>
</form>
<form action="" method="get">
  <fieldset>
    <div class="inline detached big">
      <span class="fill"><input aria-label="Inline form (detached)" aria-required="true" data-error="Please enter a keyword" name="query" placeholder="Inline form (detached, big)" type="text" /></span><span><button class="inline-button"><span><span class="small" data-icon="search"></span>Search</span></button></span>
    </div>
  </fieldset>
</form>

Unstyled controls

Unstyled radio and checkbox controls are now available by adding class="unstyled-controls" to the form (1st example below), or class="unstyled" selectively on each input (2nd example below). The unstyled class is only available for radio and checkbox controls!

class="unstyled-controls" on form
class="unstyled" on first control 
<p>Unstyled <code>radio</code> and <code>checkbox</code> controls are now available by adding <code>class="unstyled-controls"</code> to the form (1st example below), or <code>class="unstyled"</code> selectively on each <code>input</code> (2nd example below). The unstyled class is only available for <strong>radio</strong> and <strong>checkbox</strong> controls!
</p>
<form action="" class="unstyled-controls" data-validate="" method="post">
  <fieldset>
    <legend><code>class="unstyled-controls"</code> on form </legend>
    <div>
      <div class="inline">
        <input aria-required="true" class="checkbox" data-error="Please select an option" id="c2-1" name="f2[approve]" type="checkbox" /><label for="c2-1"><span>Option 1</span></label>
      </div>
      <div class="inline">
        <input aria-required="true" checked="" data-error="Please make a selection" id="radio-2-1" name="f2[radio]" type="radio" value="yes" /><label for="radio-2-1"><span>Yes</span></label>
      </div>
      <div class="inline">
        <input aria-required="true" data-error="Please make a selection" id="radio-2-2" name="f2[radio]" type="radio" value="no" /><label for="radio-2-2"><span>No</span></label>
      </div>
    </div>
  </fieldset>
</form>
<form action="" class="alt" data-validate="" method="post">
  <fieldset>
    <legend><code>class="unstyled"</code> on first control </legend>
    <div>
      <div class="inline">
        <input aria-required="true" class="unstyled checkbox" data-error="Please select an option" id="c3-1" name="f2[approve]" type="checkbox" /><label for="c3-1"><span>Option 1</span></label>
      </div>
      <div class="inline">
        <input aria-required="true" class="checkbox" data-error="Please select an option" id="c3-2" name="f2[approve]" type="checkbox" /><label for="c3-2"><span>Option 2</span></label>
      </div>
    </div>
  </fieldset>
</form>

Disabled fields

<form action="" data-validate="" method="post">
  <fieldset>
    <div>
      <label for="f-dis-1">Text field</label><input disabled="" id="f-dis-1" type="text" value="This text field is disabled" />
    </div>
    <div>
      <label for="f-dis-2">Text area</label><textarea disabled="" id="f-dis-2">This area field is disabled</textarea>
    </div>
  </fieldset>
</form>