HTML and CSS Reference
Figure 6-3 The iOS keyboard displayed for input elements with type email.
At first glance, not much has changed here but you might notice that @, underscore (_), and minus (-) symbols have
replaced the regular keys in the bottom-right corner of the keyboard.
Browsers with built-in support for validation will check that the e-mail address is supplied in a valid format and
prompt the user if there is a problem.
You have already used the email type for the e-mail field in your bookings form.
<input type="email" name="email" id="email" placeholder="e.g.
If you are collecting a numeric value, such as a quantity or age, you can use the number input type. By default, the
number type will expect an integer value and browsers that support validation will reject any non-integer values
that a user might attempt to provide. You can change this behavior by setting the step attribute to be a decimal
Browsers with support for the number type may display up and down arrows in the input field. Figure 6-4 shows
how a number field is displayed in Google Chrome.
Figure 6-4 An input element with the type number, displayed in Google Chrome.
The number type will also trigger the numbers keyboard to be displayed on devices that use software keyboards.
Refer to Figure 6-2 for how this keyboard looks in iOS.