W tym celu do kodu źródłowego strony trzeba dodać znacznik FORM z atrybutem wskazującym akcję, jaka ma zostać wykonana po wysłaniu formularza. Na przykład, aby po wypełnieniu formularza mógł on być wysłany na adres e-mail jan.kowalski@example.com, można się posłużyć następującym znacznikiem: <form action="mailto:jan.kowalski@example.com" method="post">...</form>.

Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni atrybut: <form action="..." method="post" style="text-align: center">...</form>.

W tym celu do dokumentu HTML wewnątrz znacznika FORM należy wstawić odpowiedni znacznik: <input type="text" name="...">.

Pole numeryczne jest odmianą pola tekstowego, w którym jednak można wpisywać tylko liczby. Aby umieścić go wewnątrz formularza, wystarczy ustawić mu odpowiedni typ: <input type="number" name="...">.

Domyślnie każde pole tekstowe ma ustaloną szerokość, która może się różnić w zależności od przeglądarki. Aby ustawić szerokość pola np. na 10 znaków, można się posłużyć następującym kodem: <input type="text" name="..." size="10">. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 10 znaków, nadal będzie mógł to zrobić. W takim przypadku w miarę wpisywania tekstu zawartość pola będzie się przesuwać w lewo.

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć więcej niż jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu checkbox. Na przykład: <input type="checkbox" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić wyboru zaznaczonego przez użytkownika.

Checkbox to inaczej pole wielokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="checkbox" name="nazwa" value="wartość">. Wszystkie pola wyboru, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć najwyżej jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu radio. Na przykład: <input type="radio" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić, którą opcję zaznaczył użytkownik.

Radio w języku HTML to nie środek masowego komunikowania, służący do rozpowszechniania audycji dźwiękowych 😉 Jest to inaczej pole jednokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="radio" name="nazwa" value="wartość">. Wszystkie pola opcji, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Znacznik SELECT pozwala wstawić listę rozwijaną wewnątrz formularza na stronie. Zawiera ona zestaw opcji do wyboru, ale domyślnie na ekranie wyświetla się tylko jedna z nich, a dopiero po kliknięciu rozwijają się kolejne. Ponadto jeśli opcji będzie bardzo dużo, przeglądarka pokaże pionowy suwak do ich przewijania.

Lista rozwijana jest jednym z rodzajów pól formularza. Aby wstawić pole takiego typu na stronie i umieścić w nim np. trzy opcje, można się posłużyć następującym kodem: <select name="..."> <option>Opcja 1</option> <option>Opcja 2</option> <option>Opcja 3</option> </select>.

Znacznik TEXTAREA pozwala wstawić wieloliniowe pole tekstowe wewnątrz formularza. Pole takiego typu może być używane np. do wpisania komentarza bądź innej nieco dłuższej wiadomości.

Domyślnie każde wieloliniowe pole tekstowe ma ustaloną zarówno szerokość jak i wysokość, które mogą się różnić w zależności od przeglądarki. Aby ustawić szerokość takiego pola np. na 100 znaków, a wysokość na 10 linijek tekstu, można się posłużyć następującym kodem: <textarea name="..." cols="100" rows="10"></textarea>. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 100 znaków, nadal będzie mógł to zrobić. Wtedy tekst po prostu zostanie przeniesiony do kolejnej linijki. Natomiast jeśli zajmie już całe 10 linijek, przeglądarka wyświetli w tym polu pionowy suwak do przewijania, a cała jego zawartość przesunie się w górę.

Domyślnie formularz jest wysyłany, jeśli użytkownik wciśnie Enter wpisując coś w dowolnym polu tekstowym albo polu hasła, które się w nim znajdują. Jednak mniej doświadczeni użytkownicy mogą nie znać tego zachowania. Poza tym w formularzu może nie być żadnego pola tego typu. Dlatego zwykle umieszcza się w nim dodatkowy przycisk, którego wciśnięcie wysyła formularz.

Aby to zrobić, wewnątrz formularza należy umieścić odpowiedni znacznik: <input type="submit" value="Wyślij">.

Zdarza się, że użytkownik w trakcie wypełniania formularza zdecyduje, że chce zacząć od nowa. Oczywiście w tym celu mógłby po prostu odświeżyć całą stronę. Jednak znacznie wygodniej jest umieścić w formularzu specjalny przycisk, po wciśnięciu którego cała zawartość formularza zostanie natychmiast przywrócona na stanu początkowego bez czekania na przeładowanie strony. W tym celu wewnątrz formularza trzeba umieścić specjalny znacznik: <input type="reset" value="Wyczyść">.

Pojęcie wyczyszczenia danych zwykle jest stosowane zamiennie z resetowaniem formularza. Formalnie jednak resetowanie oznacza przywrócenie wartości początkowych - tzn. takich jakie miały ustawione pola, zanim użytkownik rozpoczął wypełnianie formularza. Najczęściej będzie to oznaczać właśnie usunięcie ich zawartości. Jednak niektóre pola mogą mieć ustawione przez twórcę strony wartości domyślne, które użytkownik może zmienić. W takim przypadku reset nie wyczyści ich zawartości, ale przywróci te wartości domyślne. W języku HTML nie istnieje element pozwalający naprawdę wyczyścić formularz, ponieważ może to wymagać indywidualnego podejścia w zależności od tego z jakich pól się on składa. Potrzeba uzyskania takiego efektu raczej nie jest częsta - zwykle chodzi nam raczej o zresetowanie danych, a nie ich całkowite wyczyszczenie. Jeśli rzeczywiście jest to konieczne, można taki efekt zaimplementować przy pomocy odpowiedniego skryptu JavaScript.

Aby wstawić w dokumencie HTML przycisk, po kliknięciu którego nastąpi przejście do innej strony, można się posłużyć odsyłaczem obrazkowym.

Jest to znacznik, za pomocą którego możemy wstawić przycisk wewnątrz formularza. W języku HTML istnieją trzy typy przycisków, które ustawia się za pomocą odpowiedniego atrybutu: type="submit" - wysłanie formularza, type="reset" - zresetowanie danych, type="button" - przycisk bez akcji (można go użyć np. w skrypcie JavaScript).