HTML and CSS Reference
In-Depth Information
expression (regex) 3 as a value and validates input into the field based on whether it
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
9 and the rest would be between 0 and 9 4 :
<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,
check out http://html5pattern.com , which also includes a test bed where you
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