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:
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:
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:
Przykładowy formularz
Poniżej znajduje się przykładowy formularz z różnymi polami input:
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:
Przyciski w formularzu
Przycisk submit
Element <input type=”submit”> lub <button type=”submit”> służy do wysyłania formularza.
Przykład:
Przycisk reset
Element <input type=”reset”> resetuje wszystkie pola formularza do ich domyślnych wartości.
Przykład:
Pola wyboru
Pole typu checkbox
Umożliwia wybór jednej lub wielu opcji.
Przykład:
Pole typu radio
Pozwala na wybór jednej z wielu opcji.
Przykład:
Pole typu select
Element <select> tworzy listę rozwijaną z opcjami <option>.
Przykład:
Możemy również grupować opcje za pomocą <optgroup>:
Pole tekstowe wielowierszowe
Element <textarea> służy do wprowadzania dłuższych tekstów.
Przykład:
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:
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:
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:
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ą:
Przykład rozbudowanego formularza
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ł:
