Kurs HTML

Wprowadzenie: Stylizowanie dynamicznych stanów formularzy

Formularze HTML są interaktywne, a ich elementy (pola input, przyciski, listy wyboru) mogą znajdować się w różnych stanach (włączony, wyłączony, zaznaczony, wymagany, poprawny, niepoprawny itp.). CSS dostarcza specjalnych pseudoklas, które pozwalają **stylizować elementy formularzy w zależności od ich aktualnego stanu**.

Umożliwia to tworzenie bardziej intuicyjnych i responsywnych interfejsów użytkownika, dając wizualną informację zwrotną o stanie formularza i jego pól.

Stany włączenia/wyłączenia: :enabled i :disabled

• :enabled: Wybiera elementy interfejsu użytkownika (głównie elementy formularzy jak input, button, select, textarea), które są **włączone** (domyślny stan, użytkownik może z nimi interagować).
• :disabled: Wybiera elementy interfejsu użytkownika, które są **wyłączone** (mają ustawiony atrybut disabled). Użytkownik nie może z nimi interagować.

<input type="text" placeholder="Włączone pole">
<input type="text" placeholder="Wyłączone pole" disabled>
<button>Włączony przycisk</button>
<button disabled>Wyłączony przycisk</button>Kopiuj

/* Styl dla włączonych pól i przycisków */
input:enabled, button:enabled {
  border: 1px solid green;
}

/* Styl dla wyłączonych pól i przycisków */
input:disabled, button:disabled {
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed; /* Zmień kursor na "niedozwolony" */
}
Kopiuj

Stylizowanie stanu :disabled jest ważne, aby wizualnie zakomunikować użytkownikowi, że dany element jest nieaktywny.

Stan zaznaczenia: :checked

Pseudoklasa :checked wybiera elementy typu radio (input type="radio"), checkbox (input type="checkbox") lub opcje na liście wyboru (option wewnątrz select), które są aktualnie **zaznaczone** lub wybrane.

<input type="checkbox" id="cb1"> <label for="cb1">Opcja 1</label><br>
<input type="checkbox" id="cb2" checked> <label for="cb2">Opcja 2 (domyślnie zaznaczona)</label><br>

<input type="radio" name="rad" id="r1"> <label for="r1">Radio 1</label><br>
<input type="radio" name="rad" id="r2"> <label for="r2">Radio 2</label>Kopiuj

/* Styl dla zaznaczonych checkboxów i radio */
input:checked {
  box-shadow: 0 0 5px blue; /* Dodaj niebieską poświatę */
}

/* Można też stylizować etykietę powiązaną z zaznaczonym polem */
/* (używając selektora sąsiadującego + lub ogólnego ~) */
input:checked + label {
  color: blue;
  font-weight: bold;
}
Kopiuj

Pseudoklasa :checked jest często wykorzystywana w połączeniu z selektorami rodzeństwa (+ lub ~) do tworzenia tzw. "CSS-only" interakcji, np. pokazywania/ukrywania elementów po zaznaczeniu checkboxa (tzw. "checkbox hack").

Stany walidacji: :required, :optional, :valid, :invalid

Te pseudoklasy odnoszą się do wbudowanych mechanizmów walidacji formularzy HTML5:

• :required: Wybiera elementy formularza (input, select, textarea), które mają ustawiony atrybut required.
• :optional: Wybiera elementy formularza, które **nie** mają atrybutu required (są opcjonalne).
• :valid: Wybiera elementy formularza (głównie input), których aktualna wartość jest **zgodna** z ich regułami walidacji (np. poprawny email w input type="email", liczba w wymaganym zakresie w input type="number").
• :invalid: Wybiera elementy formularza, których aktualna wartość jest **niezgodna** z ich regułami walidacji.

<label for="email">Email (wymagany):</label>
<input type="email" id="email" required>

<label for="phone">Telefon (opcjonalny):</label>
<input type="tel" id="phone">

<label for="age">Wiek (18-99):</label>
<input type="number" id="age" min="18" max="99" required>Kopiuj

/* Oznacz wizualnie pola wymagane */
input:required {
  border-left: 3px solid orange;
}

/* Oznacz wizualnie pola opcjonalne */
input:optional {
  border-left: 3px solid lightgray;
}

/* Styl dla pól z poprawną wartością (po interakcji użytkownika) */
input:valid {
  border-color: green;
}

/* Styl dla pól z niepoprawną wartością (po interakcji użytkownika) */
input:invalid {
  border-color: red;
  background-color: #ffeeee;
}
Kopiuj

Przeglądarki zazwyczaj stosują style :valid/:invalid dopiero po interakcji użytkownika z polem (np. po wpisaniu czegoś i opuszczeniu pola), aby nie oznaczać pustych wymaganych pól jako niepoprawne od razu.

Stany zakresu: :in-range i :out-of-range

Te pseudoklasy dotyczą elementów input, które mają zdefiniowany zakres wartości za pomocą atrybutów min i max (np. input type="number", input type="range", input type="date").

• :in-range: Wybiera element, którego aktualna wartość mieści się w dozwolonym zakresie (min <= wartość <= max).
• :out-of-range: Wybiera element, którego aktualna wartość wykracza poza dozwolony zakres.

<label for="quantity">Ilość (1-10):</label>
<input type="number" id="quantity" min="1" max="10" value="5">Kopiuj

/* Styl dla wartości w zakresie */
input:in-range {
  outline: 2px solid lightgreen;
}

/* Styl dla wartości poza zakresem */
input:out-of-range {
  outline: 2px solid lightcoral;
  background-color: #ffeeee;
}
Kopiuj