HTML and CSS Reference
In-Depth Information
Indicating Required Values
In the survey form, Alice has indicated that the
custname
,
email
, and
receipt
ields
all must be completed for the survey to be valid. If any of those fields are left blank, she
wants the browser to notify the user of the missing data and cancel the submission. You
can indicate that a field is required by adding the following
required
attribute to the
control element:
You can turn off validation
by adding the attribute
novalidate=
”novalidate”
to the
form
element.
required=”required”
If a required field is left blank and the submit button is clicked, the browser will can-
cel the submission and display an error message.
Validating Field Values
• To indicate that a field is required, add the
required=”required”
attribute to the
control element.
• To validate an e-mail address, set the data type to
email
. To validate a Web address,
set the data type to
url
.
• To validate that a text input box follows a character pattern, add the attribute
pattern=”
regex
”
where
regex
is a regular expression that defines the character pattern.
To see how validation works with HTML5, add the
required
attribute to the
custname
,
email
, and
receipt
fields.
To apply and test the
required
attribute:
◗
1.
Return to the
survey.htm
file in your text editor.
◗
2.
Add the attribute
required=”required”
to the
input
element for the
custname
field at the top of the form.
◗
3.
Scroll down to the
input
element for the
email
field and then add the attribute
required=”required”
.
◗
4.
Go to the
receipt
field and then add the attribute
required=”required”
to the
input
element. Figure 6-67 highlights the newly added code.