Jak zrobić formularz w HTML?

Aby stworzyć formularz w HTML, należy wykorzystać specjalne znaczniki i atrybuty, które umożliwiają użytkownikowi wprowadzanie danych poprzez różnorodne pola, przyciski oraz listy. Formularze są podstawą interakcji z użytkownikami w serwisach internetowych – służą m.in. do zbierania danych kontaktowych, opinii, rejestracji czy zamówień.

Podstawowa struktura formularza w HTML

Formularz zaczyna się od znacznika <form>, a kończy na </form>. Wewnątrz umieszcza się elementy takie jak: <input>, <textarea>, <select>, <button> i inne. Przykład najprostszego formularza:

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

Wyjaśnienie kluczowych elementów

• <form> – element otwierający i zamykający formularz;
  główne atrybuty:
• action – adres, na który wysyłane są dane z formularza;
• method – sposób wysyłania danych: "get" (dane trafiają do adresu URL) lub "post" (dane trafiają do zapytania HTTP);
• <input> – pole do wprowadzania danych. Najpopularniejsze typy (type):
• text – pole tekstowe,
• email – pole do adresu e-mail (z walidacją),
• password – ukryte pole na hasło,
• radio – pojedynczy wybór z grupy opcji,
• checkbox – pole wyboru wielokrotnego,
• submit – przycisk wysyłający formularz,
• reset – przycisk czyszczący formularz.
• <label> – opis tekstowy dla pola formularza. Warto używać atrybutu for, by powiązać podpis z polem;
• <textarea> – większe pole tekstowe, np. na komentarz użytkownika;
• <select> i <option> – lista rozwijana do wyboru jednej lub wielu opcji;
• <button> – uniwersalny przycisk, może być stosowany do wysyłania lub innych akcji.

Rozbudowany przykład formularza rejestracyjnego

<form action="/rejestracja" method="post">
  <fieldset>
    <legend>Dane osobowe</legend>
    <label for="name">Imię i nazwisko:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>
    <label for="password">Hasło:</label>
    <input type="password" id="password" name="password" required>
  </fieldset>
  <fieldset>
    <legend>Płeć</legend>
    <input type="radio" id="k" name="gender" value="kobieta">
    <label for="k">Kobieta</label>
    <input type="radio" id="m" name="gender" value="mężczyzna">
    <label for="m">Mężczyzna</label>
  </fieldset>
  <fieldset>
    <legend>Zainteresowania</legend>
    <input type="checkbox" id="z1" name="zainteresowania" value="sport">
    <label for="z1">Sport</label>
    <input type="checkbox" id="z2" name="zainteresowania" value="muzyka">
    <label for="z2">Muzyka</label>
    <input type="checkbox" id="z3" name="zainteresowania" value="podróże">
    <label for="z3">Podróże</label>
  </fieldset>
  <fieldset>
    <legend>Wybierz kraj</legend>
    <select name="country" id="country">
      <option value="pl">Polska</option>
      <option value="de">Niemcy</option>
      <option value="uk">Wielka Brytania</option>
    </select>
  </fieldset>
  <label for="comments">Dodatkowe informacje:</label>
  <textarea id="comments" name="comments" rows="4" cols="40"></textarea>
  <input type="submit" value="Zarejestruj">
  <input type="reset" value="Wyczyść">
</form>

Wyjaśnienie bardziej zaawansowanych elementów

• <fieldset> i <legend> – służą do grupowania powiązanych pól i nadawania im nagłówka;
• Atrybuty required, disabled, readonly – ułatwiają walidację i kontrolę dostępności pól;
• Walidacja HTML5 – wiele typów pól (np. email, number) oraz atrybutów (pattern, minlength, maxlength) pozwala kontrolować poprawność wpisywanych danych już po stronie przeglądarki.

Zastosowania formularzy HTML

• Formularze kontaktowe, rejestracyjne i logowania,
• Ankiety i quizy online,
• Rezerwacje, zamówienia, zapisy na wydarzenia,
• Wprowadzanie lub aktualizacja danych w panelach administracyjnych.

Dobre praktyki

• Stosuj czytelne labelki i logiczne grupowanie pól,
• Zapewniaj walidację po stronie przeglądarki i serwera,
• Umożliwiaj łatwe czyszczenie formularza przez przycisk reset,
• Dbaj o dostępność – podpisuj poprawnie pola i stosuj odpowiednie atrybuty.

Podsumowanie

Tworzenie formularza w HTML opiera się na użyciu znacznika <form> i umieszczaniu w nim elementów takich jak <input>, <textarea>, <select>, <button>, a także dodatkowych atrybutów i znaczników poprawiających funkcjonalność oraz użyteczność formularza. Prawidłowo zaprojektowany formularz jest intuicyjny, przejrzysty i ułatwia użytkownikom przekazywanie informacji do serwisu internetowego.