Znacznikiem służącym do tworzenia formularzy jest <form>. Posiada on kilka atrybutów. Obowiązkowym atrybutem jest action, który określa gdzie mają zostać wysłane dane z formularza, np. action=”[email protected]” oznacza wysłanie danych na maila. Drugim często używanym atrybutem jest method, który może przyjąć jedną z dwóch wartości get lub post.
Tak więc przykładowy szkielet formularza będzie wyglądał tak:
<form action=”[email protected]” method=”post”>
zawartość formularza
</form>
Przejdźmy teraz do zawartości formularza. W treści możemy wstawiać takie pola:
-pole tekstowe:
<input type=”text” name=”nazwa”>
-pole tekstowe do wpisywania hasła:
<input type=”password” name=”hasło” value=”hasło”>.
Zamiast wpisywanych znaków będą widoczne gwiazdki.
-wielowierszowe pole tekstowe:
<textarea name=”nazwa” rows=”5” cols=”30”> Tutaj wpisz tekst ...</textarea>,
gdzie rows to ilość wiersz, a cols to ilość znaków w poziomie (szerokość).
-pole jednokrotnego wyboru – radio:
<input type=”radio” name=”nazwa” value=”biały”>
<input type=”radio” name=”nazwa” value=”szary”>
<input type=”radio” name=”nazwa” value=”czarny”>
Jeśli kilka pól typu radio będzie miało taką samą nazwę to automatycznie zostaną uznane za grupę i możliwe będzie zaznaczenie tylko jednego. Jeśli któreś pole ma być zaznaczone domyślnie należy użyć atrybutu checked, np. <input type=”radio” name=”nazwa” value=”biały” checked>
-pola wielokrotnego wyboru – checkbox:
<input type=”checkbox” name=”nazwa” value=”biały”>
<input type=”checkbox” name=”nazwa” value=”szary”>
<input type=”checkbox” name=”nazwa” value=”czarny”>
Podobnie jak w polach jednokrotnego wyboru można użyć atrybutu checked.
-pole listy:
Lista rozwijana (combo):
<select name="kolor" size="1">
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>
Jeśli size ustawimy na 1 to powstanie lista rozwijana-combo. Jeśli damy większą wartość to będzie pole listy -listbox:
<select name="kolor" size="2">
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>
Domyślnie na listach można wybrać jedną wartość. Jeśli do znacznika select zostanie dodany atrybut multiple będzie można wybrać z listy kilka wartości.
<select name="kolor" size="2" multiple>
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>
Aby domyślnie zostało zaznaczone któreś z pól należy użyć znacznika selected.
<select name="kolor" size="2">
<option selected>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>
-przycisk wysyłania formularza:
<input type=”submit” name=”nazwa” value=”Wyślij”>
Atrybuty name i value nie są konieczne.
Można również jako przycisk ustawić obrazek:
<input type="image" src="button.gif" alt="Wyślij">
-reset formularza (wyczyszczenie wszystkich pól):
<input type="reset" value="Wyczyść formularz">
-pole wyboru pliku do wysłania:
<input type="file" name="plik">
To są najważniejsze i najczęściej używane elementy formularza. Dodatkowo można formularz obramować. Służy do tego znacznik fieldset (obramowanie) i legend (tytuł).
<fieldset><legend>Wybierz kolor</legend><br/>
<input type="radio" name="kolor" value="biały">biały<br/>
<input type="radio" name="kolor" value="szary">szary<br/>
<input type="radio" name="kolor" value="czarny">czarny
</fieldset>
Przykład formularza:
<form action=”index.php” method=”post”>
<p>Podaj imię:</p>
<input type=”text” name=”imie”><br/>
<p>Podaj nazwisko:</p>
<input type=”text” name=”nazwisko”><br/>
<p> Zainteresowania:</p>
<input type=”checkbox” name=”zainteresowania” value=”sport”>
<input type=”checkbox” name=”zainteresowania” value=”muzyka”>
<input type=”checkbox” name=”zainteresowania” value=”film”>
<input type=”submit” name=”nazwa” value=”Wyślij”>
</form>