Selektory#
Pseudokalsa wymagalności#
:required { /* deklaracje */ }Pseudoklasa :required reprezentuje elementy interfejsu użytkownika (wejścia), dla których podanie wartości jest konieczne, w odniesieniu do wymagalności, jak określono w języku dokumentu. W sytuacji kiedy wymagalność w ogóle nie ma zastosowania do elementu, to nie należy on ani do :required ani do :optional.
Najnowszy HTML5 podaje listę elementów spełniających wymagalność, które będą pasowały do pseudoklasy :required. Ogólnie rzecz biorąc dotyczy to elementów, które mogą posiadać logiczny atrybut required i został on wprowadzony. Warto przypomnieć, że kontrolki z atrybutem required można w podobny sposób wybrać za pomocą selektorów atrybutów.
Wprowadzenie obowiązkowej wartości nie spowoduje, że style nadane przez pseudoklasę :required zostaną anulowane. Wymagalność jest cechą stałą, która nie ulega zatraceniu, no chyba że dynamicznie zmodyfikujemy kod. Ma ona informować użytkownika, że wypełnienie danego pola formularza jest obowiązkowe, w przeciwnym razie formularz nie zostanie w ogóle wysłany. Aplikacje klienckie mogą informować użytkownika (np. za pomocą tekstu w chmurce) o konieczności wypełnienia jakiegoś elementu po nieudanej próbie wysłania formularza; najczęściej dotyczy to pierwszego takiego elementu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:optional {outline: 5px solid green; border: 5px solid green;}
:required {outline: 5px solid red; border: 5px solid red;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Konto e-mail</legend>
<p><label>Adres: <input type="email" required="required" placeholder="jan@example.net"></label></p>
<p><label>Hasło: <input type="password" required="required"></label></p>
<p><label>Imię: <input type="text" placeholder="Jan Kowalski"></label></p>
<p><label>Wiek: <input type="number" placeholder="18"></label></p>
<p>
<label><input type="radio" name="plec" value="f">Kobieta</label>
<label><input type="radio" name="plec" value="m">Mężczyzna</label>
</p>
<p><input type="submit" value="Utwórz konto"><input type="reset" value="Resetuj"></p>
</fieldset>
</form>
</body>
</html>