HTML and CSS Reference
In-Depth Information
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.
joe@example.com">
Numbers
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
number.
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.
