:requiredPseudo klasės selektorių CSS leidžia autoriai pasirinkti ir stilius jokios suderinta elementas su requiredatributu. Formose galima lengvai nurodyti, kuriuose laukuose turi būti galiojantys duomenys, kad būtų galima pateikti formą, tačiau vartotojas gali išvengti laukimo, kai serveris yra vienintelis vartotojo įvesties patvirtintojas.
Tarkime, kad turime įvestį su atributu type="name"ir padarykime ją requiredbūtinu įvedimu naudodami 1 loginį atributą :
Dabar mes galime susisteminti tą įvestį naudodami :requiredpseudo klasės selektorių:
/* style all elements with a required attribute */ :required ( background: red; )Taip pat galime suformuoti reikiamus formos laukus naudodami paprastus selektorius, taip pat sujungdami papildomus pseudo klasės selektorius:
/* 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; )Demonstracija
Žiūrėkite rašiklį: reikalaujama Chriso Coyierio (@chriscoyier) stiliaus „CodePen“.
Lankytinos vietos
Šis requiredatributas traktuojamas kaip loginė reikšmė, todėl jam nereikia vertės. Paprasčiausiai turėdami requiredelementą naršyklė sužino, kad šis atributas egzistuoja, o atitinkamas įvestis iš tikrųjų yra būtinas laukas. Nors pagal W3C specifikaciją reikalingas atributas taip pat veikia su tuščia reikšme arba su atributų pavadinimu.
Būtinas atributas taip pat prašo naršyklės naudoti vietines figūrines išnašas, pvz., Burbulinį pranešimą, vaizduojamą iš demonstracinės versijos.
Tiems įvestims, kurių stilius nenaudojamas :required, autoriai taip pat gali pritaikyti nereikalingus elementus naudodamiesi :optionalpseudo klasės parinkikliu :invalidir :validkurie suveikia, kai laikomasi formos lauko duomenų reikalavimų.
Formos patvirtinimas taip pat gali būti pagirtas kartu requiredsu patternatributu, kad būtų lengviau filtruoti duomenis, atsižvelgiant į įvesties typeatributą. Šablonus galima rašyti kaip įprastą išraišką arba eilutę. Toliau pateiktame pavyzdyje naudojame įprastą išraišką, kad atitiktų el. Pašto adreso sintaksę.
Šis :requiredatributas veikia naudojant radijo mygtukus. Jei uždėsite vieną radijo mygtuką (arba visus), reikės tos konkrečios radijo mygtukų grupės. Pažymėdami žymimuosius langelius, kiekvienas atskiras žymimasis laukelis yra būtinas (turi būti pažymėtas).
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4.4.3–4.4.4 | 10.3 |
1 Būlio atributai : Daugelis HTML5 atributų yra loginiai atributai. Būlio atributo buvimas elemente reiškia tikrąją vertę, o atributo nebuvimas - klaidingą vertę. Jei atributas yra, jo vertė turi būti tuščia eilutė arba reikšmė, kuri neatitinka didžiųjų ir mažųjų raidžių atributo kanoniniame pavadinime, be priekinės ar galinės tarpų.