:requiredVolič pseudo třída CSS umožňuje autorům vybrat a styl jakékoliv uzavřeno prvek s requiredatributem. Formuláře mohou snadno označit, která pole musí mít platná data, než bude možné odeslat formulář, ale umožňuje uživateli vyhnout se čekání způsobenému tím, že server bude jediným ověřovatelem vstupu uživatele.
Řekněme, že máme vstup s atributem type="name"a uděláme z něj požadovaný vstup pomocí requiredbooleovského atributu 1 :
Nyní můžeme tento vstup stylovat pomocí :requiredselektoru pseudo třídy:
/* style all elements with a required attribute */ :required ( background: red; )Můžeme také stylovat požadovaná pole formulářů pomocí jednoduchých selektorů a zřetězení dalších selektorů pseudo tříd:
/* 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ázka
Podívejte se na Pen: required Styling od Chris Coyier (@chriscoyier) na CodePen.
Body zájmu
requiredAtribut je považován za logickou což znamená, že nevyžaduje hodnotu. Pouhé requiredpoužití prvku umožňuje prohlížeči vědět, že tento atribut existuje a odpovídající vstup je ve skutečnosti povinné pole. Ačkoli podle specifikace W3C požadovaný atribut funguje také s prázdnou hodnotou nebo s hodnotou s názvem atributů.
Požadovaný atribut také požaduje, aby prohlížeč používal nativní popisky, například bublinovou zprávu zobrazenou v ukázce.
Pro ty vstupy, které nejsou stylizované pomocí :required, mohou autoři také přizpůsobit nepožadované prvky pomocí :optionalselektoru pseudo tříd spolu s :invalida :validkteré se aktivují, když jsou splněny požadavky na data pole formuláře.
Ověření formuláře lze také doplnit spolu requireds patternatributem, aby bylo možné filtrovat data v závislosti na typeatributu vstupu . Vzory lze psát jako regulární výraz nebo řetězec. V níže uvedeném příkladu používáme regulární výraz, který odpovídá syntaxi e-mailové adresy.
:requiredAtribut pracuje na přepínačů. Pokud na jeden přepínač (nebo na všechny) zadáte požadovaný, bude požadována konkrétní skupina přepínačů. U zaškrtávacích políček je vyžadováno každé zaškrtávací políčko (bude zaškrtnuto).
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Boolean Attributes : a number of attributes in HTML5 are boolean attributes. Přítomnost booleovského atributu na prvku představuje skutečnou hodnotu a absence atributu představuje falešnou hodnotu. Pokud je atribut přítomen, jeho hodnota musí být buď prázdný řetězec, nebo hodnota, která nerozlišuje velká a malá písmena pro kanonický název atributu, bez úvodních nebo koncových mezer.