Formularze umożliwiają użytkownikom wprowadzenie danych, oraz wysłanie ich przez protokół HTTP. Za pomocą języka HTML możemy opisać wygląd pól formularza, natomiast wysłane dane muszą zostać przetworzone przez język skryptowy (np. PHP lub Python).
Formularz musi być otoczony elementem <form></form> (umożliwia to wstawienie do dokumentu kilka formularzy z atrybutami action i method. Jako wartość action podajemy ścieżkę do pliku, który odbierze i przetworzy dane. W atrybucie method możemy wpisać post lub get, pamiętając przy tym, że dane wysłane za pomocą metody get są widoczne w pasku adresu przeglądarki. Metoda ta nie nadaje się więc, jeśli chcemy przesłać hasło, lub długi ciąg znaków.
Jako wartość elementu <form> podajemy pola do wypełnienia, oraz ich opisy.
Pola tekstowe jednolinijkowe
Pole umożliwiające wprowadzenie wartości tekstowej. Jeżeli w formularzu występuje przycisk wysyłający, lub formularz posiada tylko jedno pole tekstowe jednolinijkowe - naciśnięcie klawisza enter spowoduje wysłanie formularza. Możemy dopisać wartość domyślną pola za pomocą atrybutu value.
Pola tekstowe wielolinijkowe
Pole tekstowe wielolinijkowe pozwala na wprowadzenie wielu linii tekstu. Nowe linie możemy wstawiać po kliknięciu na klawisz enter. Wartość domyślną pola wstawiamy jako wartość elementu.
Uwaga! W wartości elementu
<textarea> mają znaczenie spacje, tabulatory i nowe linie w kodzie źródłowym witryny.
Pola wielokrotnego wyboru
Pola wielokrotnego wyboru pozwalają wybrać użytkownikowi więcej niż jedną spośród wielu opcji. Jeśli chcemy, aby jakieś pole było domyślnie zaznaczone, dopisujemy do niego pusty atrybut checked.
Wartość atrybutu
name będzie nazwą zmiennej a atrybutu value jej wartością.
Pola jednokrotnego wyboru
Pola jednokrotnego wyboru pozwalają wybrać użytkownikowi tylko jedną spośród wielu opcji. Jeśli chcemy, aby jakieś pole było domyślnie zaznaczone, dopisujemy do niego pusty atrybut checked.
Aby zapobiec zaznaczeniu dwóch tych pól jednocześnie, należy ustawić im identyczną wartość atrybutu
name.
Listy rozwijane
Lista rozwijana przypomina w konstrukcji listę numerowaną. Musi być otoczona tagami <select></select>, natomiast każdy punkt listy powinien być otoczony tagami <option></option>. Jeśli chcemy określić domyślną opcję, dopisujemy do niej pusty atrybut selected.
Pole do wprowadzenia hasła
Pole przeznaczone na wpisanie hasła jest polem jednolinijkowym. Podczas wprowadzania wartości, tekst jest widoczny jako gwiazdki.
Przycisk do wysłania formularza
Napis na przycisku podajemy w atrybucie value.
Grupowanie pól formularza
Grupy pól możemy otoczyć tagami <fieldset></fieldset>. Dodatkowo, jeśli w wartości tego elementu zamieścimy element <legend></legend>. jego wartość będzie tytułem grupy. Pola zostaną otoczone ramką.
Etykiety pól
Wszystkie pola formularza mogą posiadać swoją etykietę. Służy do tego element <label></label>. Istnieją dwa sposoby przypisania etykiety do pola.
Za pomocą stylów CSS można określić wygląd i położenie etykiet.
