CSS pseudo-klase elemenata forme

Ove pseudo-klase su pre svega zamišljene kao modifikacija izgleda elemenata forme na osnovu njihovog trenutnog "stanja", odnosno korisnikovih aktivnosti.

Spremili smo i primer u kome demonstriramo teme iz ove lekcije.

:focus

Primenjuje se na elemenat koji dospe u fokus, bilo putem tastature, bilo kada korisnik klikne na njega. Elemenat u fokusu je onaj koji u tom trenutku prima ulaz sa tastature (npr. kada se popunjava <input> polje).

:enabled
:disabled

Pseudo-klasa :enabled se primenjuje na element forme sa kojim je dozvoljen rad (moguće unositi tekst, moguće kliknuti na dugme i sl.)

Sa druge strane, pseudo-klasa :disabled se primenjuje ako je u pitanju element forme sa kojim je zabranjen rad.

:required
:optional

Pseudo-klasa :required se primenjuje na elemenat forme ako je za njega postavljen parametar required, što označava da je element obavezno uneti. Na ovaj način se u formi lako mogu izdvojiti obavezna polja.

Svi ostali (neobavezni) elementi će biti formatirani prema CSS pravilima definisanim u pseudo-klasi :optional.

:valid
:invalid

Ove dve pseudo-klase se "aktiviraju" na osnovu validacije elemenata u formi. Validacija je nova stvar, uvedena u HTML5 specifikaciji i odnosi se na dodat veliki broj novih tipova <input> elementa. Tipični primeri podataka za koje se proverava da li su ispravno uneti su URL (web adresa) i e-mail, pošto uvek moraju da zadovolje određenu "formu".

Tako je moguće definisati izgled polja u kome jeste (:valid), odnosno nije unet ispravan podatak (pseudo-klasa :invalid).

:in-range
:out-of-range

Ovo su još dve pseudo-klase koje se primenjuju vezano za validaciju elemenata, ali ovaj put za numeričke vrednosti, za koje su definisani parametri min i max.

Ako se u <input> elementu unese broj koji je van ovako definisanih granica, element će se formatirati prema CSS pravilima pod pseudo-klasom :out-of-range, dok će ispravno uneto polje biti formatirano prema pseudo-klasi :in-range.

:checked
:indeterminate

Ove dve pseudo-klase se odnose specifično na <input> elemente tipa checkbox ("kućica" za štikliranje). Moguće ej definisati izgled Ukoliko je element "štikliran" - odnosi se na elemente forme.

Pseudo-klasa :checked definiše izgled elementa ukoliko je "štikliran". Inače, specifična pseudo-klasa za ovaj element kada nije štikliran, ne postoji - to se definiše kroz običan selektor.

Pseudo-klasa :indeterminate u stvari služi za modifikovanje izgleda u slučaju kada elemenat ima postavljeno svojstvo indeterminate (što je moguće postići samo programski, preko JavaScripta). Ovo je stanje elementa koje bismo opisali kao "nije ni štikliran ni prazan, već ostaje nepromenjen, kakav god da je bio".

:default

Pseudo-klasa :default se odnosi na one elemente forme koji važe za podrazumevane. Najbolji primer je kada na formi imamo više <input> elemenata tipa submit, što se prikazuje kao nekoliko "dugmića" na koje korisnik može da klikne kako bi poslao podatke. Ono dugmence koje je podrazumevano u slučaju da forma reagije kada korisnik pritisne enter, je dugmence na koje se ova pseudo-klasa primenjuje.

  <style>
    input:disabled {
      color: #ddd;
    }
    
    input:out-of-range {
      background-color: #fbb;
    }
  </style>
  ...
  <input type="text" value="Neki tekst" disabled>
  <input type="numeric" value="0" min="1" max="10">