Formularze HTML: Tworzenie interaktywnych formularzy za pomocą HTML

Formularze są nieodłącznym elementem interaktywnych stron internetowych. Pozwalają na zbieranie danych od użytkowników, takich jak informacje kontaktowe, opinie czy preferencje. W tym artykule dowiesz się, jak tworzyć interaktywne formularze HTML, korzystając z podstawowych znaczników i atrybutów. Omówimy użycie elementów <form>, <input>, <textarea>, <button>, oraz <fieldset>. Dzięki temu będziesz mógł tworzyć i walidować proste formularze w HTML.

Podstawowa struktura formularza

Formularz w HTML jest definiowany za pomocą znaczników <form> i </form>. Wewnątrz nich umieszczamy wszystkie elementy formularza, które pozwalają użytkownikowi na wprowadzanie danych.

Przykład:

					<form action="#" method="POST"> 
  <!-- Elementy formularza --> 
</form>
				

Atrybuty znacznika <form>

• action: określa adres URL, na który zostaną przesłane dane formularza.

• method: definiuje metodę przesyłania danych (GET lub POST).

Przykład:

					<form action="submit_form.php" method="POST">
  <!-- Pola formularza -->
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Wyślij</button>
</form>
				

Pola formularza

Najważniejszym elementem formularza są pola input, które umożliwiają użytkownikom wprowadzanie danych. Element <input> jest używany do tworzenia różnych typów pól.

Typy pól input

Atrybut type w znaczniku <input> określa rodzaj pola. Oto niektóre typy pól input:

• text: pole tekstowe do wprowadzania krótkich tekstów.

• password: pole do wprowadzania haseł, gdzie wpisany tekst jest ukryty.

• email: pole do wprowadzania adresu e-mail.

• number: pole liczbowe.

• tel: pole do wprowadzania numeru telefonu.

• date: pole do wyboru daty.

• datetime-local: pole do wyboru daty i czasu.

• url: pole do wprowadzania adresu URL.

• search: pole wyszukiwania.

• color: pole do wyboru koloru.

• file: pole do przesyłania plików.

• hidden: ukryte pole formularza.

Najczęściej używanymi typami pól formularza HTML są text, email i password, które pozwalają na podstawowe operacje, takie jak wprowadzenie tekstu, adresu e-mail czy haseł.

Przykład pola tekstowego:

					<label for="imie">Imię:</label> 
<input type="text" id="imie" name="imie" placeholder="Wpisz swoje imię" required>
				

Przykładowy formularz

Poniżej znajduje się przykładowy formularz z różnymi polami input:

					<form action="przetwarzanie.php" 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> 
  <label for="haslo">Hasło:</label> 
  <input type="password" id="haslo" name="haslo" required> 
  <label for="wiek">Wiek:</label> 
  <input type="number" id="wiek" name="wiek"> 
  <input type="submit" value="Wyślij"> 
</form>
				

Etykiety i powiązanie z polami

Element <label> jest używany do tworzenia etykiet dla pól formularza, co poprawia dostępność i użyteczność.

Przykład:

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

Przyciski w formularzu

Przycisk submit

Element <input type=”submit”> lub <button type=”submit”> służy do wysyłania formularza.

Przykład:

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

Przycisk reset

Element <input type=”reset”> resetuje wszystkie pola formularza do ich domyślnych wartości.

Przykład:

					<input type="reset" value="Resetuj formularz">
				

Pola wyboru

Pole typu checkbox

Umożliwia wybór jednej lub wielu opcji.

Przykład:

					<label>
  <input type="checkbox" name="zgoda" required> Akceptuję regulamin 
</label>
				

Pole typu radio

Pozwala na wybór jednej z wielu opcji.

Przykład:

					<label> 
  <input type="radio" name="plec" value="m"> Mężczyzna 
</label> 
<label> 
  <input type="radio" name="plec" value="k"> Kobieta 
</label>
				

Pole typu select

Element <select> tworzy listę rozwijaną z opcjami <option>.

Przykład:

					<label for="kraj">Wybierz kraj:</label> 
  <select id="kraj" name="kraj"> 
    <option value="pl">Polska</option> 
    <option value="de">Niemcy</option> 
    <option value="fr">Francja</option> 
  </select>
				

Możemy również grupować opcje za pomocą <optgroup>:

					<select name="miasto"> 
  <optgroup label="Polska"> 
    <option value="warszawa">Warszawa</option> 
    <option value="krakow">Kraków</option> 
  </optgroup> 
  <optgroup label="Niemcy"> 
    <option value="berlin">Berlin</option> 
    <option value="monachium">Monachium</option> 
  </optgroup> 
</select>
				

Pole tekstowe wielowierszowe

Element <textarea> służy do wprowadzania dłuższych tekstów.

Przykład:

					<label for="wiadomosc">Wiadomość:</label> 
  <textarea id="wiadomosc" name="wiadomosc" rows="5" cols="30"></textarea>
				

Grupowanie elementów formularza

Element <fieldset> pozwala na pogrupowanie powiązanych elementów formularza, a <legend> służy do nadania im opisu.

Przykład:

					<fieldset> 
  <legend>Dane kontaktowe</legend> 
    <label for="telefon">Telefon:</label> 
    <input type="tel" id="telefon" name="telefon"> 
    <label for="email">Email:</label> 
    <input type="email" id="email" name="email"> 
</fieldset>
				

Atrybuty pomocne w walidacji

• required: oznacza, że pole jest wymagane.

• placeholder: podpowiedź wyświetlana w polu.

• pattern: wyrażenie regularne do walidacji.

• min i max: minimalna i maksymalna wartość dla pól liczbowych.

• autocomplete: włącza lub wyłącza autouzupełnianie.

• autofocus: ustawia fokus na polu po załadowaniu strony.

Przykład użycia pattern:

					<label for="kod">Kod pocztowy:</label> 
  <input type="text" id="kod" name="kod" pattern="d{2}-d{3}" placeholder="00-000">
				

Przesyłanie dch

Dane z formularza są przesyłane na serwer za pomocą metod GET lub POST.

• GET: dane są widoczne w adresie URL (query string), używane do niepoufnych danych.

• POST: dane są przesyłane w ciele żądania, bezpieczniejsze dla poufnych informacji.

Atrybut enctype w znaczniku <form> określa sposób kodowania danych:

• application/x-www-form-urlencoded: domyślny.

• multipart/form-data: używany przy przesyłaniu plików.

Przykład:

					<form action="upload.php" method="POST" enctype="multipart/form-data"> 
  <input type="file" name="plik"> 
  <input type="submit" value="Wyślij plik"> 
</form>
				

Walidacja danych po stronie klienta

HTML5 wprowadził wiele nowych typów pól input, które ułatwiają walidację danych:

• email: sprawdza poprawność adresu e-mail.

• url: sprawdza poprawność adresu URL.

• number: pozwala na wprowadzanie tylko liczb.

• range: suwak do wyboru wartości z zakresu.

• date, time, datetime-local, week, month: pozwalają na wybór daty i czasu.

Szczegółowe informacje na temat walidacji formularzy HTML znajdziesz w artykule na W3Schools: HTML5 Form Validation.

Przykład pola z walidacją:

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

Przykład rozbudowanego formularza

					<form action="proces.php" method="POST">
  <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>
  </fieldset>
  <fieldset>
    <legend>Dane kontaktowe</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="telefon">Telefon:</label>
    <input type="tel" id="telefon" name="telefon">
  </fieldset>
  <fieldset>
    <legend>Preferencje</legend>
    <label for="newsletter">
      <input type="checkbox" id="newsletter" name="newsletter"> 
      Chcę otrzymywać newsletter
    </label>
    <label for="jezyk">Wybierz język:</label>
    <select id="jezyk" name="jezyk">
      <option value="pl">Polski</option>
      <option value="en">Angielski</option>
      <option value="de">Niemiecki</option>
    </select>
  </fieldset>
  <input type="submit" value="Wyślij formularz">
  <input type="reset" value="Resetuj formularz">
</form>
				

FAQ: Pytania i odpowiedzi

Podstawowe elementy formularza HTML to przede wszystkim element form, który definiuje cały formularz, oraz elementy input HTML, które tworzą pola formularza HTML. W skład wszystkich elementów formularza wchodzą także element textarea, element label oraz elementy option.

Element form HTML służy do grupowania wszystkich elementów formularza w jednym miejscu. Określa, dokąd dane pola formularza zostaną przesłane po jego wypełnieniu. Ważne jest, aby poprawnie ustawić atrybuty elementu form, takie jak action i method, aby dane pola formularza były przesyłane do odpowiedniego adresu.

Najważniejsze atrybuty elementu input HTML to: type, który określa typ pola (np. text, email, password), name, który służy do identyfikacji pola formularza HTML, oraz value, który ustawia wartość pola input. Użycie odpowiednich atrybutów jest kluczowe dla poprawnego funkcjonowania formularza.

Wartość atrybutu name w formularzu HTML powinna być unikalna w obrębie danego formularza i jednoznacznie identyfikować dane pole formularza. Na przykład, dla pola input do wprowadzania imienia można użyć name=”imie”. Dzięki temu element input HTML przekaże właściwą wartość pola do serwera.

Istnieje wiele typów pól formularza HTML, takich jak text, password, email, number, date, oraz file. Każdy typ pól formularza HTML służy do zbierania innego rodzaju danych od użytkownika. Poprawne zastosowanie typów pól formularza HTML zwiększa funkcjonalność formularza.

Element textarea HTML tworzy pole wielowierszowego tekstu, które umożliwia użytkownikowi wprowadzenie dłuższej treści. Warto zwrócić uwagę na odpowiednie ustawienie atrybutu name oraz innych atrybutów, takich jak rows i cols, aby dostosować rozmiar i działanie tego pola formularza.

Element label HTML służy do tworzenia etykiet dla pól formularza, takich jak input, textarea name, czy select. Etykieta przypisana do danego pola formularza zwiększa jego dostępność i ułatwia użytkownikom korzystanie z formularza. Należy używać atrybutu for, aby połączyć element label z odpowiednim polem formularza.

Elementy option HTML definiują poszczególne opcje w polach wyboru select. Atrybut selected określa, która opcja jest domyślnie zaznaczona. Użycie atrybutu option selected pozwala na predefiniowanie wartości pola formularza, co jest szczególnie przydatne przy tworzeniu rozwijanych list.

Atrybut placeholder dodaje podpowiedź wyświetlaną w formularzu polom input oraz elementom textarea HTML, gdy pole jest puste. Placeholder pomaga użytkownikom zrozumieć, jakich danych oczekuje się w danym polu formularza. Na przykład: <input type=”text” name=”imie” placeholder=”Wpisz swoje imię”>.

Atrybut value w elementach input oraz option ustawia domyślną wartość pola formularza. Dla elementów input HTML wartość atrybutu value definiuje, co będzie wyświetlane w polu tekstowym po załadowaniu strony. Natomiast w elementach option, wartość atrybutu value jest przesyłana do serwera, gdy dana opcja zostanie wybrana.

Podsumowanie

Tworzenie interaktywnych formularzy HTML jest kluczowe dla zbierania danych od użytkowników. Znajomość różnych elementów formularza, takich jak <input>, <textarea>, <select>, oraz umiejętność ich odpowiedniego zastosowania pozwala na tworzenie funkcjonalnych i przyjaznych dla użytkownika formularzy. Pamiętaj o walidacji danych oraz o stosowaniu odpowiednich atrybutów w celu poprawy dostępności i użyteczności.

Teraz jesteś gotowy do tworzenia własnych formularzy i integracji ich z aplikacjami webowymi. Eksperymentuj z różnymi typami pól input, korzystaj z kontrolek formularza i pamiętaj o estetycznym rozmieszczeniu elementów na stronie.

Jeśli chcesz dowiedzieć się więcej o samym języku HTML koniecznie przeczytaj nasz artykuł:

HTML dla zielonych: Podstawy tworzenia stron internetowych

Mateusz Wojdalski

Specjalista SEO i content marketingu w Devstock. Zajmuję się strategią treści, automatyzacją procesów marketingowych i wdrożeniami AI w codziennej pracy. Badam nowe narzędzia, adaptuję je do realnych zadań i piszę o tym, co faktycznie działa.