:requiredVolič pseudo trieda CSS umožňuje autorom vybrať a štýl akékoľvek uzavreté prvok s requiredatribútom. Formuláre môžu ľahko určiť, ktoré polia musia mať platné údaje pred odoslaním formulára, ale umožňujú používateľovi vyhnúť sa čakaniu, ktoré vznikne tým, že server bude jediným validátorom jeho vstupu.
Povedzme, že máme vstup s atribútom type="name"a urobíme z neho požadovaný vstup pomocou requiredboolovského atribútu 1 :
Teraz môžeme tento vstup upraviť pomocou :requiredselektora pseudo triedy:
/* style all elements with a required attribute */ :required ( background: red; )Môžeme tiež štýlovať požadované polia formulárov pomocou jednoduchých selektorov a spojením ďalších selektorov pseudo tried:
/* 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; )Ukážka
Pozrite si Pen: požadovaný štýl Chrisa Coyiera (@chriscoyier) na CodePen.
Body záujmu
requiredAtribút je považovaný za logickú čo znamená, že nevyžaduje hodnotu. Jednoduché requiredpoužitie prvku umožňuje prehliadaču vedieť, že tento atribút existuje, a zodpovedajúci vstup je v skutočnosti povinné pole. Aj keď podľa špecifikácie W3C požadovaný atribút pracuje aj s prázdnou hodnotou alebo s hodnotou s názvom atribútov.
Požadovaný atribút tiež vyžaduje, aby prehliadač používal natívne popisky, ako je napríklad bublinová správa zobrazená v ukážke.
Pre tie vstupy, ktoré nie sú štylizované pomocou :required, môžu autori tiež prispôsobiť nepovinné prvky pomocou :optionalselektora triedy pseudo spolu s :invalida :validktoré sa spustia, keď sú splnené požiadavky na údaje poľa formulára.
Spolu requireds patternatribútom možno tiež doplniť validáciu formulára, ktorá pomáha filtrovať údaje v závislosti od typeatribútu vstupu . Vzory môžu byť napísané ako regulárny výraz alebo ako reťazec. V nasledujúcom príklade používame regulárny výraz na zosúladenie syntaxe e-mailovej adresy.
:requiredAtribút pracuje na prepínačov. Ak nastavíte požadovaný na jednom prepínači (alebo na všetkých), bude sa vyžadovať konkrétna skupina prepínačov. Na začiarkavacích políčkach umožňuje, aby sa každé jednotlivé začiarkavacie políčko vyžadovalo (musí byť začiarknuté).
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Boolovské atribúty : Mnoho atribútov v HTML5 je boolovských atribútov. Prítomnosť boolovského atribútu na prvku predstavuje skutočnú hodnotu a absencia atribútu predstavuje falošnú hodnotu. Ak je atribút prítomný, jeho hodnota musí byť buď prázdny reťazec, alebo hodnota, ktorá nezhoduje veľké a malé písmená pre kanonický názov atribútu bez úvodných alebo koncových medzier.