Gdy budujesz formularz, używasz frameworków lub kreatorów formularzy. Ale pod spodem wszystkie używają formularzy HTML. Jeśli rozumiesz, jak działają formularze HTML, rozumiesz całą resztę. Nie zależysz od żadnego narzędzia ani frameworka. Znasz podstawy.
Ten artykuł opisuje element formularza HTML, typy pól, etykiety, walidację i to, jak formularze naprawdę są wysyłane. Bez frameworków. Bez bibliotek. Tylko HTML i zasady, na których opiera się wszystko inne.
Element formularza HTML
Formularz to element HTML, który obejmuje pola formularza i wysyła ich dane w wybrane miejsce. Podstawowa struktura wygląda tak:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Wyślij</button>
</form>
Ważne są trzy atrybuty. Atrybut action mówi formularzowi, dokąd wysłać dane. "/submit" oznacza wysłanie metodą POST do punktu /submit na Twoim serwerze. Jeśli action jest pusty, formularz wysyła dane na bieżącą stronę. Atrybut method mówi formularzowi, jak dane są przesyłane. POST wysyła dane w treści żądania (bezpiecznie, poza adresem URL). GET dołącza dane do adresu URL (niebezpieczne dla danych wrażliwych, przydatne w zapytaniach wyszukiwania). Atrybut enctype jest potrzebny tylko przy przesyłaniu plików. Ustaw enctype="multipart/form-data", gdy formularz ma pole wyboru pliku.
Wszystko wewnątrz znaczników formularza jest częścią wysyłki. Gdy użytkownik kliknie przycisk wysyłania, przeglądarka zbiera wszystkie nazwane pola i wysyła je na adres z action wskazaną metodą.
Typy pól i do czego służą
text
<input type="text" name="first_name">
Jednowierszowe pole tekstowe. Przeglądarka pokazuje zwykłe pole tekstowe. Bez walidacji. Dozwolony jest każdy znak.
<input type="email" name="email">
Pole na adresy e-mail. Na komputerze wygląda jak pole tekstowe. Na telefonie przeglądarka pokazuje klawiaturę e-mail. Przy wysyłaniu przeglądarka sprawdza, czy wartość wygląda jak adres e-mail (zawiera @). To tylko podstawowa walidacja.
password
<input type="password" name="password">
Tekst ukryty jako kropki lub gwiazdki podczas pisania. Wartość nadal jest przesyłana jawnym tekstem, więc w formularzach z polami hasła zawsze używaj HTTPS.
number
<input type="number" name="age">
Na komputerze pole tekstowe, które przyjmuje tylko liczby. Na telefonie przeglądarka pokazuje klawiaturę numeryczną. Przeglądarka blokuje wpisywanie znaków nienumerycznych.
date
<input type="date" name="birth_date">
Wybór daty. W obsługiwanych przeglądarkach i na urządzeniach kliknięcie pola otwiera kalendarz. Wartość ma format RRRR-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
Pole, które włącza się i wyłącza. Jeśli jest zaznaczone, wartość pola jest wysyłana. Jeśli nie, pole w ogóle nie jest wysyłane.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Kilka przycisków opcji o tej samej nazwie działa jak grupa. Naraz można wybrać tylko jeden. Wartość wybranego jest wysyłana.
select (lista rozwijana)
<select name="country">
<option value="us">Stany Zjednoczone</option>
<option value="ca">Kanada</option>
</select>
Menu rozwijane. Wartość wybranej opcji jest wysyłana.
textarea
<textarea name="message"></textarea>
Wielowierszowe pole tekstowe. Użytkownicy mogą pisać całe akapity. Wartość zawiera podziały wierszy.
file
<input type="file" name="resume">
Przycisk otwierający okno wyboru plików na urządzeniu. Wybrany plik trafia na serwer. Wymaga enctype="multipart/form-data" w elemencie formularza.
hidden
<input type="hidden" name="user_id" value="12345">
Pole, które nie jest wyświetlane, ale jest wysyłane. Przydaje się dla danych śledzących, które mają być dołączone, a użytkownik nie powinien ich zmieniać.
Etykiety i dostępność
Zawsze łącz pola z etykietami.
<label for="email">Adres e-mail</label>
<input type="email" id="email" name="email">
Atrybut for w etykiecie musi odpowiadać id w polu. Gdy zrobisz to poprawnie:
Czytniki ekranu odczytują etykietę razem z polem, kliknięcie etykiety ustawia kursor w polu, a użytkownicy telefonów dostają większy obszar dotyku.
Nigdy nie pomijaj etykiet. Jeśli musisz ukryć etykietę wizualnie, ukryj ją przez CSS, ale zostaw w HTML. To tak zwana etykieta "ukryta wizualnie".
Grupowanie powiązanych pól
Dla powiązanych pól użyj fieldset i legend.
<fieldset>
<legend>Adres dostawy</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Element legend zapowiada grupę czytnikom ekranu. Fieldset pomaga uporządkować przyciski opcji i pola wyboru wizualnie i semantycznie.
Wysyłanie formularza i metody HTTP
Gdy użytkownik kliknie przycisk wysyłania, przeglądarka zbiera wszystkie nazwane pola, koduje dane (domyślnie application/x-www-form-urlencoded), wysyła żądanie HTTP na adres z action metodą POST lub GET i czeka na odpowiedź.
Serwer odbiera żądanie i może przetworzyć dane. Dane docierają jako pary klucz-wartość. Jeśli metoda formularza to POST, a action to "/submit", żądanie wygląda tak. POST /submit HTTP/1.1 z nagłówkiem Content-Type ustawionym na application/x-www-form-urlencoded, a dane mają postać email=user@example.com&name=John.
Serwer przetwarza te dane i odpowiada. Jeśli odpowiedzią jest strona, przeglądarka ją wczytuje. Jeśli odpowiedzią jest przekierowanie, przeglądarka przechodzi pod nowy adres URL.
Walidacja po stronie przeglądarki
HTML ma wbudowane atrybuty walidacji. Przeglądarka sprawdza je przed wysłaniem formularza.
required
<input type="text" name="email" required>
Pole musi mieć wartość. Jeśli zostanie puste, formularz się nie wyśle, a przeglądarka pokaże błąd.
minlength i maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Wartość musi mieścić się między podaną liczbą znaków.
min i max
<input type="number" name="age" min="18" max="120">
W polach liczbowych wartość musi mieścić się w zakresie.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Wyrażenie regularne, do którego musi pasować wartość. Pięciocyfrowy kod pocztowy pasuje do [0-9]{5}.
Walidacja w przeglądarce to wygoda dla użytkowników. Chroni ich przed wysłaniem nieprawidłowych danych i błędem z serwera. Ale nigdy nie polegaj na niej dla bezpieczeństwa. Zawsze waliduj też na serwerze.
Różnica między type="submit" a type="button"
<button type="submit">Wyślij</button>
<button type="button">Zapisz</button>
Przycisk z type="submit" po kliknięciu wysyła formularz. Przycisk z type="button" domyślnie nic nie robi. Użyj type="button", gdy chcesz podpiąć obsługę zdarzeń JavaScript.
Wielu programistów używa <button> bez podania typu. Domyślnie jest to type="submit", co zwykle jest tym, czego chcesz. Ale podawaj typ jawnie, żeby uniknąć niespodzianek.
Dlaczego warto rozumieć formularze HTML
Jeśli używasz popularnych frameworków front-endowych, budujesz na formularzach HTML. Frameworki ukrywają szczegóły, ale zasady są te same. Formularz nadal wysyła dane do punktu końcowego. Walidacja nadal jest potrzebna. Serwer nadal musi obsłużyć dane.
Gdy coś w obsłudze formularza się psuje, znajomość HTML pomaga znaleźć błąd. Wiesz, skąd biorą się dane, jak są kodowane i co powinien odebrać serwer. To fundament.
Większość nowoczesnych aplikacji internetowych nie używa już tradycyjnego wysyłania formularzy. Używają JavaScriptu, żeby przechwycić formularz, zwalidować go i wysłać dane przez _blocked_ lub bibliotekę HTTP. Ale znajomość metody HTML najpierw sprawia, że te wzorce mają sens.
Jak kreator formularzy WEMASY wykorzystuje te zasady
Pod spodem kreator formularzy WEMASY generuje dostępne formularze HTML z tych samych elementów. Etykiety są połączone z polami. Walidacja działa i w przeglądarce, i na serwerze. Dane formularza są wysyłane bezpiecznie. Jeśli eksportujesz lub dostosowujesz formularz WEMASY, pracujesz z formularzami HTML zbudowanymi na tych podstawach.
Szczegóły funkcji formularzy i opcji dostosowania znajdziesz na stronie z cennikiem WEMASY.