Formularze HTML — gotowa lekcja i zadania praktyczne

Na tej lekcji uczniowie zbudują formularz zapisu na fikcyjne koło zainteresowań. Formularz zapyta o imię, adres e-mail, klasę, dzień spotkań i oczekiwania uczestnika, a przed wysłaniem sprawdzi, czy wymagane pola są wypełnione. Po kliknięciu przycisku uczeń zobaczy w pasku adresu, jakie dane przeglądarka przygotowała do wysłania.

Materiał jest przeznaczony na 45 minut dla uczniów, którzy znają już podstawową strukturę dokumentu HTML: head, body, nagłówki, akapity i listy. Jeśli klasa dopiero zaczyna, najpierw przeprowadź pierwszą lekcję HTML z ćwiczeniami. Nie potrzebujesz serwera, PHP ani JavaScriptu — wystarczą edytor kodu i przeglądarka.

Przygotowanie przed zajęciami

Rozpakuj pakiet z sekcji materiałów i skopiuj plik start.html na stanowiska, np. do folderu formularz-html. Plik zawiera gotowy szkielet strony i pierwsze pole formularza, dzięki czemu lekcja nie zaczyna się od przepisywania nagłówka dokumentu.

Sprawdź na jednym komputerze, czy po otwarciu pliku dwuklikiem przeglądarka pokazuje formularz, a po wysłaniu go adres kończy się fragmentem typu ?imie=Ola. Podgląd działa z dysku, bez internetu.

Ustal z klasą jedną zasadę: w ćwiczeniu wpisujemy wyłącznie dane zmyślone. Formularz nie wysyła niczego do internetu, ale nawyk nieużywania prawdziwych danych w projektach testowych warto budować od początku.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• połączyć etykietę z polem przez label for i id;
• dobrać typ pola do rodzaju danych: tekst, e-mail, lista wyboru, przycisk opcji, pole wyboru i dłuższy tekst;
• nadać polom atrybut name i wyjaśnić, jak wpływa on na wysyłane dane;
• użyć required oraz prostych ograniczeń długości i sprawdzić ich działanie.

Element form i pierwsze pole z etykietą

Otwórz start.html w edytorze i w przeglądarce. W body znajduje się taki fragment:

<h1>Zapisy na koło młodych programistów</h1>
<form action="" method="get">
  <p>
    <label for="imie">Imię</label>
    <input type="text" id="imie" name="imie" required minlength="2">
  </p>
  <p><button type="submit">Zapisz się</button></p>
</form>

Element form obejmuje wszystkie pola, które mają zostać wysłane razem. Atrybut action wskazuje adres odbiorcy. Pusty action oznacza bieżącą stronę, więc po wysłaniu przeglądarka po prostu ponownie otworzy ten sam plik. Metoda get dopisuje dane do adresu — dlatego na lekcji widać je w pasku przeglądarki. W prawdziwym formularzu z hasłem lub danymi osobowymi używa się metody post i połączenia HTTPS, a dane odbiera program na serwerze, np. w PHP.

label to podpis pola. Jego atrybut for musi mieć dokładnie tę samą wartość, co id pola. Dzięki temu kliknięcie napisu „Imię” ustawia kursor w polu, a czytnik ekranu odczytuje podpis razem z polem. Etykieta nie jest dekoracją: bez niej użytkownik czytnika usłyszy jedynie „pole edycji”.

Atrybut name decyduje o nazwie danej. Wpisz imię Ola i kliknij przycisk. Adres zmieni się na zakończony ?imie=Ola. Pole bez name nie zostanie wysłane, nawet jeśli coś w nim wpiszesz.

Teraz kliknij przycisk przy pustym polu. Przeglądarka zatrzyma wysyłanie i pokaże komunikat, bo pole ma atrybut required. Wpisz jedną literę — minlength="2" również zablokuje wysłanie. Treść i wygląd komunikatu zależą od przeglądarki.

Pozostałe typy pól na przykładzie zapisu

Poniżej są wzory pól, z których uczniowie skorzystają w zadaniach. Nie trzeba ich wklejać wszystkich naraz — wystarczy pokazać różnice na projektorze.

<label for="email">Adres e-mail</label>
<input type="email" id="email" name="email" required>

<label for="klasa">Klasa</label>
<select id="klasa" name="klasa">
  <option value="1">pierwsza</option>
  <option value="2">druga</option>
</select>

<input type="radio" id="wtorek" name="dzien" value="wtorek">
<label for="wtorek">wtorek</label>

<input type="checkbox" id="zgoda" name="zgoda" value="tak">
<label for="zgoda">Akceptuję zasady koła</label>

<label for="cel">Czego chcesz się nauczyć?</label>
<textarea id="cel" name="cel" rows="4" maxlength="200"></textarea>

• type="email" sprawdza, czy wpis przypomina adres e-mail, np. odrzuci ola.szkola. Nie sprawdza, czy taka skrzynka istnieje.
• W select wysyłana jest wartość value wybranej opcji, a nie widoczny napis. Dla opcji „pierwsza” adres otrzyma klasa=1.
• Przyciski radio z tym samym name tworzą jedną grupę: można zaznaczyć tylko jeden z nich. Różne id są potrzebne do etykiet.
• Niezaznaczony checkbox w ogóle nie trafia do wysłanych danych. Zaznaczony wysyła swoje value.
• textarea ma znacznik zamykający. Tekst wpisany między znacznikami byłby wartością początkową, więc zostawiamy go pustym.

Grupę przycisków opcji obejmujemy elementem fieldset, a jej wspólne pytanie zapisujemy w legend. Dzięki temu „wtorek” i „czwartek” są odczytywane jako odpowiedzi na pytanie „W który dzień możesz przychodzić?”.

Trzy zadania praktyczne

Zadanie 1. Kontakt i klasa. Pod polem imienia dodaj wymagane pole adresu e-mail oraz listę select z klasami od pierwszej do czwartej (wartości 1–4). Każde pole musi mieć etykietę połączoną przez for i id oraz własny name. Sprawdź, że formularz nie przyjmie adresu ola.szkola.

Zadanie 2. Dzień spotkań i oczekiwania. Dodaj fieldset z legendą „W który dzień możesz przychodzić?” i dwa przyciski opcji: wtorek oraz czwartek. Grupa ma być wymagana — wystarczy atrybut required przy jednym z przycisków o wspólnym name. Następnie dodaj pole textarea „Czego chcesz się nauczyć?” z limitem 200 znaków.

Zadanie 3. Zgoda i test formularza. Przed przyciskiem dodaj wymagane pole wyboru „Akceptuję zasady koła” z wartością tak. Następnie przetestuj formularz trzy razy: puste pola, błędny adres e-mail, wszystkie dane poprawne. Po poprawnym wysłaniu przepisz z paska adresu nazwy wszystkich wysłanych danych i wskaż, z którego atrybutu pochodzi każda z nich.

Dla chętnych: dodaj pole liczbowe „Ile godzin tygodniowo możesz poświęcić?” z type="number", min="1" i max="5". Sprawdź, co się stanie po wpisaniu 7. Możesz też dodać autocomplete="email" do pola adresu.

Rozwiązanie zadań

Poniższy formularz realizuje trzy zadania podstawowe. Pełny dokument z nagłówkiem strony znajdziesz w pliku rozwiazanie.html w pakiecie.

<form action="" method="get">
  <p>
    <label for="imie">Imię</label>
    <input type="text" id="imie" name="imie" required minlength="2">
  </p>
  <p>
    <label for="email">Adres e-mail</label>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="klasa">Klasa</label>
    <select id="klasa" name="klasa">
      <option value="1">pierwsza</option>
      <option value="2">druga</option>
      <option value="3">trzecia</option>
      <option value="4">czwarta</option>
    </select>
  </p>
  <fieldset>
    <legend>W który dzień możesz przychodzić?</legend>
    <input type="radio" id="wtorek" name="dzien" value="wtorek" required>
    <label for="wtorek">wtorek</label>
    <input type="radio" id="czwartek" name="dzien" value="czwartek">
    <label for="czwartek">czwartek</label>
  </fieldset>
  <p>
    <label for="cel">Czego chcesz się nauczyć?</label><br>
    <textarea id="cel" name="cel" rows="4" cols="40" maxlength="200"></textarea>
  </p>
  <p>
    <input type="checkbox" id="zgoda" name="zgoda" value="tak" required>
    <label for="zgoda">Akceptuję zasady koła</label>
  </p>
  <p><button type="submit">Zapisz się</button></p>
</form>

Przykładowy wynik w pasku adresu dla danych testowych (Ola, adres ola@example.com, klasa druga, czwartek, pole oczekiwań puste):

?imie=Ola&email=ola%40example.com&klasa=2&dzien=czwartek&cel=&zgoda=tak

Na co zwrócić uwagę przy omawianiu:

• Znak @ pojawia się jako %40, a spacje w polu oczekiwań jako +. Przeglądarka koduje znaki specjalne w adresie; serwer odczyta je z powrotem jako zwykły tekst.
• Puste textarea zostaje wysłane jako cel=, natomiast niezaznaczony checkbox w ogóle by się nie pojawił. To właśnie dlatego zgoda ma required.
• Kolejność par w adresie odpowiada kolejności pól w formularzu, a nie kolejności ich wypełniania.
• Sprawdzanie w przeglądarce można łatwo obejść. Każdy program odbierający dane na serwerze musi sprawdzić je ponownie — ten temat wraca na lekcjach PHP.

Typowe błędy

Pytania kontrolne i punktacja

1. Do czego służą atrybuty id i name w polu formularza? Czym się różnią?
2. Dlaczego przyciski opcji „wtorek” i „czwartek” mają wspólne name, a różne id?
3. Czy atrybut required wystarczy, aby mieć pewność, że serwer dostanie poprawne dane?

Odpowiedzi: id identyfikuje element na stronie, np. dla etykiety; name nadaje nazwę wysyłanej danej. Wspólne name łączy przyciski w jedną grupę z jedną odpowiedzią, a różne id pozwalają przypisać każdemu własną etykietę. required nie wystarczy: sprawdzanie w przeglądarce można pominąć, więc serwer musi kontrolować dane samodzielnie.

Proponowana punktacja (razem 10 punktów): e-mail i lista klas z poprawnymi etykietami — 2 pkt; grupa radio w fieldset z legendą — 2 pkt; textarea z limitem — 1 pkt; wymagana zgoda i przycisk — 1 pkt; atrybuty name przy wszystkich polach — 1 pkt; trzy testy wykonane i opisane — 2 pkt; poprawne wskazanie, skąd pochodzą nazwy danych w adresie — 1 pkt. Zadanie dla chętnych nie jest wymagane do kompletu punktów.

Materiały do pobrania

• Pakiet HTML: plik startowy, rozwiązanie, instrukcja i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj
• Gotowy formularz — rozwiązanie do obejrzenia w przeglądarce

Pakiet nie wymaga logowania. Plik startowy zawiera szkielet strony i pole imienia, rozwiązanie — pełny formularz z trzech zadań. Klucz jest publiczny i służy nauce oraz samodzielnemu sprawdzeniu pracy, nie poufnemu sprawdzianowi.

Co dalej po formularzach?

Formularz z tej lekcji zbiera dane, ale ich nie zapisuje. Kolejnym krokiem jest nadanie mu wyglądu w CSS — zobacz lekcję CSS od podstaw — a następnie odebranie danych po stronie serwera, o czym opowiada PHP od podstaw. Cały dział o formularzach, tabelach, semantyce i dostępności znajdziesz w kursie HTML w TablicaPro.

Źródła techniczne: element form w MDN, element input i jego typy w MDN oraz opis formularzy w specyfikacji HTML.