Podstawowy formularz

Przykład formularza rezerwacji:

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

    <label for="telefon">Telefon:</label>
    <input type="text" id="telefon" name="telefon">

    <button type="submit">Rezerwuj</button>
</form>

Najważniejsze elementy to znacznik <form> oraz pola znajdujące się wewnątrz formularza.

Znacznik <form>

Formularz rozpoczynamy znacznikiem <form> i kończymy </form>. Najczęściej używane atrybuty to:

<form action="dodaj.php" method="post">

action określa, dokąd zostaną wysłane dane. method określa sposób ich przesłania.

Atrybut action

<form action="dodaj.php" method="post">

Po kliknięciu przycisku formularz zostanie wysłany do pliku dodaj.php. W tym pliku PHP można odebrać dane i zapisać je do bazy, na przykład:

$imie = $_POST['imie'];

Formularz może również zostać wysłany do tej samej strony. Jeśli action nie zostanie podany, dane są wysyłane do aktualnego adresu strony:

<form method="post">

Na egzaminie, jeżeli arkusz wskazuje konkretny plik (np. „Formularz przesyła dane do skryptu rezerwacja.php”), należy zastosować:

<form action="rezerwacja.php" method="post">

GET czy POST?

Dwie najważniejsze metody formularza to GET i POST.

Metoda GET

<form action="szukaj.php" method="get">
    <input type="text" name="fraza">
    <button type="submit">Szukaj</button>
</form>

Jeżeli użytkownik wpisze Kołobrzeg, adres może wyglądać tak:

szukaj.php?fraza=Ko%C5%82obrzeg

Dane są więc widoczne w adresie URL. GET dobrze nadaje się między innymi do: wyszukiwania, filtrowania, sortowania, parametrów strony oraz danych, których umieszczenie w adresie nie stanowi problemu.

W PHP dane odbieramy przez $_GET['fraza'].

Metoda POST

<form action="dodaj.php" method="post">
    <input type="text" name="imie">
    <button type="submit">Dodaj</button>
</form>

W PHP dane odbieramy: $_POST['imie'].

POST najczęściej stosujemy do operacji takich jak: dodawanie rekordu, edycja danych, logowanie, rejestracja, przesyłanie większej ilości danych. Dane nie są dopisywane do adresu URL tak jak przy GET.

Ważne: POST nie szyfruje danych. Za szyfrowanie komunikacji odpowiada HTTPS. POST nie jest „obowiązkowy tylko dlatego, że dane trafiają do bazy” — to najlepsza i najczęstsza metoda dla operacji, które zmieniają stan aplikacji.

GET i POST — porównanie

Cecha	GET	POST
Dane widoczne w URL	Tak	Nie
Typowe zastosowanie	wyszukiwanie, filtrowanie	zapis, edycja, logowanie
PHP	`$_GET`	`$_POST`
Można zapisać adres z parametrami	Tak	Nie w taki sam sposób
Hasła	Nie zalecane	Tak, ale przez HTTPS

Najprostsza zasada na INF.03: GET — pobieranie lub wyszukiwanie. POST — wysyłanie danych, szczególnie gdy zmieniają stan aplikacji.

Przepływ danych: HTML → PHP → baza

Przy każdym temacie, gdzie HTML łączy się z PHP i SQL, trzymaj w głowie ten łańcuch:

input name="usluga_id"
    ↓
$_POST['usluga_id']
    ↓
INSERT INTO rezerwacje (..., usluga_id) VALUES (..., ?)

Nazwa w HTML musi być dokładnie taka sama jak klucz w PHP — i zwykle odpowiada kolumnie (lub jej odpowiednikowi) w bazie.

Najważniejszy atrybut pola: name

<input type="text" id="imie" name="imie">

Atrybut name="imie" jest bardzo ważny. To właśnie name określa nazwę przesyłanej wartości. PHP może później odczytać $_POST['imie'].

Jeżeli formularz ma <input type="text" id="imie">, ale nie ma name="imie", wartość tego pola nie zostanie standardowo przesłana jako element danych formularza.

id a name

<input type="text" id="imie" name="imie">

id identyfikuje element na stronie. Można go wykorzystać np. w <label for="imie">, w CSS (#imie) albo w JavaScript (document.getElementById("imie")).

Natomiast name jest nazwą pola wysyłanego przez formularz.

Zapamiętaj: id — element na stronie. name — dane formularza.

Label

<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">

Wartość for="imie" odpowiada id="imie". Dzięki temu kliknięcie w napis „Imię” aktywuje odpowiednie pole. Jest to również ważne dla dostępności strony.

Pole tekstowe

<input type="text" name="imie">

Można stosować dodatkowe atrybuty:

<input type="text" name="imie" maxlength="50" required>

maxlength="50" ogranicza długość tekstu. required wymaga wypełnienia pola przed wysłaniem formularza.

Pole email

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

Przeglądarka może wykonać podstawową kontrolę poprawności adresu e-mail.

Pole number

<input type="number" name="wiek" min="18" max="100">

Uwaga: numer telefonu zazwyczaj lepiej przechowywać jako tekst — type="tel" albo type="text". Numer telefonu nie jest liczbą matematyczną i może zawierać +48, spacje oraz zera na początku.

Pole date

<label for="termin">Termin:</label>
<input type="date" id="termin" name="termin">

Pole password

<input type="password" name="haslo">

Wpisywane znaki są wizualnie ukrywane. Nie oznacza to jednak szyfrowania hasła. W rzeczywistej aplikacji hasła powinny być przesyłane przez HTTPS i odpowiednio hashowane po stronie serwera.

Lista rozwijana <select>

<label for="usluga">Usługa:</label>
<select id="usluga" name="usluga_id">
    <option value="1">Strzyżenie</option>
    <option value="2">Koloryzacja</option>
    <option value="3">Modelowanie</option>
</select>

Najważniejsze jest rozróżnienie value i tekstu opcji. W <option value="2">Koloryzacja</option> użytkownik widzi „Koloryzacja”, ale formularz przesyła 2.

value jako ID z bazy danych

Załóżmy, że tabela uslugi wygląda tak:

id	nazwa
1	Strzyżenie
2	Koloryzacja
3	Modelowanie

Po wybraniu „Koloryzacja” do PHP trafia usluga_id = 2. To bardzo wygodne, gdy usluga_id jest kluczem obcym w bazie danych.

Textarea

<label for="uwagi">Uwagi:</label>
<textarea id="uwagi" name="uwagi" rows="5" cols="40"></textarea>

textarea nie ma atrybutu value używanego tak jak w input. Treść początkową wpisuje się między znacznikami: <textarea name="uwagi">Domyślny tekst</textarea>.

Radio

<input type="radio" name="platnosc" value="karta"> Karta
<input type="radio" name="platnosc" value="gotowka"> Gotówka

Oba pola mają name="platnosc" — dzięki temu należą do jednej grupy. Można zaznaczyć tylko jedną opcję.

Checkbox

<label>
    <input type="checkbox" name="zgoda" value="1">
    Akceptuję regulamin
</label>

Kilka checkboxów może być zaznaczonych jednocześnie.

Najprościej: radio = wybierz jedną, checkbox = zaznacz zero, jedną lub kilka.

Pole hidden

<input type="hidden" name="id" value="15">

Pole ukryte nie jest widoczne dla użytkownika, ale jego wartość może zostać wysłana z formularzem. Bardzo często wykorzystuje się je podczas edycji rekordu:

<form action="edytuj.php" method="post">
    <input type="hidden" name="id" value="15">
    <input type="text" name="imie" value="Anna">
    <button type="submit">Zapisz zmiany</button>
</form>

PHP otrzyma między innymi $_POST['id'].

Przycisk submit

<button type="submit">Wyślij</button>

Można również zastosować <input type="submit" value="Wyślij">. Natomiast <button type="button">Wyślij</button> sam z siebie nie wysyła formularza — type="button" wykorzystuje się zwykle w połączeniu z JavaScript.

Walidacja HTML5

<input type="text" name="imie" required>
<input type="text" name="login" minlength="4">
<input type="text" name="kod" maxlength="6">
<input type="number" name="liczba" min="1" max="10">

Jeżeli w poleceniu egzaminacyjnym zapisano: „Sprawdzenie danych należy wykonać za pomocą skryptu JavaScript”, samo required nie realizuje całego polecenia. Musisz również wykonać wymaganą kontrolę w JavaScript. Czytaj dokładnie, w jaki sposób arkusz każe wykonać walidację.

Kompletny przykład formularza

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

    <label for="telefon">Telefon:</label>
    <input type="tel" id="telefon" name="telefon">

    <label for="usluga">Usługa:</label>
    <select id="usluga" name="usluga_id">
        <option value="1">Strzyżenie</option>
        <option value="2">Koloryzacja</option>
        <option value="3">Modelowanie</option>
    </select>

    <label for="termin">Termin:</label>
    <input type="date" id="termin" name="termin">

    <label for="uwagi">Uwagi:</label>
    <textarea id="uwagi" name="uwagi" rows="4"></textarea>

    <button type="submit">Rezerwuj</button>
</form>

Co otrzyma PHP?

Jeżeli użytkownik wpisze: Imię Anna, Telefon 500600700, Usługa Koloryzacja, Termin 2026-09-10, Uwagi „Proszę o kontakt”, PHP może otrzymać:

$_POST['imie']      → Anna
$_POST['telefon']   → 500600700
$_POST['usluga_id'] → 2
$_POST['termin']    → 2026-09-10
$_POST['uwagi']     → Proszę o kontakt

Najczęstsze błędy

Brak name

<!-- źle -->
<input type="text" id="imie">

<!-- dobrze -->
<input type="text" id="imie" name="imie">

Różne nazwy (wielkość liter)

HTML: name="telefon", a PHP: $_POST['Telefon'] — to nie jest ta sama nazwa. Poprawnie: $_POST['telefon'].

GET zamiast POST (lub odwrotnie)

Formularz z method="get", a PHP czyta $_POST['imie'] — wartość nie zostanie znaleziona. Metoda formularza i sposób odbioru danych muszą do siebie pasować.

Zadanie praktyczne

Utwórz formularz zapisów na kurs. Formularz ma zawierać:

pole tekstowe imie,
pole typu email o nazwie email,
listę select o nazwie kurs_id,
trzy opcje: 1 — HTML i CSS, 2 — JavaScript, 3 — PHP i MySQL,
pole textarea o nazwie uwagi,
checkbox potwierdzający zgodę,
przycisk Zapisz,
metodę POST,
wysłanie danych do zapisz.php.

Sprawdź, czy każde pole, którego wartość ma trafić do PHP, posiada odpowiedni atrybut name.

Najważniejsze przed egzaminem

<form action="dodaj.php" method="post">
    <input type="text" name="imie">
    <button type="submit">Wyślij</button>
</form>

oraz:

$_POST['imie']

Najważniejszy związek to: name pola HTML → klucz tablicy $_POST lub $_GET w PHP.

Ten materiał jest w płatnej części kursu