Selektory#

Pseudokalsa opcjonalności#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:optional { /* deklaracje */ }

Pseudoklasa :optional reprezentuje elementy interfejsu użytkownika (wejścia), dla których podanie wartości jest opcjonalne, 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 :optional ani do :required.

Najnowszy HTML5 podaje listę elementów spełniających opcjonalność, które będą pasowały do pseudoklasy :optional. Ogólnie rzecz biorąc dotyczy to elementów, które mogą posiadać logiczny atrybut required, ale nie został on wprowadzony. Warto przypomnieć, że kontrolki bez atrybutu required można w podobny sposób wybrać za pomocą pseudoklasy negacji:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:not(:required)

Wprowadzenie opcjonalnej wartości nie spowoduje, że style nadane przez pseudoklasę :optional zostaną anulowane. Opcjonalność 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 nie jest obowiązkowe i nie blokuje wysłania formularza.

Prosty przykład:

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

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :optional prawidłowo. Nie wiedzieć czemu wybierane są wysyłające lub resetujące elementy input, dla których atrybut required w ogóle nie ma zastosowania.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa opcjonalności (H2) Specyfikacje i inne materiały (H3)