Formularze są jednym z najważniejszych elementów interaktywnych w HTML, umożliwiając użytkownikom wprowadzanie danych, które mogą być przesyłane do serwera lub przetwarzane na stronie. Formularze mogą zawierać różne typy pól, takie jak pola tekstowe, przyciski, listy rozwijane, pola wyboru i wiele innych. W tej lekcji omówimy podstawową strukturę formularza, różne typy pól oraz podstawowe atrybuty formularza.
Struktura formularza
Formularz jest tworzony za pomocą znacznika <form>, a każde pole w formularzu umieszczamy jako element wewnątrz tego znacznika. Formularze wymagają także zdefiniowania kilku kluczowych atrybutów:
action: Określa adres URL, do którego dane formularza zostaną przesłane.method: Definiuje metodę wysyłania danych (najczęściej używane sąGETiPOST).
Przykład struktury formularza:
<form action="/submit" method="POST">
<!-- Pola formularza -->
</form>
Pola tekstowe
Najprostszym elementem formularza jest pole tekstowe, które pozwala użytkownikowi wpisać ciąg tekstu. Tworzymy je za pomocą znacznika <input type="text">.
Pola typu email
Pole typu email umożliwia użytkownikowi wprowadzanie adresu email. Jest to ważne, ponieważ w przeglądarkach takie pole automatycznie wymusza walidację wprowadzonego adresu, sprawdzając, czy ma on poprawny format.
Pola wyboru (checkbox)
Checkbox to pole, które pozwala użytkownikowi zaznaczyć jedną lub więcej opcji. Używa się go w przypadkach, gdy użytkownik może wybrać wiele elementów naraz.
Przycisk przesyłania formularza
Formularz musi mieć przycisk, który pozwala na jego przesłanie. Używa się do tego przycisku typu submit.
Przykłady: Frolmularze HTML
Ćwiczenia:
Ćwiczenie 1: Tworzenie prostego formularza
Stwórz formularz HTML, który zawiera pola tekstowe dla imienia i nazwiska, pole email oraz przycisk przesyłania. Formularz powinien być poprawnie sformatowany i zawierać odpowiednie etykiety (<label>).
Ćwiczenie 2: Dodawanie pola typu checkbox
Rozbuduj formularz z ćwiczenia 1, dodając pole typu checkbox z napisem "Zapisz się na newsletter". Upewnij się, że checkbox jest odpowiednio oznaczony etykietą.
Ćwiczenie 3: Walidacja adresu email
Stwórz nowy formularz, który zawiera tylko jedno pole typu email oraz przycisk przesyłania. Sprawdź, co się stanie, gdy spróbujesz przesłać formularz z niepoprawnym adresem email (np. bez znaku "@").
Ćwiczenie 4: Metoda wysyłania formularza
Stwórz dwa formularze: jeden używający metody GET, a drugi metody POST. Porównaj sposób przesyłania danych i sprawdź, w jaki sposób dane są widoczne w pasku adresu przeglądarki.
W drugiej części lekcji zagłębimy się w bardziej zaawansowane tematy dotyczące formularzy, takie jak listy rozwijane, pola wyboru oraz walidacja formularzy za pomocą HTML5.