Rodzaje pól — HTML

HTML ma różne typy pól formularza dopasowane do rodzaju danych.

Jak to działa?

type="email" ułatwia wpisywanie adresu, type="number" obsługuje liczby, type="checkbox" wybór tak/nie, a select listę opcji. Walidacja po stronie przeglądarki nie zastępuje walidacji serwera.

Przykład 1 — poznaj zapis

<label for="level">Poziom</label>
<select id="level" name="level">
  <option value="beginner">Początkujący</option>
  <option value="advanced">Zaawansowany</option>
</select>

Wysłana zostanie wartość atrybutu value wybranej opcji.

Przeczytaj kod linijka po linijce

<label for="level">Poziom</label>Ten znacznik określa element lub strukturę dokumentu.
<select id="level" name="level">Ten znacznik określa element lub strukturę dokumentu.
<option value="beginner">Początkujący</option>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Lista wyboru poziomu z opcjami Początkujący i Zaawansowany.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<input type="date" aria-label="Data urodzenia">

Wynik drugiego przykładupo uruchomieniu przykładu

Pole wyboru daty.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj checkbox potwierdzający akceptację regulaminu.