Met de :requiredpseudo-class-selector in CSS kunnen auteurs elk overeenkomend element met het requiredattribuut selecteren en opmaken. Formulieren kunnen eenvoudig aangeven welke velden geldige gegevens moeten hebben voordat het formulier kan worden ingediend, maar stelt de gebruiker in staat om het wachten te vermijden doordat de server de enige validator is van de invoer van de gebruiker.
Laten we zeggen dat we een invoer hebben met een attribuut van type="name"en er een vereiste invoer van maken met behulp van het requiredbooleaanse attribuut 1 :
Nu kunnen we die invoer stylen met behulp van de :requiredpseudo class selector:
/* style all elements with a required attribute */ :required ( background: red; )We kunnen ook vereiste formuliervelden opmaken met behulp van eenvoudige selectors, en ook extra pseudo-class selectors aan elkaar koppelen:
/* 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
Zie de pen: vereiste styling door Chris Coyier (@chriscoyier) op CodePen.
Nuttige Plaatsen
Het requiredattribuut wordt behandeld als een booleaanse waarde, wat betekent dat er geen waarde voor nodig is. Door simpelweg requiredeen element aan te houden, weet de browser dat dit attribuut bestaat en is de overeenkomstige invoer in feite een verplicht veld. Hoewel, volgens de W3C-specificatie, het vereiste attribuut ook werkt met een lege waarde of een waarde met de attributenaam.
Het vereiste kenmerk vraagt de browser ook om native callouts te gebruiken, zoals het bubbelbericht dat in de demo wordt weergegeven.
Voor die invoer die niet is gestileerd met :required, kunnen auteurs ook niet-vereiste elementen aanpassen met behulp van de :optionalpseudoklassekiezer, samen met :invaliden :validdie worden geactiveerd wanneer aan de gegevensvereisten van een formulierveld wordt voldaan.
Formuliervalidatie kan ook worden aangevuld requiredmet het patternattribuut om gegevens te filteren afhankelijk van het typeattribuut van de invoer . Patronen kunnen worden geschreven als een reguliere expressie of als een tekenreeks. In het onderstaande voorbeeld gebruiken we een reguliere expressie om de syntaxis voor een e-mailadres te matchen.
Het :requiredattribuut werkt op keuzerondjes. Als u één keuzerondje (of alle) vereist heeft, is die specifieke groep keuzerondjes vereist. Op selectievakjes, maakt elk afzonderlijk selectievakje vereist (moet worden aangevinkt).
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Booleaanse attributen : Een aantal attributen in HTML5 zijn booleaanse attributen. De aanwezigheid van een booleaans kenmerk op een element vertegenwoordigt de ware waarde en de afwezigheid van het kenmerk vertegenwoordigt de valse waarde. Als het attribuut aanwezig is, moet de waarde ervan de lege tekenreeks zijn of een waarde die niet hoofdlettergevoelig is voor de canonieke naam van het attribuut, zonder voorloop- of volgspaties.