Dokumentacja HTML z przykładami: Formularze

Q: Jak zrobić formularz w HTML?

Otocz pola znacznikiem , nadaj każdemu polu name i , a na końcu dodaj . Po wysłaniu formularza przeglądarka wysyła każdą parę name=value pod adres z action.

Q: Czym różni się GET od POST w formularzu?

method="get" (domyślne) umieszcza pola w adresie URL, jak w /search?q=shoes, co pasuje do wyszukiwania i filtrów, które powinno się dać zapisać w zakładkach. method="post" wysyła je w treści żądania, czego potrzebujesz przy logowaniu, rejestracji i wszystkim, co zmienia dane.

Q: Dlaczego pole mojego formularza nie jest wysyłane?

Nie ma atrybutu name albo jest disabled. Wysyłane są tylko nazwane, włączone pola. Niezaznaczony checkbox lub przycisk radio też jest całkowicie pomijany.

Q: Do czego służą fieldset i legend?

grupuje powiązane pola, a to podpis grupy. Czytniki ekranu ogłaszają legend, gdy fokus wchodzi do grupy, dzięki czemu grupa przycisków radio jest zrozumiała, a disabled na fieldset wyłącza każde pole w środku.

Q: Jak zwalidować formularz w HTML bez JavaScriptu?

Użyj atrybutów: required, type="email", minlength, maxlength, min, max i pattern. Przeglądarka blokuje wysłanie i pokazuje komunikat przy pierwszym niepoprawnym polu. Zawsze waliduj też na serwerze, bo te sprawdzenia działają w przeglądarce użytkownika i da się je obejść.

Q: Jak zapobiec przeładowaniu strony przez formularz?

Nasłuchuj zdarzenia submit formularza i wywołaj event.preventDefault(), a potem sam wyślij dane przez fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Jak zrobić formularz w HTML

Formularz to element <form> z polami i przyciskiem wysyłania. Każde pole potrzebuje name: to klucz, pod którym wysyłana jest wartość. Wypełnij formularz i naciśnij Send. Podgląd nigdzie niczego nie wysyła; pokazuje dokładnie to, co wysłałaby przeglądarka.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Poszczególne elementy:

action to adres URL, pod który trafiają dane, a method określa sposób (tutaj post).
name na każdym polu. Jego wartość to to, co wpisał użytkownik.
<label> nazywa każde pole na ekranie i dla czytników ekranu (patrz etykiety w HTML).
required i type="email" sprawiają, że przeglądarka sprawdza pola przed wysłaniem. Spróbuj wysłać formularz z pustym imieniem albo z abc jako adresem e-mail.
Przycisk wysyłania wysyła formularz. Naciśnięcie Enter w polu tekstowym też.

action i method: dokąd i jak trafiają dane

Atrybut	Wartości	Domyślnie
`action`	Dowolny adres URL	Adres URL bieżącej strony
`method`	`get`, `post`, `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	`application/x-www-form-urlencoded`

Przy method="get" pola stają się query stringiem adresu URL: formularz wyszukiwania z name="q" przechodzi pod /search?q=blue+shoes. To dobre dla wyszukiwania i filtrów, bo wynik można zapisać w zakładkach i udostępnić. Przy method="post" pola trafiają do treści żądania i nie pojawiają się w pasku adresu ani w historii. Używaj POST do wszystkiego, co loguje, tworzy, zmienia lub usuwa, i do haseł.

Formularz z przesyłaniem plików (<input type="file">) potrzebuje method="post" i enctype="multipart/form-data", inaczej wysyłana jest tylko nazwa pliku. method="dialog" służy do formularza wewnątrz <dialog>: wysłanie zamyka okno dialogowe zamiast wysyłać żądanie.

Co jest wysyłane

Wysyłane są tylko pola z name i tylko wtedy, gdy nie są disabled. Naciśnij Submit i porównaj pola z tym, co wysyła formularz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

Formularz wysyła city, zip, source i action. Pole bez nazwy, wyłączone pole i niezaznaczony checkbox są pomijane. Ukryte pola są wysyłane, ale nigdy się nie wyświetlają, a przycisk wysyłania wysyła własne name i value, bo to on został użyty.

Grupowanie pól przez fieldset i legend

<fieldset> rysuje ramkę wokół powiązanych pól, a <legend> to jej podpis. Czytniki ekranu ogłaszają legend, gdy fokus wchodzi do grupy, dzięki czemu zestaw przycisków radio jak poniżej jest zrozumiały: "Delivery, Standard, przycisk radio".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled na fieldset wyłącza naraz każde pole w środku i żadne z nich nie jest wysyłane. Usuń go, a pola z opcjami prezentu staną się dostępne.

Wbudowana walidacja: required, pattern i spółka

Przeglądarki sprawdzają te atrybuty przed wysłaniem i pokazują komunikat przy pierwszym polu, które nie przejdzie:

Atrybut	Sprawdza
`required`	Pole nie jest puste (checkbox jest zaznaczony)
`type="email"`, `type="url"`	Wartość wygląda jak adres e-mail lub URL
`minlength`, `maxlength`	Długość tekstu
`min`, `max`, `step`	Zakres liczb i dat
`pattern`	Cała wartość pasuje do wyrażenia regularnego

:invalid i :valid stylizują pola według ich stanu. Zwykle lepsze jest :user-invalid: działa dopiero wtedy, gdy użytkownik zmieni pole i przejdzie dalej albo spróbuje wysłać formularz, więc pusty formularz nie otwiera się cały na czerwono.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

Trzy rzeczy w pattern często zaskakują. Musi pasować do całej wartości (nie trzeba ^ ani $). Działa tylko wtedy, gdy pole nie jest puste, więc łącz go z required. A komunikat błędu przeglądarki jest ogólny, więc opisz format widocznym tekstem obok pola. Chrome i Firefox dodają do komunikatu tekst z title, ale łatwo go przeoczyć.

Aby wyłączyć sprawdzanie, na przykład podczas testowania walidacji na serwerze, dodaj novalidate do <form>. Pojedynczy przycisk wysyłania może je pominąć przez formnovalidate.

Walidacja w przeglądarce jest dla wygody użytkownika. Każdy może edytować stronę albo wysłać żądanie bez niej, więc serwer musi jeszcze raz sprawdzić każdą wartość.

Własne komunikaty z setCustomValidity

Gdy reguły nie da się zapisać jako atrybutu, np. "oba hasła muszą się zgadzać", ustaw komunikat z JavaScriptu. Pole z niepustym własnym komunikatem jest niepoprawne; pusty ciąg znaków znowu czyni je poprawnym:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

Pole powtórzenia nie ma name, więc wysyłana jest tylko jedna kopia hasła.

Obsługa wysyłania w JavaScripcie

Aby wysłać formularz bez opuszczania strony, nasłuchuj submit, wywołaj preventDefault() i odczytaj pola przez FormData. Nasłuchiwanie submit zamiast click na przycisku łapie każdy sposób wysłania, łącznie z Enter, i działa dopiero po przejściu wbudowanej walidacji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) zamienia pola w zwykły obiekt. Dla pól, które mogą mieć kilka wartości (checkboxy o tej samej nazwie, select z wyborem wielokrotnym), użyj zamiast tego formData.getAll('name'), bo obiekt zachowuje tylko ostatnią wartość.

Częste błędy

Pola bez name. Są po cichu pomijane w wysyłanych danych.
Placeholdery zamiast etykiet. Podpowiedź znika, gdy tylko użytkownik zacznie pisać. Użyj <label>.
<button> bez type używany do czegoś innego niż wysyłanie. W formularzu to przycisk wysyłający.
Formularz w formularzu. Zagnieżdżanie formularzy jest niepoprawne; przeglądarka ignoruje wewnętrzny znacznik <form>.
Nasłuchiwanie click na przycisku wysyłania zamiast submit na formularzu. Wysłania klawiszem Enter zostaną pominięte.
Poleganie na walidacji przeglądarki po stronie serwera. Tam waliduj jeszcze raz.
GET dla haseł. Trafiają do adresu URL, historii i logów serwera.

Najczęściej zadawane pytania

Jak zrobić formularz w HTML?

Otocz pola znacznikiem <form action="/signup" method="post">, nadaj każdemu polu name i <label>, a na końcu dodaj <button type="submit">. Po wysłaniu formularza przeglądarka wysyła każdą parę name=value pod adres z action.

Czym różni się GET od POST w formularzu?

method="get" (domyślne) umieszcza pola w adresie URL, jak w /search?q=shoes, co pasuje do wyszukiwania i filtrów, które powinno się dać zapisać w zakładkach. method="post" wysyła je w treści żądania, czego potrzebujesz przy logowaniu, rejestracji i wszystkim, co zmienia dane.

Dlaczego pole mojego formularza nie jest wysyłane?

Nie ma atrybutu name albo jest disabled. Wysyłane są tylko nazwane, włączone pola. Niezaznaczony checkbox lub przycisk radio też jest całkowicie pomijany.

Do czego służą fieldset i legend?

<fieldset> grupuje powiązane pola, a <legend> to podpis grupy. Czytniki ekranu ogłaszają legend, gdy fokus wchodzi do grupy, dzięki czemu grupa przycisków radio jest zrozumiała, a disabled na fieldset wyłącza każde pole w środku.

Jak zwalidować formularz w HTML bez JavaScriptu?

Użyj atrybutów: required, type="email", minlength, maxlength, min, max i pattern. Przeglądarka blokuje wysłanie i pokazuje komunikat przy pierwszym niepoprawnym polu. Zawsze waliduj też na serwerze, bo te sprawdzenia działają w przeglądarce użytkownika i da się je obejść.

Jak zapobiec przeładowaniu strony przez formularz?

Nasłuchuj zdarzenia submit formularza i wywołaj event.preventDefault(), a potem sam wyślij dane przez fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Powiązane zagadnienia