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">
</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">
<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ł: