Co to jest `form` w HTML?

<form> w HTML to kluczowy element umożliwiający tworzenie formularzy – interaktywnych obszarów na stronie internetowej, w których użytkownicy mogą wprowadzać dane, a następnie przesyłać je do dalszego przetwarzania, najczęściej na serwer. Formularze są fundamentem wszelkich interakcji użytkownika ze stroną – od rejestracji, logowania, ankiet, po składanie zamówień i wyszukiwanie informacji.

Podstawowa struktura formularza

Podstawę każdego formularza stanowi znacznik:

<form> <!-- elementy formularza --> </form> 

Wewnątrz <form> umieszcza się elementy formularza (tzw. form controls), takie jak:

• Pola tekstowe
• Checkboxy
• Przyciski radio
• Listy rozwijane
• Przyciski wysyłające formularz (submit)
• Przyciski resetujące (reset)

Przykład prostego formularza rejestracyjnego:

<form action="/rejestracja" method="post">
    <label for="username">Nazwa użytkownika:</label>
    <input type="text" id="username" name="username" required>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Zarejestruj się">
</form>

Wybrane atrybuty <form> i ich znaczenie

Najważniejsze atrybuty znacznika <form> to:

• Action – adres (URL), pod który zostaną wysłane dane po zatwierdzeniu formularza;
• Method – określa metodę przesyłania danych (najczęściej POST lub GET);
• Target – decyduje, gdzie wyświetli się odpowiedź serwera (np. nowa karta);
• Autocomplete – pozwala włączyć lub wyłączyć sugestie i automatyczne uzupełnianie danych przez przeglądarkę;
• Novalidate – wyłącza walidację po stronie przeglądarki;
• Accept-charset – ustala zestaw znaków do kodowania danych formularza.

Przykład wykorzystania większości atrybutów:

<form action="https://twoja-strona.pl/kontakt" method="post" target="_blank" autocomplete="on" accept-charset="UTF-8" novalidate >
  <!-- Pola formularza -->
</form>

Typowe elementy formularza

Elementy te umieszczamy wyłącznie wewnątrz <form>:

Przykład formularza zamówienia:

<form action="/zamow" method="post">
    <label for="name">Imię i nazwisko:</label>
    <input type="text" id="name" name="name">
    <label for="delivery">Dostawa:</label>
    <select id="delivery" name="delivery">
        <option value="kurier">Kurier</option>
        <option value="poczta">Poczta</option>
        <option value="odbior">Odbiór osobisty</option>
    </select>
    <input type="checkbox" id="newsletter" name="newsletter" value="tak">
    <label for="newsletter">Zapisz mnie na newsletter</label>
    <input type="submit" value="Zamawiam">
</form>

Zastosowania formularzy w praktyce

Formularze HTML wykorzystywane są m.in. do –

• rejestracji kont i logowania,
• kontaktu (formularze „Kontakt”),
• zamawiania produktów i usług (koszyki),
• wyszukiwarek,
• ankiet i quizów,
• rezerwacji, np. biletów.

Mechanizm działania formularza

1. Pobranie danych od użytkownika – pola formularza przyjmują dane wprowadzone przez internautę;
2. Walidacja – sprawdzenie poprawności danych (automatyczna w HTML5 lub dodatkowa po stronie serwera/JavaScript);
3. Przesłanie danych – po kliknięciu „Wyślij” przeglądarka wysyła dane zgodnie z atrybutami action i method;
4. Przetworzenie po stronie serwera – dalsza logika aplikacji (np. zapis w bazie danych, wysłanie maila).

Dobre praktyki

• Stosuj etykiety (<label>) – zwiększają dostępność i czytelność;
• Wymuszaj ważność pól wymaganych (required);
• Opisuj pola – użytkownik musi wiedzieć, co wprowadza;
• Dbaj o bezpieczeństwo – waliduj dane również po stronie serwera;
• Grupuj logicznie elementy (np. pole adresu, kontaktu).

Formularze w HTML to nieodzowny element każdej strony wymagającej jakiejkolwiek interakcji z użytkownikiem. Od ich jakości często zależy skuteczność funkcjonowania stron i aplikacji internetowych oraz pozytywne doświadczenie użytkowników.