HTML and CSS Reference
In-Depth Information
matches the regex. Regex is a topic that is beyond the scope of this topic, but as a quick
example, the following code snippet would limit input into the telephone field only to
the format NNN-NNN-NNNN, where the first digit would be a number between 2 and
<input
type="tel"
name="usphone"
pattern="^[2-9]\d{2}-
\d{3}-\d{4}$" />
It is cryptic looking for sure! If you want to discover how regex works, do a quick
web search for
regex
, and you will find loads of resources. For some handy, prebuilt
regex patterns to match everything from credit card numbers to latitude and longitude,
can develop and test your own patterns.
Note
The
pattern
attribute isn't just found on the telephone input type; it's found
on all the text-based input types. Those are
text
,
search
,
url
,
tel
,
email
, and
password
.
Making input required
A simpler form (pun unintended) of validation is requiring that certain fields and form
controls be given at least some kind of value before the form is submitted. This is where
the Boolean
required
attribute can be utilized. By adding this attribute to a form con-
trol:
<p><input type="text" name="example" required /></p>
an error pop-up will appear if nothing is entered into the field (
Figure 4-16
)
.
Figure 4-16.
A validation error showing that a required field was not filled in
Submitting forms using buttons and images
A submit button is used to submit all the form data to the file indicated in the form's
ac-
tion
attribute (or to itself, if no
action
attribute is specified). As mentioned earlier
in the chapter, the
button
element is a more flexible option than the
input
element
Search WWH ::
Custom Search