<form>

Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.

Wyświetlanie: block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść przepływu bez zagnieżdżonych elementów <form>

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<form action="/newsletter" method="post">
  <p>
    <label for="email">E-mail</label>
    <input type="email" id="email" name="email" placeholder="ania@example.com" required>
  </p>
  <p>
    <label>
      <input type="checkbox" name="consent" required>
      Chcę dostawać nowe lekcje na e-mail
    </label>
  </p>
  <button type="submit">Zapisz się</button>
</form>

Podgląd

Definicja i zastosowanie

Element <form> łączy pola (<input>, <select>, <textarea>) i przyciski w jedną całość. Po kliknięciu przycisku wysyłającego albo naciśnięciu Enter w polu tekstowym przeglądarka zbiera wartości wszystkich pól z atrybutem name i wysyła je pod adres z atrybutu action.

Metoda get dopisuje dane do adresu strony (/szukaj?q=html), dlatego pasuje do wyszukiwarek i filtrów, które warto móc zapisać w zakładkach. Metoda post wysyła dane w treści żądania i jest właściwa dla logowania, rejestracji, zamówień i wszystkiego, co zmienia dane na serwerze.

Zanim formularz zostanie wysłany, przeglądarka sprawdza reguły zapisane w polach, takie jak required, type="email" czy minlength, i pokazuje komunikat przy pierwszym błędnym polu. Formularzy nie wolno zagnieżdżać, ale pole stojące poza formularzem możesz do niego przypisać atrybutem form="id-formularza".

Składnia

<form action="/adres" method="post">
  …
</form>

Atrybuty

action
URL
Adres, pod który trafią dane. Bez tego atrybutu formularz wysyła dane na adres bieżącej strony. Pojedynczy przycisk może nadpisać adres własnym atrybutem formaction.
method
get | post | dialog
Sposób wysłania danych. get (domyślnie) dopisuje je do adresu jako parametry, więc po wysłaniu formularza z przykładu przeglądarka przejdzie pod /szukaj?q=…. post wysyła dane w treści żądania. Wartość dialog zamyka okno <dialog>, w którym stoi formularz, bez wysyłania czegokolwiek na serwer.
enctype
application/x-www-form-urlencoded | multipart/form-data | text/plain
Format, w jakim dane trafią na serwer przy metodzie post. Domyślny format wystarcza dla zwykłych pól, ale formularz z polem type="file" musi mieć multipart/form-data, inaczej zamiast pliku wyśle się tylko jego nazwa.
novalidate
atrybut logiczny
Wyłącza wbudowaną walidację przeglądarki przy wysyłaniu. Przydaje się, gdy sprawdzasz pola własnym kodem JavaScript i pokazujesz własne komunikaty. W przykładzie formularz nie zaprotestuje mimo błędnego adresu e-mail.
target
_self | _blank | _parent | _top | nazwa
Gdzie otworzyć odpowiedź serwera po wysłaniu. _blank otwiera ją w nowej karcie. Wartości działają tak samo jak w atrybucie target odnośnika <a>.
autocomplete
on | off
Domyślne ustawienie autouzupełniania dla wszystkich pól formularza. Pojedyncze pole może je nadpisać własnym atrybutem autocomplete. Przy polach logowania przeglądarki często ignorują off, żeby menedżery haseł nadal działały.
name
tekst
Nazwa formularza. Pozwala odwołać się do niego w JavaScripcie przez document.forms.nazwa.

Atrybut	Wartości	Opis
action	URL	Adres, pod który trafią dane. Bez tego atrybutu formularz wysyła dane na adres bieżącej strony. Pojedynczy przycisk może nadpisać adres własnym atrybutem `formaction`.
method	get \| post \| dialog	Sposób wysłania danych. `get` (domyślnie) dopisuje je do adresu jako parametry, więc po wysłaniu formularza z przykładu przeglądarka przejdzie pod `/szukaj?q=…`. `post` wysyła dane w treści żądania. Wartość `dialog` zamyka okno `<dialog>`, w którym stoi formularz, bez wysyłania czegokolwiek na serwer.
enctype	application/x-www-form-urlencoded \| multipart/form-data \| text/plain	Format, w jakim dane trafią na serwer przy metodzie `post`. Domyślny format wystarcza dla zwykłych pól, ale formularz z polem `type="file"` musi mieć `multipart/form-data`, inaczej zamiast pliku wyśle się tylko jego nazwa.
novalidate	atrybut logiczny	Wyłącza wbudowaną walidację przeglądarki przy wysyłaniu. Przydaje się, gdy sprawdzasz pola własnym kodem JavaScript i pokazujesz własne komunikaty. W przykładzie formularz nie zaprotestuje mimo błędnego adresu e-mail.
target	_self \| _blank \| _parent \| _top \| nazwa	Gdzie otworzyć odpowiedź serwera po wysłaniu. `_blank` otwiera ją w nowej karcie. Wartości działają tak samo jak w atrybucie `target` odnośnika `<a>`.
autocomplete	on \| off	Domyślne ustawienie autouzupełniania dla wszystkich pól formularza. Pojedyncze pole może je nadpisać własnym atrybutem `autocomplete`. Przy polach logowania przeglądarki często ignorują `off`, żeby menedżery haseł nadal działały.
name	tekst	Nazwa formularza. Pozwala odwołać się do niego w JavaScripcie przez `document.forms.nazwa`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

action

URL

Adres, pod który trafią dane. Bez tego atrybutu formularz wysyła dane na adres bieżącej strony. Pojedynczy przycisk może nadpisać adres własnym atrybutem formaction.

HTML

<form action="/kontakt" method="post">
  <label>Wiadomość <input type="text" name="message"></label>
  <button>Wyślij</button>
</form>

Podgląd

method

get | post | dialog

Sposób wysłania danych. get (domyślnie) dopisuje je do adresu jako parametry, więc po wysłaniu formularza z przykładu przeglądarka przejdzie pod /szukaj?q=…. post wysyła dane w treści żądania. Wartość dialog zamyka okno <dialog>, w którym stoi formularz, bez wysyłania czegokolwiek na serwer.

HTML

<form action="/szukaj" method="get">
  <input type="search" name="q" placeholder="Szukaj w dokumentacji" aria-label="Szukaj w dokumentacji">
  <button>Szukaj</button>
</form>

Podgląd

enctype

application/x-www-form-urlencoded | multipart/form-data | text/plain

Format, w jakim dane trafią na serwer przy metodzie post. Domyślny format wystarcza dla zwykłych pól, ale formularz z polem type="file" musi mieć multipart/form-data, inaczej zamiast pliku wyśle się tylko jego nazwa.

HTML

<form action="/profil/avatar" method="post" enctype="multipart/form-data">
  <label>Zdjęcie profilowe <input type="file" name="avatar" accept="image/*"></label>
  <button>Wyślij</button>
</form>

Podgląd

novalidate

atrybut logiczny

Wyłącza wbudowaną walidację przeglądarki przy wysyłaniu. Przydaje się, gdy sprawdzasz pola własnym kodem JavaScript i pokazujesz własne komunikaty. W przykładzie formularz nie zaprotestuje mimo błędnego adresu e-mail.

HTML

<form novalidate>
  <input type="email" name="email" value="to-nie-jest-email" aria-label="E-mail">
  <button>Wyślij mimo błędu</button>
</form>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

form {
  display: block;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Każde pole, którego wartość ma trafić na serwer, potrzebuje atrybutu name. Pole bez nazwy nie zostanie wysłane.
Walidacja w przeglądarce to wygoda dla użytkownika, a nie zabezpieczenie. Serwer zawsze musi sprawdzić dane jeszcze raz.
Przycisk bez atrybutu type wewnątrz formularza domyślnie go wysyła. Przyciskom, które tylko coś robią na stronie, nadawaj type="button".

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs