CSS űrlap pszeudo-osztályok

A pszeudo-osztályok segítségével speciális állapotokat célozhatunk meg az űrlap elemein, például amikor a felhasználó fókuszba helyez egy mezőt, hibás adatot ad meg, vagy amikor egy mező kötelező.

Alap pszeudo-osztályok

A leggyakoribb pszeudo-osztályok közé tartozik a <:focus>, amely akkor érvényesül, amikor a mező aktív, a <:required> a kötelező mezőket jelöli, valamint a <:disabled> a letiltott állapotú mezőkhöz.

Az alábbi egyszerű példa bemutatja, hogyan néz ki egy alap űrlap kötelező mezőkkel, amelyekre pszeudo-osztályokat alkalmazunk.

Haladó pszeudo-osztályok

Az <:invalid> pszeudo-osztály különösen hasznos, ha valaki hibás adatot ad meg, például érvénytelen e-mail címet. A <:hover> vagy a <:checked> szintén sok lehetőséget ad az űrlapok interaktívvá tételéhez.

Ez a példa megmutatja, hogyan változik a mező színe hibás bemenet esetén, és hogyan emeljük ki a fókuszált mezőt.

Tippek pszeudo-osztályokhoz

A pszeudo-osztályokkal sokkal jobb felhasználói élményt érhetünk el, ha ésszel használjuk őket.

• Mindig biztosíts visszajelzést a felhasználónak hibás bevitel esetén.
• Használj vizuális jeleket, például színváltást a fókusz vagy hibák jelzésére.
• Ne terheld túl a felhasználót túl sok változással; a visszajelzés legyen egyértelmű, de nem zavaró.