Selektory#

Pseudokalsa błędu użytkownika#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
: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ą:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa błędu użytkownika (H2) Specyfikacje i inne materiały (H3)