Create Amazing Forms

Choose the best input type

Streamline information entry by using the right input type. Users appreciate websites that automatically present number pads for entering phone numbers, or automatically advance fields as they entered them. Look for opportunities to eliminate wasted taps in your forms.

TL;DR

  • Choose the most appropriate input type for your data to simplify input.
  • Offer suggestions as the user types with the datalist element.

HTML5 input types

HTML5 introduced a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards. Users are more easily able to enter the required information without having to change their keyboard and only see the appropriate keys for that input type.

Input type Typical Keyboard
url
For entering a URL. It must start with a valid URI scheme, for example http://, ftp:// or mailto:.
tel
For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern.
email
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.
search
A text input field styled in a way that is consistent with the platform's search field.
number
For numeric input, can be any rational integer or float value.
range
For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control.
datetime-local
For entering a date and time value where the time zone provided is the local time zone.
date
For entering a date (only) with no time zone provided.
time
For entering a time (only) with no time zone provided.
week
For entering a week (only) with no time zone provided.
month
For entering a month (only) with no time zone provided.
color
For picking a color.

Offer suggestions during input with datalist

The datalist element isn’t an input type, but a list of suggested input values to associated with a form field. It lets the browser suggest autocomplete options as the user types. Unlike select elements where users must scan long lists to find the value they’re looking for, and limiting them only to those lists, datalists provide hints as the user types.

    <label for="frmFavChocolate">Favorite Type of Chocolate</label>
    <input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
    <datalist id="chocType">
      <option value="white">
      <option value="milk">
      <option value="dark">
    </datalist>
    
View full sample

Remember

  • The datalist values are provided as suggestions, and users are not restricted to the suggestions provided.

Updated on 2014-08-06

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.