TL;DR
- Validering starter ofte i HTML med attributter som
requiredogminlength. - CSS kan bruge pseudo-klasser som
:required,:user-validog:user-invalid. - Input states gør formularen mere forklarende, mens brugeren arbejder.
- Krav, feedback og styling skal hænge sammen.
Hvis du kun husker én ting: Beskriv kravene i HTML, og lad CSS vise hvad der er gyldigt og ugyldigt.
Beskriv kravene i HTML
Før CSS kan vise gode input states, skal formularen vide, hvad den forventer.
Det kan fx være:
required(der fortæller at feltet er obligatorisk)minlength(der fortæller at feltet skal have et minimum antal tegn)type="email"(der fortæller at feltet skal indeholde en gyldig email-adresse)
Det er en styrke ved HTML, at du kan beskrive krav direkte i markup i stedet for at opfinde dem helt fra bunden i JavaScript.
Brug pseudo-klasser til feedback
Når kravene findes i HTML, kan CSS reagere på dem.
Det gør det muligt at style felter, der er:
- obligatoriske
- gyldige
- ugyldige
Det er netop her pseudo-klasser som :required, :user-valid og :user-invalid bliver nyttige.
Tænk i mønstre, ikke kun enkelte felter
Ofte vil du ikke kun style selve input-feltet. Du vil også style den gruppe, som feltet ligger i.
Det kan fx være:
- en stjerne ved labelen hvis feltet er obligatorisk
- en fejlbesked hvis feltet er ugyldigt
- en grøn eller rød kant omkring hele gruppen
Det gør feedbacken lettere at opdage.
Demo
Her kombinerer du HTML-krav og CSS pseudo-klasser i samme løsning:
Her er øvelsen vi laver i undervisningen: