HTML and CSS Reference
trols to play around with. HTML5 introduces a range of new input types that make it easier for users to fill in forms
by providing easy-to-use form controls.
Many of the latest mobile devices, such as smartphones and tablets, use software keyboards that have the capability
to alter their layout depending on the type of data that is being collected. The new input types introduced in HTML5
provide signals to mobile browsers so that they can display customized keyboards that make it easier for users to
HTML5 introduces the new tel input type for collecting telephone numbers. By specifying this special input type,
devices that use software keyboards (such as touch devices) can display a slightly different keyboard that makes it
easier for the users to input their data. For example, iOS will display a keyboard with numbers rather than letters, as
shown in Figure 6-2.
Figure 6-2 The iOS keyboard displayed for input elements with the type tel.
The device shown in Figure 6-2 uses a UK keyboard layout and therefore displays a pound sign (£) instead of a
You used the tel input type for the phone field in your bookings form:
<input type="tel" name="phone" id="phone" placeholder="000-000-0000">
The email type is another newbie introduced in HTML5 and brings with it the double-
barreled goodness that is customized keyboards and browser validations (more on validations in Chapter 7). Figure
6-3 shows the keyboard displayed in iOS for email input elements.