Kurs HTML

Czym są formularze HTML?

Formularze HTML są jednym z najważniejszych elementów interaktywnych na stronach internetowych. Pozwalają użytkownikom wprowadzać dane, które następnie mogą być wysłane na serwer w celu przetworzenia. Przykłady zastosowań formularzy to:

• Logowanie i rejestracja użytkowników.
• Wyszukiwanie informacji na stronie.
• Wysyłanie wiadomości (formularze kontaktowe).
• Składanie zamówień w sklepach internetowych.
• Dodawanie komentarzy i postów na forach.
• Przeprowadzanie ankiet i głosowań.

Podstawowym znacznikiem służącym do tworzenia formularzy jest <form>.

Znacznik <form>

Znacznik <form> działa jak kontener dla różnych elementów kontrolnych formularza, takich jak pola tekstowe, przyciski opcji, pola wyboru, listy rozwijane i przyciski wysyłania. Sam znacznik <form> nie jest widoczny na stronie, ale definiuje, jak i gdzie dane z formularza mają zostać wysłane.

Najważniejsze atrybuty znacznika <form> to:

• action: Określa adres URL (lub ścieżkę do skryptu na serwerze), do którego zostaną wysłane dane z formularza po jego zatwierdzeniu przez użytkownika (np. po kliknięciu przycisku "Wyślij").
• method: Określa metodę HTTP, która zostanie użyta do wysłania danych. Najczęściej używane metody to:
  • GET: Dane formularza są dołączane do adresu URL podanego w atrybucie action jako parametry (widoczne w pasku adresu przeglądarki). Metoda GET jest odpowiednia dla prostych formularzy, takich jak wyszukiwarki, gdzie dane nie są wrażliwe i ich ponowne wysłanie (np. przez odświeżenie strony) nie powoduje skutków ubocznych. Istnieje limit długości adresu URL, co ogranicza ilość danych możliwych do przesłania.
  • POST: Dane formularza są wysyłane w ciele żądania HTTP, a nie w adresie URL. Metoda POST jest bezpieczniejsza dla przesyłania wrażliwych danych (np. haseł), nie ma praktycznie limitu ilości danych i jest używana, gdy wysłanie formularza powoduje zmianę stanu na serwerze (np. dodanie komentarza, złożenie zamówienia).
  Jeśli atrybut method nie zostanie podany, domyślnie używana jest metoda GET.

Prosty przykład znacznika <form>:

<form action="/przetwarzanie-danych" method="POST">
  <!-- Tutaj znajdą się elementy formularza (np. pola input, przyciski) -->
  
  <p>To jest prosty formularz.</p>
  
  <!-- Przycisk do wysłania formularza -->
  <button type="submit">Wyślij</button>
</form>Kopiuj

W tym przykładzie:

• Dane zostaną wysłane na adres /przetwarzanie-danych (jest to ścieżka względna, serwer musi mieć odpowiedni skrypt do obsługi tego adresu).
• Użyta zostanie metoda POST.
• Na razie formularz zawiera tylko tekst i przycisk wysyłania. W kolejnych lekcjach dodamy do niego pola do wprowadzania danych.

Elementy formularza

Wewnątrz znacznika <form> umieszcza się różne elementy kontrolne, które pozwalają użytkownikowi wprowadzać dane. Najważniejsze z nich to:

• <input>: Najbardziej wszechstronny element, tworzący różne typy pól w zależności od atrybutu type (np. text, password, radio, checkbox, submit, file, date, email i wiele innych).
• <textarea>: Tworzy wieloliniowe pole tekstowe.
• <select> (razem z <option>): Tworzy listę rozwijaną.
• <button>: Tworzy przycisk (może być typu submit, reset lub button).
• <label>: Tworzy etykietę dla elementu formularza, poprawiając użyteczność i dostępność.
• <fieldset> i <legend>: Służą do grupowania powiązanych elementów formularza.

Szczegółowo omówimy te elementy w kolejnych lekcjach tego rozdziału.

Przycisk wysyłania (`type="submit"`)

Aby użytkownik mógł wysłać wypełniony formularz, potrzebny jest przycisk typu submit. Można go stworzyć na dwa sposoby:

1. <input type="submit" value="Wyślij">
2. <button type="submit">Wyślij</button>

Oba sposoby działają tak samo - kliknięcie takiego przycisku powoduje wysłanie danych formularza na adres podany w atrybucie action za pomocą metody określonej w atrybucie method. Użycie znacznika <button> jest często preferowane, ponieważ pozwala na umieszczenie wewnątrz przycisku bardziej złożonej zawartości (np. tekstu i ikon).

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz szkielet formularza kontaktowego. Formularz ma wysyłać dane metodą POST na adres /wyslij-wiadomosc. Na razie umieść w nim tylko tekst informacyjny "Formularz kontaktowy" i przycisk "Wyślij wiadomość" typu submit.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Szkielet</title>
</head>
<body>
    <h1>Kontakt</h1>
    
    <form action="/wyslij-wiadomosc" method="POST">
        <p>Formularz kontaktowy</p>
        
        <!-- W przyszłości dodamy tu pola na imię, email, wiadomość -->
        
        <button type="submit">Wyślij wiadomość</button>
    </form>

</body>
</html>Kopiuj