Do you use the correct input type?
  v3.0 Posted at 22/05/2015 1:38 PM by Rebecca Liu

HTML5 introduced a whole slew of new type properties for forms. Gone are the days of just using type="text" for every field in a form (barring buttons and checkboxes).

Although most of these don't do anything on desktop, on mobile devices they bring up the correct keyboard. As we move into a more mobile digital age, small things like the proper numerical keyboard or a keyboard with a quick ".com" becomes increasingly important.

<label for="phone">Phone</label>: <input type="text" name="phone"></input>

Figure: Bad Example – This field is using a text type and shows a standard keyboard on mobile

<label for="phone">Phone</label>: <input type="tel" name="phone"></input>

Figure: Good Example – This field is using the correct field type and shows the keypad on mobile

Here is a table of some useful input types and what they do:

ColorThis is a color picker. This is not supported on mobile or in all browsers.
DateThis brings up the date picker on mobile
Datetime-localThis brings up a date-time picker on mobile
EmailThis adds ".com" and "@" to the keyboard on mobile
FileUse then when you want a button to upload files. This will also allow users to upload from their mobile device’s photo library.
MonthThis brings up a month and year picker on mobile
NumberThis displays as a number selector on desktop and can be set with upper and lower limits. However, it does not work on mobile yet.
PasswordThis masks the characters and should be used for any privacy sensitive information
RangeThis will show a slider control and works on mobile
SearchThis should be used to define search fields
TelThis brings up the number pad on mobile
TimeThis brings up the time picker on mobile
URLThis adds ".com" to the keyboard on mobile

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address: