Formularze i kontrolki standardowe – wprowadzenie

Wstęp teoretyczny

Czym są formularze? Formularz to element strony internetowej, który pozwala użytkownikowi wprowadzić dane i wysłać je do serwera. Dzięki formularzom możemy tworzyć interaktywne strony, np. logowania, rejestracji, ankiety, wyszukiwarki czy koszyki zakupowe.

Dlaczego opracowano formularze? Statyczne strony HTML mogły tylko wyświetlać treści, ale nie umożliwiały interakcji. Formularze wprowadzono, aby użytkownik mógł przekazywać dane do serwera, a serwer – np. przy użyciu PHP – mógł je przetwarzać i zwracać wynik.

Jak to działa?

  1. Użytkownik wprowadza dane w formularzu.
  2. Dane są przesyłane na serwer (metodą GET lub POST).
  3. Skrypt PHP odbiera dane i je przetwarza.
  4. Wynik jest odsyłany do przeglądarki.

Ciekawostki:

  • Formularze mogą przesyłać dane nie tylko do PHP, ale także do innych technologii, np. Python (Django, Flask), Node.js, Java (Spring).
  • HTML5 dodał wiele nowych kontrolek formularzy, np. email, date, color, range.
  • W praktyce większość nowoczesnych aplikacji internetowych korzysta z formularzy, często w połączeniu z JavaScriptem i bazami danych.

Podstawowe elementy formularza (HTML)

Formularz rozpoczynamy znacznikiem form i kończymy /form>.

Najważniejsze atrybuty:

  • action – wskazuje, do jakiego pliku (np. PHP) dane mają zostać wysłane,
  • method – określa sposób przesyłania danych (GET lub POST).

1. Formularz tekstowy

<form action="odbierz.php" method="post">
    Imię: <input type="text" name="imie"><br>
    <input type="submit" value="Wyślij">
</form>

2. Różne kontrolki

<form action="odbierz.php" method="post">
    Hasło: <input type="password" name="haslo"><br>
    Wiek: <input type="number" name="wiek"><br>
    Email: <input type="email" name="email"><br>
    Kolor ulubiony: <input type="color" name="kolor"><br>
    <input type="submit" value="Wyślij">
</form>

3. Kontrolki wyboru

<form action="odbierz.php" method="post">
    Płeć: 
    <input type="radio" name="plec" value="K"> Kobieta
    <input type="radio" name="plec" value="M"> Mężczyzna<br>

    Zainteresowania:<br>
    <input type="checkbox" name="hobby[]" value="sport"> Sport
    <input type="checkbox" name="hobby[]" value="muzyka"> Muzyka
    <input type="checkbox" name="hobby[]" value="informatyka"> Informatyka<br>

    <input type="submit" value="Wyślij">
</form>

Odbieranie danych w PHP

W pliku odbierz.php możemy odebrać dane w następujący sposób:

<?php
$imie = $_POST['imie']; 
$wiek = $_POST['wiek'];

echo "Twoje imię: $imie<br>";
echo "Twój wiek: $wiek<br>";
?>

Dane z formularza trafiają do tablicy superglobalnej:

  • $_GET – gdy formularz wysyła metodą GET,
  • $_POST – gdy formularz wysyła metodą POST.

Zadania dla uczniów

Zadanie 1. Stwórz prosty formularz w HTML, który pobiera od użytkownika jego imię, nazwisko i wiek. Następnie napisz skrypt PHP, który odbierze te dane i wyświetli w zdaniu: „Mam na imię [imię] [nazwisko] i mam [wiek] lat.”

Zadanie 2. Stwórz formularz, w którym użytkownik wybiera swoją ulubioną porę roku (wiosna, lato, jesień, zima – radio button) oraz zaznacza ulubione hobby (przynajmniej 3 opcje – checkbox). Napisz skrypt PHP, który odbierze dane i wyświetli podsumowanie wyborów.