Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



View Source | Submit Feedback

Create Amazing Forms

Label and name inputs properly

Forms are hard to fill out on mobile. The best forms are the ones with the fewest inputs. Good forms provide semantic input types. Keys should change to match the user's input type; users pick a date in a calendar. Keep your user informed. Validation tools should tell the user what they need to do before submitting the form.

TL;DR

  • Always use label s on form inputs, and ensure they're visible when the field is in focus.
  • Use placeholder s to provide guidance about what you expect.
  • To help the browser auto-complete the form, use established name 's for elements and include the autocomplete attribute.

The importance of labels

The label element provides direction to the user, telling them what information is needed in a form element. Each label is associated with an input element by placing it inside the label element, or by using the “ for ” attribute. Applying labels to form elements also helps to improve the touch target size: the user can touch either the label or the input in order to place focus on the input element. 

    <label for="frmAddressS">Address</label>
    <input type="text" name="ship-address" required id="frmAddressS"
      placeholder="123 Any Street" autocomplete="shipping street-address">
View full sample

Label sizing and placement

Labels and inputs should be large enough to be easy to press. In portrait viewports, field labels should be above input elements, and beside them in landscape. Ensure field labels and the corresponding input boxes are visible at the same time. Be careful with custom scroll handlers that may scroll input elements to the top of the page hiding the label, or labels placed below input elements may be covered by the virtual keyboard.

Use placeholders

The placeholder attribute provides a hint to the user about what’s expected in the input, typically by displaying the value as light text until the the user starts typing in the element. 

<input type="text" placeholder="MM-YYYY" ...>

Remember

  • Placeholders disappear as soon as the user starts typing in an element, thus they are not a replacement for labels. They should be used as an aid to help guide users on the required format and content.

Use metadata to enable auto-complete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors – especially on virtual keyboards and small devices.

Browsers use many heuristics to determine which fields they can auto-populate based on previously specified data by the user , and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

For example, to hint to the browser that it should auto-complete the form with the users name, email address and phone number, you should use: 

    <label for="frmNameA">Name</label>
    <input type="text" name="name" id="frmNameA"
    placeholder="Full name" required autocomplete="name">

    <label for="frmEmailA">Email</label>
    <input type="email" name="email" id="frmEmailA"
      placeholder="[email protected]" required autocomplete="email">

    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
      placeholder="[email protected]" required autocomplete="email">
    
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
      placeholder="+1-555-555-1212" required autocomplete="tel">
View full sample
Content type name attribute autocomplete attribute
Name name fname mname lname name
Email email email
Address address city region province state zip zip2 postal country street-address locality region postal-code country
Phone phone mobile country-code area-code exchange suffix ext tel
Credit Card ccname cardnumber cvc ccmonth ccyear exp-date card-type cc-name cc-number cc-csc cc-exp-month cc-exp-year cc-exp cc-type

The autocomplete attributes should be prefixed with either shipping or billing , depending on the context.

Remember

  • Auto-complete only works when the form method is post.

The autofocus attribute

On some forms, for example the Google home page where the only thing you want the user to do is fill out a particular field, you can add the autofocus attribute. When set, desktop browsers immediately move the focus to the input field, making it easy for users to quickly begin using the form. Mobile browsers ignore the autofocus attribute, to prevent the keyboard from randomly appearing.

Be careful using the autofocus attribute because it will steal keyboard focus and potentially preventing the backspace character from being used for navigation. 

<input type="text" autofocus ...>

Next Sections

  1. Design efficient forms
  2. Choose the best input type
  3. Label and name inputs properly
  4. Provide real-time validation
  5. Simplify checkout with requestAutocomplete API

Updated on 2014-04-30

Authors

Pete LePage

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .