Formularz HTML to interaktywny element strony umożliwiający wprowadzenie i przesłanie danych przez odbiorcę.
Budowa formularza HTML i jego elementy
Formularz HTML jest tworzony za pomocą elementu <form>. Jego atrybut action wskazuje adres URL, na który przeglądarka prześle dane, natomiast method określa sposób wysłania żądania HTTP. W praktyce najczęściej stosuje się metodę get albo post. Przy GET wartości pól są kodowane w adresie URL jako parametry zapytania, dlatego rozwiązanie to pasuje do wyszukiwania lub filtrowania. Przy POST dane trafiają do treści żądania HTTP.
Pola formularza zwykle tworzy się elementem <input>, ale do dyspozycji są także <textarea> dla dłuższych tekstów, <select> z elementami <option> dla list wyboru oraz <button> do wykonania akcji. Każde pole przeznaczone do wysłania powinno mieć atrybut name, ponieważ to on staje się nazwą parametru przekazywanego do serwera. Atrybut id identyfikuje element w dokumencie i pozwala powiązać go z etykietą <label for="...">.
Przesyłanie wartości do serwera
Po zatwierdzeniu formularza przeglądarka odczytuje wartości aktywnych kontrolek i buduje żądanie zgodnie z ustawieniami formularza. Kontrolki bez atrybutu name, pola wyłączone przez disabled oraz niektóre niezaznaczone elementy wyboru nie są wysyłane. Dla formularza kodowanego domyślnie jako application/x-www-form-urlencoded znaki specjalne są zamieniane na zapis procentowy, a pary nazwa-wartość są rozdzielane znakami &. Przy przesyłaniu plików trzeba użyć enctype="multipart/form-data" oraz pola <input type="file">.
Przycisk <button type="submit"> albo <input type="submit"> uruchamia wysłanie formularza. Przycisk z type="button" nie wykonuje tej operacji samodzielnie, a type="reset" przywraca wartości początkowe kontrolek. Jeżeli formularz nie ma jawnie określonego method, przeglądarka używa metody GET. Atrybut target może wskazać sposób otwarcia odpowiedzi, a autocomplete steruje możliwością podpowiadania wcześniej wpisywanych wartości przez przeglądarkę.
Walidacja pól po stronie przeglądarki
HTML udostępnia podstawową walidację bez konieczności pisania skryptu JavaScript. Atrybut required wymaga uzupełnienia pola, type="email" sprawdza składnię wartości przypominającą adres poczty elektronicznej, a type="url" oczekuje danych w formacie adresu URL. Dla tekstu można ustawić minlength i maxlength, natomiast dla liczb oraz dat stosuje się między innymi min, max i step. Atrybut pattern pozwala określić wyrażenie regularne używane do sprawdzenia wartości pola tekstowego.
Walidacja przeglądarkowa poprawia obsługę formularza, ale nie zastępuje sprawdzenia po stronie serwera. Użytkownik może wyłączyć JavaScript, zmienić żądanie poza przeglądarką albo wysłać ręcznie przygotowane dane. Serwer powinien więc niezależnie sprawdzić typ, długość, zakres i wymagalność każdej wartości, a następnie obsłużyć błędne dane bez przerywania działania aplikacji. W JavaScript można wykorzystać interfejs Constraint Validation API, w tym metody checkValidity() i reportValidity(), aby sprawdzić stan kontrolek i wyświetlić komunikaty jeszcze przed wysłaniem żądania.
Formularz w diagnostyce laptopa i komputera
Formularze HTML są często częścią paneli kontaktowych, zgłoszeń serwisowych, wyszukiwarek części oraz narzędzi do opisu usterki. Przy zgłoszeniu dotyczącym laptopa można zastosować osobne pola na producenta, model, system operacyjny, objawy, moment wystąpienia problemu i wykonane wcześniej czynności. Dobrze opisane etykiety oraz logiczna kolejność kontrolek ułatwiają wprowadzenie danych, a element <fieldset> z <legend> pozwala grupować powiązane informacje, na przykład dane urządzenia i opis awarii.
Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, dlatego formularz zgłoszeniowy może służyć do zebrania parametrów potrzebnych przed przyjęciem urządzenia do diagnostyki. W przypadku formularza z wysyłaniem plików trzeba prawidłowo ustawić enctype, ograniczyć akceptowane typy przez atrybut accept i kontrolować rozmiar plików po stronie serwera. Po naprawie warto zachować spójność komunikatów walidacyjnych: błąd powinien wskazywać konkretne pole i opisywać, jaką wartość należy wprowadzić, zamiast jedynie informować o ogólnym niepowodzeniu wysyłania.
