Formularze: Zbieranie danych

Gdyby strony WWW były tylko do czytania, Internet byłby dość nudny. Formularze pozwalają użytkownikowi wprowadzać dane, logować się, wysyłać wiadomości i zamawiać pizzę. Na egzaminie INF.03 obsługa formularzy (zapis w HTML, czytanie w JS lub PHP) to absolutne jądro punktacji.

Tag `<form>` i jego atrybuty

Wszystkie pola formularza muszą znajdować się wewnątrz <form>.

<form action="skrypt.php" method="POST">
    <!-- Tutaj będą inputy -->
</form>

action – Mówi, gdzie wysłać dane po wciśnięciu przycisku (np. do pliku skrypt.php). Jeśli wysyłasz dane do tego samego pliku lub obsługujesz je w JavaScript, zostawiasz to puste lub dajesz action="".
method – Metoda wysyłki. POST jest tajna (dane idą w tle, dobra dla haseł), a GET jest jawna (dane dopisują się do paska adresu URL, np. ?szukaj=buty). Na egzaminie zazwyczaj korzystamy z POST.

Typy `<input>`

Pole <input> to najbardziej elastyczny znacznik w HTML. Nie ma tagu zamykającego! Zmienia swoje oblicze w zależności od atrybutu type.

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

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

<input type="number" name="wiek" min="18" max="99">
<input type="date" name="data_urodzenia">

Ciekawostka: Element <label> jest niesamowicie ważny! Jeśli połączysz label z inputem za pomocą atrybutów for="identyfikator" oraz id="identyfikator", to kliknięcie w sam tekst etykiety aktywuje okienko. To mega przydatne na telefonach!

Pola jednokrotnego (Radio) i wielokrotnego (Checkbox) wyboru

CKE uwielbia testować zrozumienie przycisków typu "radio". Wybieramy płeć? Może być tylko jedna opcja!

<input type="radio" id="k" name="plec" value="K">
<label for="k">Kobieta</label>

<input type="radio" id="m" name="plec" value="M">
<label for="m">Mężczyzna</label>

Pułapka CKE 🪤: Zauważ, że oba pola radio mają dokładnie ten sam name="plec". Tylko dzięki temu przeglądarka wie, że należą do jednej grupy i pozwala zaznaczyć tylko jedną kropkę na raz. Jeśli dasz im różne name, użytkownik zaznaczy obie!

Checkboxy i Select

<input type="checkbox"> – Pozwala zaznaczyć wiele opcji (np. zgody marketingowe).
<select> – Rozwijana lista wyboru. Pamiętaj, by do środka wstawiać <option value="...">Opcja</option>.

Przycisk Submit

Na koniec potrzebujemy przycisku wysyłającego formularz: <input type="submit" value="Wyślij"> lub po prostu <button type="submit">Wyślij</button>.

Różnica między id a name:

id – używamy, żeby znaleźć pole w JavaScript (np. document.getElementById()) oraz do połączenia z <label>.
name – używamy, żeby odczytać dane z pola w PHP (np. $_POST['imie']). Zawsze nadawaj i to, i to!