:requiredSelektor pseudo klasy w CSS pozwala autorom wybrać i styl dowolny pasujący element z requiredatrybutem. Formularze mogą łatwo wskazywać, które pola muszą zawierać prawidłowe dane, zanim formularz zostanie przesłany, ale pozwala użytkownikowi uniknąć czekania związanego z tym, że serwer jest jedynym weryfikatorem danych wejściowych użytkownika.
Powiedzmy, że mamy dane wejściowe z atrybutem type="name"i ustawiamy je jako wymagane za pomocą requiredatrybutu boolowskiego 1 :
Teraz możemy stylizować to wejście za pomocą :requiredpseudo selektora klasy:
/* style all elements with a required attribute */ :required ( background: red; )Możemy również stylizować wymagane pola formularza za pomocą prostych selektorów, a także łączyć ze sobą dodatkowe selektory pseudoklas:
/* 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; )Próbny
See the Pen: required Styling by Chris Coyier (@chriscoyier) na CodePen.
Użyteczne miejsca
requiredAtrybut jest traktowana jako wartość logiczną co oznacza, że nie wymaga wartości. Wystarczy mieć requiredna elemencie, aby przeglądarka wiedziała, że ten atrybut istnieje, a odpowiednie dane wejściowe są w rzeczywistości wymaganym polem. Chociaż, zgodnie ze specyfikacją W3C, wymagany atrybut działa również z pustą wartością lub wartością o nazwie atrybutu.
Wymagany atrybut wymaga również, aby przeglądarka używała natywnych objaśnień, takich jak komunikat bąbelkowy przedstawiony w wersji demonstracyjnej.
W przypadku tych danych wejściowych, które nie są stylizowane przy użyciu :required, autorzy mogą również dostosowywać elementy niewymagane przy użyciu :optionalpseudo selektora klasy wraz z :invalidi, :validktóre są wyzwalane, gdy wymagania dotyczące danych pola formularza zostaną spełnione.
Walidacja formularza może być również uzupełniona requiredo patternatrybut, aby pomóc filtrować dane w zależności od typeatrybutu danych wejściowych . Wzorce można zapisać jako wyrażenie regularne lub ciąg. W poniższym przykładzie używamy wyrażenia regularnego, aby dopasować składnię adresu e-mail.
:requiredAtrybut działa na przyciski radiowe. Jeśli umieścisz wymagane na jednym przycisku opcji (lub wszystkich), ta konkretna grupa przycisków radiowych będzie wymagana. Na polach wyboru sprawia, że każde pole wyboru jest wymagane (do zaznaczenia).
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Atrybuty boolowskie : Wiele atrybutów w HTML5 to atrybuty boolowskie. Obecność atrybutu logicznego w elemencie reprezentuje wartość prawdziwą, a brak atrybutu reprezentuje wartość fałszywą. Jeśli atrybut jest obecny, jego wartością musi być pusty ciąg lub wartość, która jest dopasowaniem bez rozróżniania wielkości liter dla nazwy kanonicznej atrybutu, bez wiodących ani końcowych białych znaków.