:requiredSelektor psevdo razred v CSS omogoča avtorjem, da izberete in stil vsako ujema element z requiredatributom. Obrazci lahko zlahka navedejo, v katerih poljih morajo biti veljavni podatki, preden je obrazec mogoče oddati, vendar uporabniku omogoča, da se izogne čakanju, ker je strežnik edini preveritelj uporabnikovega vnosa.
Recimo, da imamo vhod z atributom type="name"in ga z obveznim vnosom uporabimo z requiredlogičnim atributom 1 :
Zdaj lahko ta vnos oblikujemo s pomočjo :requiredizbirnika psevdo razreda:
/* style all elements with a required attribute */ :required ( background: red; )Zahtevana polja obrazca lahko tudi oblikujemo z uporabo preprostih izbirnikov, kot tudi povezovanje dodatnih izbirnikov psevdo razreda:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Demo
Oglejte si Pen: zahtevano oblikovanje Chris Coyier (@chriscoyier) na CodePen.
Zanimivosti
requiredAtribut se obravnava kot logična kar pomeni, da ne zahteva vrednost. Če preprosto imate requiredelement, brskalnik ve, da ta atribut obstaja in je ustrezen vnos v resnici obvezno polje. Čeprav v skladu s specifikacijami W3C zahtevani atribut deluje tudi s prazno vrednostjo ali vrednostjo z imenom atributov.
Zahtevani atribut tudi zahteva, da brskalnik uporabi izvorne oblačke, kot je sporočilo z oblački, prikazano v predstavitvi.
Za tiste vnose, ki niso oblikovani z uporabo :required, lahko avtorji prilagodijo tudi nezaželene elemente z uporabo :optionalizbirnika psevdo razreda skupaj z :invalidin :validki se sprožijo, ko so izpolnjene zahteve za podatke v obrazcu.
Validacijo obrazca lahko skupaj requiredz patternatributom dopolnite tudi za lažje filtriranje podatkov, odvisno od vhodnega typeatributa. Vzorce lahko zapišemo kot regularni izraz ali niz. V spodnjem primeru uporabljamo regularni izraz, ki ustreza sintaksi e-poštnega naslova.
:requiredAtribut deluje na radijskih gumbov. Če zahtevate en izbirni gumb (ali vse), bo potrebna posebna skupina izbirnih gumbov. V potrditvenih poljih označi vsako posamezno potrditveno polje (ki ga je treba potrditi).
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 10. | 4. | 10. | 12. | 10.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Logični atributi : Številni atributi v HTML5 so logični atributi. Prisotnost logičnega atributa na elementu predstavlja resnično vrednost, odsotnost atributa pa napačno vrednost. Če je atribut prisoten, mora biti njegova vrednost prazen niz ali vrednost, ki se ne ujema z velikimi in malimi črkami za kanonično ime atributa, brez presledkov, ki vodijo ali zaostajajo.