HTML and CSS Reference
In-Depth Information
The same
CSS
works equally well with text con-
trols using the
pattern
attribute. The three images
shown here are based on the example from the
section “The min, max, and pattern attributes”:
<input type="text"
pattern="[0-9][A-Z]{3}">
<input type="text"
pattern="[0-9][A-Z]{3}"
value="1abc">
<input type="text"
pattern="[0-9][A-Z]{3}"
value="1ABC">
There's also
CSS
support for styling required
controls differently through pseudo-classes:
input:required {
outline: 5px dashed blue;
}
input:optional {
outline: 5px solid green;
}
The images show the result of this
CSS
applied to
these two inputs:
<input type="number" required>
<input type="number">
Turning off validation
Sometimes you want the user to be able to submit the form without
triggering validation. For example, if a form is long and has many sec-
tions, you might want to let the user save their progress and come back
and complete the form later. To do this,
HTML5
provides two new
attributes:
novalidate
and
formnovalidate
.
The
novalidate
attribute can be applied to the
<form>
element itself,
whereas the
formnovalidate
attribute affects the enter form but should
be applied only to a Submit button:
<input type="submit" value="Save for Later" formnovalidate>
