<button type="submit" disabled>Save draft</button>Formelementsareenabledbydefault;thatis,theyonlybecomedisabledifthe
disabledattributeisset.Usinginput:enabledwillmatcheveryinputelement
thatiswithoutadisabledattributeset.Conversely,button:disabledwouldmatch
allbuttonelementswithadisabledattribute:
css/chapter1/selectors-nth-child.css (excerpt)
button:disabled {
opacity: .5;
}Figure1.46showsthe:enabledand:disabledstatesforourbuttonelement.
Figure 1.46. A button in :enabled (left) and :disabled (right) states:required and :optional
Requiredandoptionalstatesaredeterminedbythepresenceorabsenceofthere-
quiredattributeonthefield.^19 Forexample:
01-selectors/input-pseudo-class.html (excerpt)
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder=
➥"example: [email protected]" required>
</p>Mostbrowsersonlyindicatewhetherafieldisrequiredoncetheformissubmitted.
Withthe:requiredpseudo-class,wecanindicatetotheuserthatthefieldisre-
(^19) RememberthatinHTML5,thepresenceorabsenceoftheattributedeterminesitsvalue.Inother
words,required="false"hasthesameeffectasrequired="true",required="required"
andrequired.
Selectors 63