HTML and CSS Reference
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.
The pattern attribute applies only to text boxes. It can't be used to override the validation
built into the email or url types.