Code examples

Use semantic HTML

Sign in
<form aria-label="Sign in">
  <fieldset>
    <legend>
      Sign in
    </legend>
    <label for="username">
      Username
    </label>
    <input type="text" 
            id="username">
    <button class="margin">
      Sign in
    </button>
  </fieldset>
</form>

Affordance: width indicates the expected input

Form field width should afford the user space to enter the characters will be required. Do not arbitrarily limit the width of names, usernames, passwords or emails.

  • Middle initial should be wide enough to accommodate 1 character
  • State should be wide enough to accommodate 2 characters
  • Zip code should be wide enough to accommodate 5 characters

Why we stack inputs

Do not put forms in multiple columns.

  • People are accustomed to scrolling vertically. There is no advantage to making the page take up less vertical space.
  • People with low vision may be using a zoom tool, enlarging the view of their screen and thus only seeing a portion of the form. If there is a column on the right side, it will be difficult to discover the fields.

Why we use autocomplete

  • Autocomplete is helpful for all customers leading to a speedier conversion
  • For those with motor disabilities, it eliminates the need to laboriously enter information
Shipping information
<form aria-label="Shipping information">
  <fieldset>
    <legend>
      Shipping information
    </legend>

    <label for="given-name">
      First name
    </label>
    <input type="text" 
           id="given-name"
           autocomplete="given-name">

    <label for="additional-name">
      Middle initial
    </label>
    <input type="text" 
            id="additional-name"
            autocomplete="additional-name"
            maxlength="1">

    <label for="family-name">
      Last name
    </label>
    <input type="text" 
            id="family-name"
            autocomplete="family-name">

    <label for="address-line1">
      Address line 1
    </label>
    <input type="text" 
            id="address-line1"
            autocomplete="address-line1">
      
    <label for="address-line2">
      Address line 2
    </label>
    <input type="text" 
            id="address-line2"
            autocomplete="address-line2">
    
    <label for="address-level2">
      City
    </label>
    <input type="text" 
            id="address-level2"
            autocomplete="address-level2">

    <label for="address-level1">
      State
    </label>
    <input type="text" 
            id="address-level1"
            autocomplete="address-level1"
            maxlength="2">

    <label for="postal-code">
      Zip postal code
    </label>
    <input type="text" 
            id="postal-code"
            autocomplete="postal-code"
            maxlength="5">

    <button class="margin">
      Submit
    </button>
  </fieldset>
</form>