Den :requiredpseudo klasse vælgeren i CSS giver forfattere til at vælge og stil enhver matchede element med requiredattribut. Formularer kan let angive, hvilke felter der skal have gyldige data, inden formularen kan indsendes, men giver brugeren mulighed for at undgå ventetiden ved at have serveren til at være den eneste validator af brugerens input.
Lad os sige, at vi har et input med en attribut af type="name"og gør det til et krævet input ved hjælp af den requiredboolske attribut 1 :
Nu kan vi style dette input ved hjælp af :requiredpseudo-klassevælgeren:
/* style all elements with a required attribute */ :required ( background: red; )Vi kan også style krævede formularfelter ved hjælp af enkle vælgere samt sammenkæde yderligere pseudoklassevælgere:
/* 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
Se pennen: krævet styling af Chris Coyier (@chriscoyier) på CodePen.
Interessepunkter
Den requiredegenskab behandles som en boolesk hvilket betyder at det ikke kræver en værdi. Ved blot at have requiredet element kan browseren vide, at denne attribut eksisterer, og det tilsvarende input er faktisk et obligatorisk felt. Selvom den krævede attribut ifølge W3C-specifikationen også fungerer med en tom værdi eller en værdi med attributnavnet.
Den krævede attribut anmoder også om, at browseren bruger indbyggede infoudvidelser, såsom boblebeskeden, der er afbildet fra demoen.
For de input, der ikke er stylet ved hjælp af :required, kan forfattere også tilpasse ikke-krævede elementer ved hjælp af :optionalpseudo-klassevælgeren sammen med, :invalidog :validsom udløses, når et formfelts datakrav er opfyldt.
Formularvalidering kan også komplimenteres sammen requiredmed patternattributten for at hjælpe med at filtrere data afhængigt af inputets typeattribut. Mønstre kan skrives som et regulært udtryk eller en streng. I eksemplet nedenfor bruger vi et regulært udtryk til at matche syntaksen for en e-mail-adresse.
Den :requiredegenskab virker på radioknapper. Hvis du sætter påkrævet på en radioknap (eller alle), kræves den pågældende gruppe radioknapper. På afkrydsningsfelter gør hvert enkelt afkrydsningsfelt påkrævet (skal markeres).
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | 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 Boolske attributter : Et antal attributter i HTML5 er boolske attributter. Tilstedeværelsen af en boolsk attribut på et element repræsenterer den sande værdi, og fraværet af attributten repræsenterer den falske værdi. Hvis attributten er til stede, skal dens værdi enten være den tomme streng eller en værdi, der er et store og små bogstav, der er ufølsomt for attributts kanoniske navn uden noget ledende eller efterfølgende mellemrum.