:requiredPseudo klassi valijat CSS võimaldab autorid valida ja stiili tahes sobitatud elemendi requiredatribuut. Vormid võivad hõlpsasti näidata, millistel väljadel peavad enne vormi esitamist olema kehtivad andmed, kuid see võimaldab kasutajal vältida ootamist, kui server on kasutaja sisendi ainus valideerija.
Oletame, et meil on sisend atribuudiga type="name"ja muudame selle nõutavaks sisendiks, kasutades requiredloogilist atribuuti 1 :
Nüüd saame selle sisendi :requiredkujundada pseudoklassi valija abil:
/* style all elements with a required attribute */ :required ( background: red; )Samuti saame vormistada vajalikud vormiväljad, kasutades lihtsaid valijaid, samuti aheldades kokku täiendavaid pseudoklassi valijaid:
/* 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
Vaadake pliiatsit: Chris Coyier (@chriscoyier) nõutav stiil CodePenis.
Huvipunktid
requiredAtribuut käsitletakse tõeväärtus tähendab see ei nõua raha. Lihtsalt requiredelemendi olemasolu annab brauserile teada, et see atribuut on olemas ja vastav sisend on tegelikult kohustuslik väli. Kuigi vastavalt W3C spetsifikatsioonile töötab nõutav atribuut ka tühja väärtusega või atribuutide nimega väärtusega.
Nõutav atribuut nõuab ka, et brauser kasutaks kohalikke viiktekste, nagu näiteks demost kujutatud mull-sõnum.
Nende sisendite jaoks, mida pole stiiliga kasutatud :required, võivad autorid kohandada ka nõutavaid elemente, kasutades :optionalpseudoklassi valijat :invalidja :validmis käivitatakse, kui vormivälja andmenõuded on täidetud.
Vormi kinnitamine võib õnnitleda kõrval requiredkoos patternatribuut abi filter andmed sõltuvalt sisend on typeatribuut. Mustrid saab kirjutada regulaaravaldisena või stringina. Allpool toodud näites kasutame e-posti aadressi süntaksile vastamiseks tavalist avaldist.
:requiredAtribuut töötab raadio nupud. Kui panete kohustuslikuks ühe raadionupu (või kõik), on vajalik see konkreetne raadionuppude rühm. Märkeruutude puhul teeb iga üksiku märkeruudu vajalikuks (tuleb märkida).
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3–4.4.4 | 10.3 |
1 Boole'i atribuudid : HTML5-s on mitmed atribuudid. Boolean atribuudi olemasolu elemendis tähistab tõelist väärtust ja atribuudi puudumine valet väärtust. Kui atribuut on olemas, peab selle väärtus olema kas tühi string või väärtus, mis vastab atribuudi kanoonilisele nimele suurtähteta ja ilma algava või lõputa tühimikuta.