A :requiredCSS ál osztályválasztója lehetővé teszi a szerzők számára, hogy kiválasszák és stilizálják az requiredattribútummal illesztett elemeket . Az űrlapok könnyen megadhatják, hogy mely mezőknek kell érvényes adatokkal rendelkezniük az űrlap elküldése előtt, de lehetővé teszik a felhasználó számára, hogy elkerülje azt a várakozást, amikor a szerver a felhasználó bevitelének egyedüli ellenőrzője.
Tegyük fel, hogy van egy bemenetünk egy attribútummal, type="name"és tegyük kötelezővé az 1required logikai attribútum használatával :
Most a :requiredpszeudo osztályválasztóval stilizálhatjuk ezt a bevitelt :
/* style all elements with a required attribute */ :required ( background: red; )A szükséges űrlapmezőket is stilizálhatjuk egyszerű választókkal, valamint láncolhatunk további álosztály választókat:
/* 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; )Demó
Lásd: Toll: kötelező stílus: Chris Coyier (@chriscoyier) a CodePen-en.
Látványosság
Az requiredattribútum logikai értelemben van kezelve, vagyis nem igényel értéket. Ha egyszerűen csak requiredegy elemen van , akkor a böngésző tudja, hogy ez az attribútum létezik, és a megfelelő bemenet valójában kötelező mező. Bár a W3C specifikáció szerint a kötelező attribútum üres értékkel vagy az attribútum nevével is működik.
A szükséges attribútum azt is kéri, hogy a böngésző natív feliratokat használjon, például a bemutatóból ábrázolt buboréküzenetet.
Azoknál a bemeneteknél, amelyek nem vannak stílusozva :required, a szerzők az :optionalálosztály választóval együtt testreszabhatják a nem szükséges elemeket , :invalidés :validamelyek akkor aktiválódnak, amikor az űrlapmező adatigényei teljesülnek.
Az űrlapellenőrzés requiredaz patternattribútummal együtt bókolhat is , hogy segítsen szűrni az adatokat a bemenet typeattribútumától függően . A minták írhatók reguláris kifejezésként vagy karakterláncként. Az alábbi példában egy reguláris kifejezést használunk az e-mail cím szintaxisának megfeleltetésére.
Az :requiredattribútum a rádiógombokon működik. Ha egy rádiógombot (vagy az összeset) felteszi, akkor az adott rádiógombcsoportra lesz szükség. A jelölőnégyzeteknél minden egyes jelölőnégyzetet kötelezővé tesz (be kell jelölni).
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 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 Logikai attribútumok : A HTML5 számos attribútuma logikai attribútum. A logikai attribútum jelenléte egy elemen a valódi értéket képviseli, az attribútum hiánya pedig a hamis értéket képviseli. Ha az attribútum jelen van, akkor az értékének vagy az üres karakterláncnak kell lennie, vagy egy olyan értéknek, amely kis- és nagybetűkben nem egyezik az attribútum kanonikus nevével, elöl vagy záró szóköz nélkül.