Selektory#
Pseudokalsa błędu użytkownika#
:user-error { /* deklaracje */ }Pseudoklasa :user-error reprezentuje elementy interfejsu użytkownika (wejścia), które mają błędną treść lub wartość, ale dopiero po oddziaływaniu użytkownika na te elementy.
Pseudoklasa błędu użytkownika musi pasować do elementu formularza wybieranego przez :invalid, :out-of-ranged lub :required (ale bez wartości), w chwili kiedy użytkownik próbował przesłać formularz i przed ponowną próbą interakcji z elementem formularza. Aplikacje klienckie mogą wybierać tego rodzaju elementy w innych momentach, tak aby stosownie wyeksponować pomyłki użytkownika. Dla przykładu, aplikacja kliencka może zastosować pseudoklasę :user-error do elementu wybieranego przez :invalid w chwili, kiedy użytkownik wprowadził jakiś tekst i zmienił zogniskowanie na inny element, i anulować ją dopiero po prawidłowym wprowadzeniu wartości.
Rzućmy okiem na poniższą (teoretyczną) strukturę znacznikową:
<form>
<label>
Volume:
<input name="vol" type="number" min="0" max="10" value="11">
</label>
...
</form>Element input będzie wybierany przez pseudoklasę :invalid tak szybko, jak strona zostanie wczytana (ponieważ wartość początkowa przekracza dopuszczalne maksimum), ale z pominięciem pseudoklasy :user-error, no chyba że użytkownik zacznie oddziaływać na element lub spróbuje wysłać formularz, który jest właścicielem tego elementu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:user-error {outline: 5px solid green; border: 5px solid green;}
</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" max="100" value="150"></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>Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :user-error. Z drugiej strony wydaje się, że przeglądarki samoczynnie nadają formatowanie błędnym elementom, ale bez możliwości uniwersalnej zmiany w każdym programie. W przypadku Firefoksa odbywa się to za pomocą pseudoklasy :-moz-ui-invalid, której działanie bardzo przypomina pseudoklasę :user-error.