44 Chapter 4
I’m not giving a demonstration of the checked state here, as most
browsers have different interpretations of which style rules can be applied
to checkbox inputs. For a comprehensive overview of cross-browser styl-
ing of form elements, I highly recommend “Styling Form Controls with
CSS” from the blog 456 Berea Street (http://www.456bereastreet.com/lab/
styling-form-controls-revisited/).
There is a fourth UI element state, indeterminate, which is used in a
limited set of circumstances; for example, a radio button input in a group
where no input has been checked would be classed as indeterminate, as
would a progress element with no value supplied. Although implemented
in some browsers, however, it hasn’t yet been fully defined, and its status is
indeterminate (ha!).Constraint Validation Pseudo-classes
HTML5 introduced a new API for client-side validation of forms, known
as the constraint validation API, which can be used to determine if certain
requirements are met before the form contents are sent to the server. The
constraint validation API brings along with it an associated range of new
pseudo-classes.noTe Mozilla Developer Network (MDN) has an excellent introduction to the Constraint
Validation API at https://developer.mozilla.org/docs/Web/Guide/HTML/
HTML5/Constraint_validation/.Under constraint validation, a form field can be made mandatory
through use of the new required attribute:<input type="text" required>You can style elements depending on whether they’re required or
optional by using their namesake pseudo-classes::required {...}
:optional {...}Each form field can be in one of two states of validation: either valid or
invalid. If no specific constraints are applied, either by the browser or the
author, a form field is valid by default. As before, each state has a namesake
pseudo-class::valid {...}
:invalid {...}WArninG In a form with which the user has yet to interact, fields with constraints that aren’t
met—such as being required—will have rules set with the :invalid pseudo-class
applied already.