Formularze HTML — pola, etykiety, przyciski

Po co się tego uczymy?

To jest most między tym, co widzi i wpisuje użytkownik, a tym, co za chwilę odbierze i zapisze do bazy danych PHP (Lekcja 7 i 10 działu Aplikacje internetowe PHP). Bez dobrze zbudowanego formularza żaden serwis z rejestracją, logowaniem czy koszykiem nie może istnieć.

Teoria

Formularz to NAJWAŻNIEJSZY element HTML z punktu widzenia tego przygotowania do egzaminu — to właśnie przez formularz użytkownik przekazuje dane do serwera (a stamtąd, w dziale PHP, trafiają do bazy danych).

<form> opakowuje cały formularz. Kluczowe atrybuty: action (dokąd wysłać dane — adres pliku PHP) i method (jak wysłać — GET lub POST, dokładnie omówione w Lekcji 7 działu PHP).

<input> to najczęstsze pole formularza — jego typ (type) decyduje, jak się zachowuje: text (zwykły tekst), email, password (ukryte znaki), number, date, checkbox (zaznacz/odznacz), radio (wybór jednej opcji z grupy).

Najważniejszy atrybut każdego pola to name — to właśnie ta nazwa stanie się kluczem w tablicy $_POST lub $_GET w PHP (Lekcja 7 działu PHP). Bez atrybutu name dane z pola w ogóle nie zostaną wysłane.

<label> opisuje pole — połączenie for="id-pola" z id="id-pola" na polu sprawia, że kliknięcie w etykietę aktywuje pole (ważne dla dostępności).

<select>+<option> to lista rozwijana, <textarea> to wieloliniowe pole tekstowe, <button type="submit"> wysyła formularz.

Schemat

<form>
  ┌─────────────────────────────┐
  │ Imię:     [___________]     │  <input name="imie">
  │ E-mail:   [___________]     │  <input name="email" type="email">
  │ Hasło:    [***********]     │  <input name="haslo" type="password">
  │ Data ur.: [__/__/____]      │  <input name="data_ur" type="date">
  │ [ ] Akceptuję regulamin     │  <input name="zgoda" type="checkbox">
  │        [ Zarejestruj się ]  │  <button type="submit">
  └─────────────────────────────┘
</form>

Przykład z życia

Każdy formularz rejestracyjny, logowania czy wyszukiwarka, z jakiej korzystasz na co dzień, to właśnie taki zestaw znaczników <input> wewnątrz <form> — różni się tylko stylowaniem (CSS) i tym, co dzieje się z danymi po stronie serwera.

Kod (HTML)

<form action="rejestracja.php" method="POST">
    <label for="imie">Imię:</label>
    <input type="text" id="imie" name="imie" required>

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>

    <label for="haslo">Hasło:</label>
    <input type="password" id="haslo" name="haslo" required>

    <label for="data_ur">Data urodzenia:</label>
    <input type="date" id="data_ur" name="data_urodzenia">

    <label for="gatunek">Ulubiony gatunek filmowy:</label>
    <select id="gatunek" name="gatunek">
        <option value="akcja">Akcja</option>
        <option value="komedia">Komedia</option>
        <option value="dramat">Dramat</option>
    </select>

    <label>
        <input type="checkbox" name="zgoda" value="tak" required>
        Akceptuję regulamin serwisu
    </label>

    <button type="submit">Zarejestruj się</button>
</form>

Komentarz i wyjaśnienie kodu

Zapamiętaj atrybuty name z tego formularza: imie, email, haslo, data_urodzenia, gatunek, zgoda — dokładnie pod takimi kluczami w Lekcji 7 działu PHP odbierzesz te dane jako $_POST["imie"], $_POST["email"] itd. Atrybut required to prosta walidacja HTML5 (pełniej omówiona w Lekcji 4) — przeglądarka nie pozwoli wysłać formularza bez wypełnienia tego pola.

Ćwiczenie samodzielne

Zbuduj formularz logowania z dwoma polami (e-mail, hasło) i przyciskiem "Zaloguj się".

Zadania do pracy własnej

Dodaj do formularza z tej lekcji pole tel (numer telefonu) z odpowiednim type.
Zbuduj formularz kontaktowy z polami: imię, e-mail, temat (select z 3 opcjami) i wiadomość (<textarea>).
Zbuduj kompletny formularz dodawania nowego filmu do katalogu (tytuł, rok produkcji jako number, gatunek jako select, cena wypożyczenia jako number z step="0.01") — to dokładnie te pola, które w Lekcji 10 działu PHP zapiszesz do bazy przez INSERT.

Typowe błędy

Najczęstszy i najpoważniejszy błąd to zapomnienie atrybutu name w polu — takie pole WYGLĄDA normalnie, ale jego wartość nigdy nie dotrze do serwera. Drugi błąd: pomylenie id z name — id służy do łączenia z <label for="..."> i do CSS/JavaScript, a name do wysyłki danych — to dwie różne role. Trzeci: brak atrybutu method w <form> (domyślnie GET, co przy haśle jest niebezpieczne — hasło wyląduje w adresie URL).

Nawiązanie do egzaminu zawodowego

To bezpośrednia realizacja efektu INF.03.5.3.4 z podstawy programowej: "definiuje skrypty obsługujące formularze i kontrolki HTML" — a konkretnie jego fundamentu, bo zanim cokolwiek zaprogramujesz w JS czy PHP, formularz musi być poprawnie zbudowany w HTML.