Do you use the correct input type?

Last updated by Brook Jeynes [SSW] 9 months ago.See history

HTML 5 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" />

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" />

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:

Type What
Color This is a color picker. This is not supported on mobile or in all browsers.
Date This brings up the date picker on mobile
Datetime-local This brings up a date-time picker on mobile
Email This adds ".com" and "@" to the keyboard on mobile
File Use then when you want a button to upload files. This will also allow users to upload from their mobile device’s photo library.
Month This brings up a month and year picker on mobile
Number This displays as a number selector on desktop and can be set with upper and lower limits. However, it does not work on mobile yet.
Password This masks the characters and should be used for any privacy sensitive information
Range This will show a slider control and works on mobile
Search This should be used to define search fields
Tel This brings up the number pad on mobile
Time This brings up the time picker on mobile
URL This adds ".com" to the keyboard on mobile
We open source. Powered by GitHub