HTML and CSS Reference
In-Depth Information
FIGURE 2.7
Error message for
the text input type when it is
not filled in before submission.
FIGURE 2.8
Error message for
the url input type when it is not
filled in before submission or the
data is of the incorrect type.
These don't look very interesting in desktop browsers until you combine them
with HTML5's built-in data validation. Although if you try them on a mobile plat-
form, such as iOS or Android, you'll notice that they give you special sympathetic
keypads more tailored to filling in those types of data—a nice usability plus for
your users.
Yo u c a in s p e c i f y t h a t a in y f o r m i in p u t m u s t b e fi l l e d i in b e f o r e t h e f o r m c a in b e
submitted by adding the
required
attribute:
<input type=”text” required>
The different types of text input will accept different types of data, automati-
cally feeding back errors to the user when the data isn't correct for those inputs
upon submission (as shown in
Figures 2.7
and
2.8
):
<input type=”text” required>
<input type=”url” required>
Yo u c a in a l s of in a r r of w d of w in t h e r a in g e of f d a t a t h a t w i l l b e a c c e p t e d i in a f of r m
input using the
min
,
max
, and
pattern
attributes:
<input type=”number” min=”1” max=”100”>
<input type=”text” pattern=”[1-6]{3}”>
