:requiredSelektor pseudo klase u CSS omogućuje autorima za odabir i stil bilo uskladiti elementa s requiredatributom. Obrasci mogu lako naznačiti u kojim poljima moraju biti valjani podaci prije nego što se obrazac može poslati, ali omogućuje korisniku da izbjegne čekanje nastalo time što je poslužitelj jedini validator korisnikova unosa.
Recimo da imamo ulaz s atributom type="name"i učinimo ga obaveznim ulazom koristeći requiredlogički atribut 1 :
Sada taj ulaz možemo oblikovati pomoću :requiredselektora pseudo klase:
/* style all elements with a required attribute */ :required ( background: red; )Također možemo oblikovati potrebna polja obrasca pomoću jednostavnih selektora, kao i ulančavanjem dodatnih selektora pseudo klase:
/* 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
Pogledajte Olovka: potreban styling Chris Coyier (@chriscoyier) na CodePenu.
Točke interesa
requiredAtribut se tretira kao boolean što znači da ne zahtijeva vrijednost. Jednostavno posjedovanje requiredelementa daje pregledniku da zna da taj atribut postoji i da je odgovarajući unos u stvari potrebno polje. Iako, prema specifikaciji W3C, traženi atribut također radi s praznom vrijednošću ili vrijednošću s imenom atributa.
Potrebni atribut također traži da preglednik koristi izvorne dodatne opise poput poruke oblačića prikazane u demonstraciji.
Za one ulaze koji nisu stilizirani pomoću :required, autori također mogu prilagoditi nepotrebne elemente pomoću :optionalselektora pseudo klase zajedno s :invalidi :validkoji se aktiviraju kada su zadovoljeni zahtjevi podataka polja obrasca.
Provjera obrasca također se može pohvaliti zajedno requireds patternatributom radi lakšeg filtriranja podataka ovisno o typeatributu unosa . Obrasci se mogu zapisati kao regularni izraz ili niz. U donjem primjeru koristimo regularni izraz za podudaranje sintakse adrese e-pošte.
:requiredAtribut radi na radio gumba. Ako na jedan radijski gumb stavite potreban (ili sve), bit će potrebna ta određena skupina radio gumba. Na potvrdnim okvirima postavlja svaki pojedinačni potvrdni okvir obaveznim (koji će se označiti).
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Booleovi atributi : Brojni atributi u HTML5 su logički atributi. Prisutnost logičkog atributa na elementu predstavlja pravu vrijednost, a odsutnost atributa predstavlja lažnu vrijednost. Ako je atribut prisutan, njegova vrijednost mora biti prazan niz ili vrijednost koja ne podrazumijeva velika i mala slova za kanonsko ime atributa, bez razmaka na početku ili na kraju.