INF.03 · HTML i CSS

Formularze HTML — pola, etykiety, przyciski

Formularz zbiera konkretne dane.

  • Przewidź efekt
  • Zmień i sprawdź
  • Zbuduj samodzielnie

Po tej lekcji: Połączysz etykiety z kontrolkami i sprawdzisz, które pola trafią do danych formularza.

Zrozum, zanim zapiszesz

label for="email" łączy opis z kontrolką o id="email". Kliknięcie etykiety przenosi fokus do pola. id identyfikuje element w dokumencie, a name jest kluczem danych przekazywanych z formularza. Pole bez name nie zostanie uwzględnione.

select zawiera option; textarea służy do dłuższej wypowiedzi. Radio należące do jednego wyboru mają ten sam name i różne value. Checkbox trafia do danych tylko po zaznaczeniu; kontrolka disabled nie jest wysyłana. fieldset i legend grupują powiązane pytania. Wpisz jawne type="submit" albo type="button".

GET zwykle przekazuje parametry w adresie, POST w treści żądania. POST sam nie szyfruje danych — do transmisji potrzebujesz HTTPS. HTML nie zapisuje rezerwacji w bazie: do tego potrzebny będzie program po stronie serwera. W modelu używamy wyłącznie danych fikcyjnych.

Dobierz typ: text — zwykły tekst, email — adres, password — maskowany tekst (bez szyfrowania), number — liczba, date — data, tel — numer telefonu bez automatycznej kontroli formatu. Plik wybierasz przez type="file"; wysyłanie plików wymaga method="post" i enctype="multipart/form-data", a serwer nadal musi sprawdzić typ i rozmiar. Placeholder jest podpowiedzią, nie zastępuje label.

Przykład do odtworzenia

index.htmlhtml
<!-- Podgląd bez obsługi serwera. Zapis nastąpi dopiero w lekcjach PHP. -->
<form action="rezerwacja.php" method="post">
  <label for="imie">Imię</label>
  <input id="imie" name="imie" autocomplete="given-name">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email">
  <label for="seans">Seans</label>
  <select id="seans" name="seans">
    <option value="podroz">Podróż — 16:00</option>
    <option value="kosmos">Kosmos — 18:00</option>
  </select>
  <fieldset><legend>Miejsce</legend>
    <label><input type="radio" name="miejsce" value="przod"> Z przodu</label>
    <label><input type="radio" name="miejsce" value="tyl"> Z tyłu</label>
  </fieldset>
  <label for="uwagi">Uwagi</label>
  <textarea id="uwagi" name="uwagi" rows="3"></textarea>
  <button type="submit">Rezerwuj</button>
</form>

Sprawdź w działaniu

Co formularz naprawdę przekazuje?

Wyłącz name, zaznacz zgodę i wybierz seans. Podgląd pokaże rzeczywiste pary name=value, bez wysyłania danych.

Ta interakcja wymaga włączonego JavaScriptu.

Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

Zbuduj formularz zapisu do koła filmowego: etykietowane imię i email, select z trzema seansami, textarea na uwagi, dwa przyciski radio z nazwą miejsca oraz przycisk submit. Każdej kontrolce nadaj name. Na razie sprawdź strukturę i obsługę klawiaturą; nie twórz pozornego potwierdzenia zapisu.

Oczekiwany rezultat
Kliknięcie etykiety aktywuje właściwe pole. W jednej grupie radio da się wybrać tylko jedną opcję.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Każda etykieta for wskazuje istniejące i unikalne id.

Krok 2 — pokaż podpowiedź

Radio mają jednakowy name, np. miejsce, i różne value.

Krok 3 — pokaż podpowiedź

Przejdź cały formularz klawiszem Tab; sprawdź, czy opis pól jest zrozumiały.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Sprawdź, zanim oddasz

Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.

Podsumowanie

Co warto zapamiętać

  1. Połączysz etykiety z kontrolkami i sprawdzisz, które pola trafią do danych formularza.
  2. Potrafisz wskazać w kodzie przyczynę widocznego efektu.
  3. Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka