Formularz jest pewnego rodzaju narzędziem. Może być wykorzystywany do zbierania informacji, logowania, przesyłania poczty, złożenia zamówienia w sklepie internetowym itp. Przetwarzanie danych zawartych w formularzu realizowane jest za pomocą języka skryptowego po stronie serwera. (np. PHP) Język HTML odpowiada jedynie za wprowadzanie odpowiednich elementów formularza. Formularz wprowadzamy pomiędzy:
<form> </form>
Pomiędzy tymi znacznikami możemy dodać różne pola formularza za pomocą:
<input>
Jest kilka rodzajów pola formularza:
- text - pole tekstowe.
- checkbox - pole wyboru, to mały kwadracik, który za pomocą myszki możemy zaznaczać i odznaczać. Pozwala to na wybranie kilku odpowiedzi ze wszystkich możliwych.
- radio - pole opcji (pole typu radio) to małe kółeczko, które można zaznaczyć w przeciwieństwie do pola wyboru można w tym przypadku zaznaczyć tylko jedną odpowiedź.
- select - lista rozwijana.
- password - pole tekstowe, którego zawartość jest zakropkowana.
- textarea - większy obszar pola tekstowego.
- submit - przycisk wysyłania formularza.
- reset - przycisk resetowania formularza.
Zadanie. Wykonaj prosty formularz logowania posiadający: imię, nazwisko, hasło.
<form> Imię: <input type="text" name="imie"> Nazwisko: <input type="text" name="nazwisko"> Haslo: <input type="password" name="haslo"> </form>
Zadanie. Wykonaj formularz elektroniczny według instrukcji: podaj imię i nazwisko (pole tekstowe), PESEL (pole tekstowe, maksymalna liczba znaków 11), kod pocztowy (dwa pole tekstowe, rozdzielone dywizem "-"), płeć (kobieta/mężczyzna), wybierz województwo (lista rozwijalna), zainteresowania (wprowadź 8 możliwości, pole wyboru) oraz przyciski: wyczyść i wyślij.
<html> <head><title> Prosty formularz </title><head> <body> <form action="" method="POST"> Imie: <input type="text" name="imie"> </br> Nazwisko: <input type="text" name="nazwisko"> </br> PESEL: <input type="pesel" name="pesel" maxlength="11" size="12"> </br> Kod Pocztowy: <input type="text" name="kod1" size="3" maxlength="2">-<input type="text" name="kod2" size="4" maxlength="3"> </br> Plec: <input type="radio" name="mezczyzna" value="mężczyzna">mezczyzna <input type="radio" name="kobieta" value="kobieta"> kobieta </br> Wojewodztwo: <select name="wojewodztwo"> </br> <option>dolnosloskie</option> <option>kujawsko-pomorskie</option> <option>lubelskie</option> <option>lubuskie</option> <option>lodzkie</option> <option>malopolskie</option> <option>mazowieckie</option> <option>opolskie</option> <option>podkarpackie</option> <option>podlaskie</option> <option>pomorskie</option> <option>slaskie</option> <option>swietokrzyskie</option> <option>warminsko-mazurskie</option> <option>wielkopolskie</option> <option>zachodniopomorskie</option> </select> </br> <input type="checkbox" name="zain"> sport <input type="checkbox" name="zain"> polityka <input type="checkbox" name="zain"> technologie <input type="checkbox" name="zain"> odzywianie <input type="checkbox" name="zain"> moda <input type="checkbox" name="zain"> ksiazki <input type="checkbox" name="zain"> zarabianie <input type="checkbox" name="zain"> turystyka </br> <input type="submit" value="wyslij"> </br> <input type="reset" value="resetuj"> </form> </body> </html>