HTML and CSS Reference
In-Depth Information
In this code, at the top of the survey form, users are provided a secret code to correspond
with their survey. They can't change this because the
readonly
attribute is specified.
Where fields aren't read-only and users can type whatever they want into the text box,
providing them with the capability to check spelling is a good idea.
Providing a spelling checker
Checking spelling is another method available to validate user input. The
spellcheck
attribute
helps provide feedback to users that a word they've entered is misspelled. Again, this attri-
bute is applied to the input element:
<textarea id="otherCommentsText" rows="5" cols="20" spellcheck="true"></textarea>
In this HTML, the
spellcheck
option has been turned on for the Other Comments text area
because users can type whatever they want and might make spelling errors.
The output of a text box with
spellcheck
isn't any different until a user starts typing and
enters a spelling error. Figure 3-17 shows the red underlining for the words that are detected
as spelled incorrectly.
FIGURE 3-17
A
textarea
with
spellcheck
enabled
In some cases, the built-in validation provided by the input controls isn't sufficient, and
providing a custom pattern to validate is better, as explored in the next section.
Specifying a pattern
As you saw with the
email
and
url
input types, built-in validation is fairly thorough in ensuring
that the information entered is accurate and as expected. However, in some cases you might
require looser or stricter validation. Suppose that you don't want users to have to specify
the HTTP protocol in a
url
type, but you want to allow only .com or .ca websites. This can be
achieved by using the
pattern
attribute, which allows the use of a regular expression to define
the pattern that should be accepted.
EXAM TIP
The
pattern
attribute applies only to text boxes. It can't be used to override the validation
built into the
email
or
url
types.
Search WWH ::
Custom Search