Tagi HTML: form

Tag <form> to jeden z najpotężniejszych i najczęściej używanych elementów HTML. Jest on fundamentem interaktywnych aplikacji webowych, umożliwiając zbieranie danych od użytkowników i ich przesyłanie na serwer.

Bez formularzy nie byłoby rejestracji, logowania, wyszukiwania ani kontaktu — nowoczesny internet stałby się znacznie mniej funkcjonalny.

Co to jest tag `<form>`?

Element <form> to kontener dla interaktywnych elementów sterujących służących do przesyłania informacji. Każdy formularz zawiera pola, w które użytkownik może wpisywać dane, wybierać opcje lub klikać przyciski. Wszystkie te elementy muszą być zagnieżdżone wewnątrz znacznika <form>, aby stanowiły spójną całość funkcjonalną.

Struktura podstawowa

Najprościej strukturę formularza można przedstawić następująco:

<form action="/url-do-przetwarzania" method="post">  </form>

Znacznik <form> jest elementem blokowym — zajmuje całą dostępną szerokość i automatycznie przerywa linię. Znacznik zamykający jest obowiązkowy.

Kluczowe atrybuty tagu `<form>`

`action`

Atrybut action określa adres URL, na który mają zostać wysłane dane formularza. Bez niego formularz nie będzie miał dokąd wysłać informacje. Oto prosty przykład konfiguracji adresu docelowego:

<form action="/procesor_formularza.php" method="post">  </form>

`method`

Atrybut method definiuje metodę HTTP używaną do przesyłania danych. Dwie główne opcje to GET i POST. Przykład użycia metody GET:

<form action="procesor_formularza.php" method="get"> <label>Google: <input type="search" name="q"></label> <input type="submit" value="Szukaj..."> </form>

Dla większej przejrzystości poniżej porównanie metod w praktyce:

Metoda	Lokalizacja danych	Typowe zastosowanie	Pamięć podręczna/zakładki	Ograniczenia rozmiaru
GET	w URL (widoczne parametry)	wyszukiwanie, filtrowanie, linki do wyników	można buforować i dodawać do zakładek	tak (ograniczenie długości URL)
POST	w ciele żądania (niewidoczne w URL)	logowanie, rejestracja, przesyłanie formularzy z danymi wrażliwymi	nie nadaje się do zakładek	praktycznie brak ograniczeń po stronie URL

`enctype`

Atrybut enctype określa sposób kodowania danych przed wysłaniem. Najczęstsze wartości to:

application/x-www-form-urlencoded – wartość domyślna,
multipart/form-data – do przesyłania plików,
text/plain – zwykły tekst (rzadko używany).

Przykład użycia atrybutu enctype z wysyłką jako zwykły tekst:

<form action="mailto:[email protected]" method="post" enctype="text/plain">  </form>

Typy pól formularza

Pola tekstowe

Pole jednoliniowe (text) — najbardziej uniwersalne. Przykład prostego pola:

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

To samo pole z dodatkowymi atrybutami kontrolującymi rozmiar:

<input type="text" id="imie" name="imie" size="30" maxlength="20" placeholder="Podaj swoje imię" />

Najczęściej stosowane atrybuty dla pól tekstowych to:

size – szerokość wyświetlanego pola,
maxlength – maksymalna liczba znaków, które można wpisać,
placeholder – tekst podpowiedzi wyświetlany w polu.

Pole hasła (password) — maskuje wpisywane znaki. Przykład:

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

Pole email (email) — waliduje format adresu email:

<label for="email">Email:</label> <input type="email" id="email" name="email" required>

Pole numeryczne (number) — do wprowadzania liczb z ograniczeniami zakresu:

<label for="wiek">Wiek:</label> <input type="number" id="wiek" name="wiek" min="0" max="120">

Pole telefonu (tel) — do wpisywania numeru telefonu:

<label for="telefon">Telefon:</label> <input type="tel" id="telefon" name="telefon">

Obszar tekstowy (`textarea`)

Do wprowadzania dłuższych tekstów na wiele wierszy użyj <textarea>. Przykład:

<label>Wiadomość:</label> <textarea name="wiadomosc" rows="4" cols="50"></textarea>

Atrybut rows definiuje liczbę widocznych wierszy, a cols — szerokość w znakach.

Pola wyboru

Radio buttons — do wyboru jednej opcji z grupy. Przykład:

<p>Podaj swoją płeć:</p> <label> <input type="radio" name="plec" value="Kobieta"> Kobieta </label> <label> <input type="radio" name="plec" value="Mężczyzna"> Mężczyzna </label>

Wszystkie przyciski typu radio w jednej grupie muszą mieć tę samą wartość atrybutu name.

Checkboxy — do wyboru wielu opcji. Przykład:

<p>Jaką lubisz muzykę?</p> <label> <input type="checkbox" name="muzyka" value="Rock"> Rock </label> <label> <input type="checkbox" name="muzyka" value="Pop"> Pop </label> <label> <input type="checkbox" name="muzyka" value="Techno"> Techno </label>

Listy rozwijane (`select`)

Lista podstawowa z jedną opcją domyślną wygląda tak:

<label for="przegladarka">Jakiej przeglądarki używasz?</label> <select name="przegladarka" id="przegladarka"> <option selected>Chrome</option> <option>Firefox</option> <option>Opera</option> <option>Edge</option> </select>

Lista rozszerzona umożliwia wybór wielu opcji:

<label for="systemy">Jakie znasz systemy operacyjne?</label> <select name="systemy" id="systemy" multiple size="3"> <option selected>Windows</option> <option>Linux</option> <option>macOS</option> </select>

Atrybut multiple pozwala wybrać kilka opcji (np. z klawiszem Ctrl), a size określa liczbę widocznych pozycji listy. Jeśli <option> nie ma atrybutu value, za wartość przyjmowany jest jej tekst wewnętrzny.

Etykiety (`<label>`)

Tag <label> jest kluczowy dla dostępności i użyteczności formularza. Łączy się z polem formularza na dwa sposoby.

Sposób 1 — zagnieżdżenie pola wewnątrz etykiety:

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

Sposób 2 — połączenie przez atrybut for i id:

<label for="email">Email:</label> <input type="email" id="email" name="email">

Drugi sposób jest bardziej semantyczny i zalecany — atrybut for w etykiecie musi odpowiadać atrybutowi id pola formularza.

Grupowanie elementów formularza

`<fieldset>` i `<legend>`

Dla bardziej skomplikowanych formularzy warto grupować elementy semantycznie. Oto przykład grupy pól z podpisem:

<fieldset> <legend>Twoje ulubione gatunki muzyki</legend> <label> <input type="checkbox" name="gatunek" value="rock"> Rock </label> <label> <input type="checkbox" name="gatunek" value="jazz"> Jazz </label> <label> <input type="checkbox" name="gatunek" value="klasyka"> Muzyka poważna </label> </fieldset>

<fieldset> grupuje powiązane elementy i dodaje ramkę, a <legend> stanowi opis tej grupy.

Elementy <fieldset> można zagnieżdżać w sobie, aby tworzyć czytelną hierarchię sekcji:

<fieldset> <legend>Twoje ulubione:</legend> <fieldset> <legend>Który uczeń jest twoim faworytem?</legend>  </fieldset> </fieldset>

Walidacja formularza

Atrybut `required`

Atrybut required wymusza wypełnienie pola przed wysłaniem formularza. Przykład prostego formularza z wymaganymi polami:

<form action="/submit-form" method="post"> <label for="imie">Imię:</label> <input type="text" id="imie" name="imie" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Wyślij"> </form>

Atrybut `pattern`

pattern pozwala zdefiniować wyrażenie regularne dla weryfikacji formatu danych. Oto przykłady walidacji dla nazwy użytkownika i numeru telefonu:

<form action="/submit-form" method="post"> <label for="uzytkownik">Nazwa użytkownika (tylko litery i cyfry):</label> <input type="text" id="uzytkownik" name="uzytkownik" pattern="[A-Za-z0-9]+" required>


  <label for="telefon">Numer telefonu (xxx-xxx-xxxx):</label>

  <input type="tel" id="telefon" name="telefon" pattern="\d{3}-\d{3}-\d{4}" required>

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

Przyciski formularza

Submit (`type="submit"`)

Przycisk typu submit wysyła formularz na serwer:

<input type="submit" value="Wyślij formularz">

Reset (`type="reset"`)

Przycisk reset czyści wszystkie pola formularza i przywraca wartości domyślne:

<input type="reset" value="Wyczyść dane">

Przykład kompletnego formularza

Oto praktyczny przykład łączący wiele elementów w jedną, czytelną strukturę:

<form action="mailto:[email protected]" method="post" enctype="text/plain"> <fieldset> <legend>Dane Osobowe</legend> <label for="imie">Imię:</label> <input type="text" id="imie" name="imie" required>


    <label for="nazwisko">Nazwisko:</label>

    <input type="text" id="nazwisko" name="nazwisko" required>
    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required>

  </fieldset>
  <fieldset>

    <legend>Dodatkowe Informacje</legend>
    <p>Ile masz lat?</p>

    <label><input type="radio" name="wiek" value="18-25"> 18-25 lat</label>

    <label><input type="radio" name="wiek" value="26-35"> 26-35 lat</label>

    <label><input type="radio" name="wiek" value="36+"> 36+ lat</label>
    <label for="przegladarka">Preferowana przeglądarka:</label>

    <select name="przegladarka" id="przegladarka">

      <option selected>Chrome</option>

      <option>Firefox</option>

      <option>Safari</option>

    </select>

  </fieldset>
  <fieldset>

    <legend>Wiadomość</legend>

    <label for="komentarz">Twój komentarz:</label>

    <textarea id="komentarz" name="komentarz" rows="5" cols="50" placeholder="Wpisz swoją wiadomość..."></textarea>

  </fieldset>

<input type="submit" value="Wyślij formularz"> <input type="reset" value="Wyczyść dane"> </form>

Najczęstsze przypadki użycia

Formularze HTML stosuje się w następujących sytuacjach:

logowaniu i rejestracji użytkowników,
wyszukiwaniu informacji na stronie,
wysyłaniu wiadomości (formularze kontaktowe),
ankietach i zbieraniu opinii,
edycji profilu użytkownika,
procesach zakupowych.

Co to jest tag <form>?

Struktura podstawowa

Kluczowe atrybuty tagu <form>

action

method

enctype