Webform , formularz internetowy lub formularza HTML na stronie internetowej pozwala użytkownikowi na wprowadzanie danych, które są przesyłane do serwera w celu przetworzenia. Formularze mogą przypominać formularze papierowe lub bazy danych, ponieważ użytkownicy Internetu wypełniają formularze za pomocą pól wyboru, przycisków opcji lub pól tekstowych . Na przykład formularze mogą służyć do wprowadzania danych dotyczących wysyłki lub karty kredytowej w celu zamówienia produktu lub mogą być używane do wyszukiwania wyników wyszukiwania w wyszukiwarce
Formularze są zawarte w elemencie HTML <form> . Ten element określa punkt końcowy komunikacji, do którego należy wprowadzić dane wprowadzone do formularza, oraz metodę przesłania danych, GETlub POST.
Elementy
Formularze mogą składać się ze standardowych elementów graficznego interfejsu użytkownika :
<text>- proste pole tekstowe, które umożliwia wprowadzenie jednego wiersza tekstu.<email>- tego typu<text>wymaga częściowo zweryfikowanego adresu e-mail<number>- rodzaj<text>tego wymaga liczby<password>- podobnie jak<text>, jest używany do celów bezpieczeństwa, w których wpisywane znaki są niewidoczne lub zastępowane symbolami, takimi jak *)<radio>- przycisk opcji<file>- kontrola wyboru pliku do przesłania pliku<reset>- przycisk resetowania, który po aktywacji informuje przeglądarkę o przywróceniu wartości do wartości początkowych.<submit>- przycisk, który mówi przeglądarce, aby podjęła działanie na formularzu (zazwyczaj w celu wysłania go do serwera)<textarea>- podobnie jak w<text>polu wprowadzania danych, z wyjątkiem tego, że<textarea>umożliwia wyświetlanie i wprowadzanie wielu wierszy danych<select>- rozwijana lista, która wyświetla listę elementów, z których użytkownik może wybrać
Przykładowy obraz po prawej stronie pokazuje większość z tych elementów:
- pole tekstowe z pytaniem o twoje imię
- parę przycisków radiowych z prośbą o wybranie płci
- select box daje listę oka kolorach do wyboru
- parę pól wyboru, aby kliknąć, jeśli dotyczą Ciebie
- pole tekstowe opisujące twoje umiejętności sportowe
- przycisk Prześlij, aby wysłać go na serwer
Te podstawowe elementy zapewniają najczęstsze elementy graficznego interfejsu użytkownika (GUI), ale nie wszystkie. Na przykład nie ma odpowiedników widoku drzewa ani widoku siatki .
Widok siatki można jednak naśladować za pomocą standardowej tabeli HTML, w której każda komórka zawiera element wprowadzania tekstu. Widok drzewa można również naśladować poprzez zagnieżdżone tabele lub, bardziej odpowiednio semantycznie , zagnieżdżone listy . W obu przypadkach proces po stronie serwera jest odpowiedzialny za przetwarzanie informacji, podczas gdy JavaScript obsługuje interakcję użytkownika. Implementacje tych elementów interfejsu są dostępne za pośrednictwem bibliotek JavaScript, takich jak jQuery .
HTML 4 wprowadził <label>znacznik, który ma reprezentować podpis w interfejsie użytkownika, i można go powiązać z określonym formantem formularza poprzez określenie idatrybutu formantu w foratrybucie tagu etykiety . [1] Pozwala to etykietom pozostać z elementami podczas zmiany rozmiaru okna i umożliwić więcej funkcji podobnych do pulpitu, np. Kliknięcie przycisku opcji lub etykiety pola wyboru aktywuje powiązany element wejściowy.
HTML 5 wprowadza szereg tagów wejściowych, które mogą być reprezentowane przez inne elementy interfejsu. Niektóre opierają się na polach wprowadzania tekstu i mają na celu wprowadzanie i weryfikowanie określonych wspólnych danych. Obejmują one <email>wprowadzanie adresów e-mail, <tel>numerów telefonów i <number>wartości liczbowych. Istnieją dodatkowe atrybuty określające wymagane pola, pola, które powinny być zogniskowane na klawiaturze, gdy strona internetowa zawierająca formularz jest ładowana, oraz tekst zastępczy, który jest wyświetlany w polu, ale nie jest wprowadzany przez użytkownika (np. Tekst „Szukaj” wyświetlany w wielu pola wejściowe wyszukiwania przed wprowadzeniem wyszukiwanego hasła.) Te zadania były obsługiwane przez JavaScript , ale stały się tak powszechne, że obsługa ich została dodana do standardu. The<date>typ wprowadzania wyświetla kalendarz, z którego użytkownik może wybrać datę lub zakres dat. [2] [3] A colortyp wprowadzania może być reprezentowany jako tekst wejściowy, wystarczy sprawdzić, czy wprowadzona wartość jest poprawną szesnastkową reprezentacją koloru, zgodnie ze specyfikacją, [4] lub widżetem próbnika kolorów (ten ostatni jest rozwiązaniem używane w większości przeglądarek obsługujących ten atrybut).