:requiredPseudo luokkatarkennettuna CSS mahdollistaa tekijöille valita ja tyyliä tahansa sovitettu elementin kanssa requiredmäärite. Lomakkeilla voidaan helposti ilmoittaa, millä kentillä on oltava kelvolliset tiedot, ennen kuin lomake voidaan lähettää, mutta ne antavat käyttäjälle mahdollisuuden välttää odottamista, kun palvelin on käyttäjän syötteen ainoa vahvistaja.
Oletetaan, että meillä on syöte, jonka attribuutti on, type="name"ja teemme siitä vaadittu syöttö käyttämällä requiredloogista attribuuttia 1 :
Nyt voimme tyylitellä syötteen :requiredpseudoluokan valitsimella:
/* style all elements with a required attribute */ :required ( background: red; )Voimme myös muotoilla vaaditut lomakekentät yksinkertaisilla valitsimilla sekä ketjuttamalla muita näennäisluokan valitsimia:
/* 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
Katso kynä: vaadittu muotoilu Chris Coyier (@chriscoyier) CodePeniltä.
Kiinnostavat paikat
requiredMäärite käsitellään totuusarvona eli se ei vaadi arvoa. Pelkkä requiredelementin käyttäminen antaa selaimen tietää, että tämä attribuutti on olemassa, ja vastaava syöte on itse asiassa pakollinen kenttä. Vaikka W3C-spesifikaation mukaan vaadittu attribuutti toimii myös tyhjällä arvolla tai arvolla attribuuttien nimen kanssa.
Vaadittu attribuutti pyytää myös selainta käyttämään natiivia huomiotekstejä, kuten esittelystä kuvattua kuplaviestiä.
Niille syötteille, joita ei ole muotoiltu käyttämällä :required, kirjoittajat voivat myös mukauttaa ei-vaadittuja elementtejä käyttämällä :optionalpseudoluokan valitsinta :invalidja :validjotka laukaistaan, kun lomakekentän tietovaatimukset täyttyvät.
Muodossa validointi voidaan lisäksi vaikuttaa esimerkiksi rinnalla requiredkanssa patternmäärite auttaa suodatintiedot riippuen tulon n typemäärite. Kuviot voidaan kirjoittaa säännöllisenä lausekkeena tai merkkijonona. Alla olevassa esimerkissä käytämme säännöllistä lauseketta vastaamaan sähköpostiosoitteen syntaksia.
:requiredMäärite toimii valintanapeilla. Jos asetat vaaditun yhden valintanapin (tai kaikki), kyseinen valintanappiryhmä vaaditaan. Valintaruutujen kohdalla kukin yksittäinen valintaruutu vaaditaan (tarkistettava).
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3–4.4.4 | 10.3 |
1 Boolen attribuutit : Useat HTML5: n määritteet ovat loogisia attribuutteja. Boolen attribuutin läsnäolo elementissä edustaa todellista arvoa, ja attribuutin puuttuminen edustaa väärää arvoa. Jos attribuutti on läsnä, sen arvon on oltava joko tyhjä merkkijono tai arvo, joka on isojen ja pienten kirjainten välinen vastaavuus attribuutin kanoniselle nimelle, ilman etu- tai loppuväliä.