HTML forms II

Derek Bridge

Department of Computer Science,
University College Cork

HTML forms II

Aims:

• to learn a little about making forms accessible
• to learn how to use CSS to style a form

Accessibility

• There are extra HTML tags and attributes for making accessible forms
  • some are for labelling and grouping other elements
  • some are for keyboard alternatives for selecting/activating controls
• (These extra tags give good selectors for CSS rules too)

Accessibility: the title attribute

• You usually want to explain to a user what s/he must enter into a text field
• There are at least three ways of doing this
• One way is to use the title attribute, so that a tooltip appears when the user hovers over the field
• E.g.:

  <input type="text" name="zip"
      title="A valid US zip code or UK postcode. For other countries, leave blank." />

• You probably shouldn't use this method on its own. Why?

Accessibility: the placeholder attribute

• New to HTML5 is the placeholder attribute
• E.g.

  <input type="text" name="firstname" placeholder="Your first name" />

• Its value appears in the text field, disappears when the user focuses on the field, and is restored when focus leaves the field if the user hasn't typed anything
• Contrast this with the value attribute (from previous lecture)
• Neat approach but only works with modern browsers

Accessibility: the label element

• The most obvious way is to put a label next to a control such as a text field
• You could do this:
  Surname: <input type="text" name="surname" />
• But it is better to use the label tag:
  <label>Surname:</label>
<input type="text" name="surname" />

Accessibility: the for attribute

• Better still is to 'tie together' the label and control
  • put an id attribute on the control (we'll use the same value as the name but they're different things)
  • put a for attribute on the label
  <label for="surname">Surname:</label>
<input type="text" name="surname" id="surname" />
• Why? Screen readers/voice browsers can use the labels
• (BTW the labels are also clickable)
• Class exercise: What's the difference between the name and id attributes?

Breaks, paragraphs, lists, tables, or divs?

• Most forms have multiple controls
• Should we
  • put a br after each one?
  • wrap each one in a p?
  • wrap each one in a li within a ul/ol?
  • wrap each one in a td within a tr within a table?
  • wrap each one in a div?
• My preference is ......... [Fill this in during the lecture]

Accessibility: the fieldset and legend elements

• Within the form element, group together related controls inside a fieldset element
• Include a legend element nested in the fieldset to describe the group of controls

Accessibility: example fieldset and legend elements

<form action="process.php" method="get>
    <fieldset>
        <legend>Customer Details</legend>
        <div>
            <label for="firstname">First name:</label>
            <input type="text" name="firstname" id="firstname" />
        </div>
        <div>
            <label for="surname">Surname:</label>
            <input type="text" name="surname" id="surname" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Billing Address</legend>
        ...
    </fieldset>
    ...
</form>

Accessibility: the accesskey attribute

• The input element has an accesskey attribute
• Helps users who rely on the keyboard, rather than a mouse, to move between controls
• Use it to specify a character that can be used as a keyboard shortcut (in Chrome/Firefox with Alt-Shift)
• E.g.
  <input type="text" name="firstname" accesskey="f" />
<input type="text" name="surname" accesskey="s" />

Accessibility: the accesskey attribute

• How will the user know what shortcut to use?
• E.g. underline the letter on the screen
• HTML:

  <div>
      <label for="firstname">
          <span class="shortcut">F</span>irst name:
      </label>
      <input type="text" name="firstname" id="firstname" />
  </div>

  (span is used to markup a phrase when other tags such as em i, strong, b, etc. aren't right)
• CSS:

  .shortcut
  {
      text-decoration: underline;
  }

CSS for forms

• Many people use tables for form layout but CSS can be used instead
• Float the labels to the left, and give them a width
• Clear each div to ensure it starts below the previous floated label

label
{
    float: left;
    width: 10em;
}

form div
{
    clear: left;
} 

Prettifying a form

• The CSS on the previous slide is just for lining up the text fields
• Now use all the usual stuff (padding, borders, colours,…) to make the form look nicer
• In particular, e.g.,
  • add top margin to each div
  • use text-align: right on the labels