Typowy formularz

Formularze spotykane na stronach internetowych skladają sie z dwóch części. Pierwszą z nich są wypełniane przez użytkownika pola widoczne na stronie, a drugą niewidoczny skrypt obsługujący nasz formularz napisany w jednym z języków programowania (skrypty CGI). Przetwarzaniem danych z formularza nie bedziemy sie zajmowac na lekcjach. Najprostszym formularzem jest taki, którego wyniki są przesyłane pocztą elektroniczna na adres e-mail.
Podstawowe składniki formularza to:

• pola tekstowe
• pola haseł
• przyciski radiowe
• pola wyboru
• bloki tekstu
• menu
• przycisk wysyłajacy i resetujacy

Tworzenie formularzy:

Tworzenie formularza rozpoczynamy od wpisania znacznika

<form>

w którym wpisujemy nazwe formularza, definiujemy metode przesyłania danych, format przesyłanech informacji i adres, pod który mają być przesłane. W powyższym formularzu wpisałem:

<form name="pytania" enctype="text/plain"
action="mailto:jklockowski@wp.pl?subject=Wyniki ankiety" method="post">

Tworzenie pól tekstowych:

<p>
	Twój e-mail:
	<input type="text" name="visitor_email" size="45" maxlength="40">
</p>

Name jest nazwą slużącą do identyfikacji pola na serwerze, size jest szerokością pola a maxlength maksymalną liczbą znaków, które można wpisac w polu.

Tworzenie pól hasła:

<p>
	Twoje hasło:
	<input type="password" name="haslo" size="20" maxlength="40">
</p>

Różnica miedzy polem tekstowym i polem hasła polega tylko na tym, ze wprowadzane znaki sa widoczne jako gwiazdki. Przy przesyłaniu nie są szyfrowane.

Tworzenie przycisków radiowych:

<p>
Płec: 
kobieta <input type="radio" name="plec" value="kobieta" checked="checked">
mężczyzna <input type="radio" name="plec" value="mężczyzna"> 
</p>

Ta sama nazwa definiuje grupę przycisków, z których tylko jeden może być w danym czasie włączony. W danej grupie może być tylko jeden przycisk domyślnie zaznaczony (checked="checked").

Tworzenie pól wyboru:

<p>
	Wybierz Twoje zainteresowania:
	<input type="checkbox" name="zainteresowania" value="film">Film
	<input type="checkbox" name="zainteresowania" value="muzyka">Muzyka
	<input type="checkbox" name="zainteresowania" value="informatyka" 
		checked="checked" disabled="disabled">Informatyka
	<input type="checkbox" name="zainteresowania" value="podroze">Podróze
	<input type="checkbox" name="zainteresowania" value="historia">Historia
	<input type="checkbox" name="zainteresowania" value="astronomia">Astronomia
	<input type="checkbox" name="zainteresowania" value="moda">Moda
	<input type="checkbox" name="zainteresowania" value="samochody">Samochody
</p>

Pola wyboru różnią się od przycisków radiowych tym, że można wybrać tyle pól, na ile mamy ochote, można również domyślnie zaznaczyć kilka pól. W powyższym przykładzie pole "informatyka" zostało wyłaczone (disabled="disabled").

Tworzenie bloków tekstu:

<p>
	Napisz kilka zdań o sobie:
	<textarea name="o_sobie" rows="4" cols="50" >
	</textarea>
</p>

Rows oznacza liczbę wiersz a cols liczbę kolumn, jesli nie wpiszemy wartości, domyślnie otrzymamy pole, które ma 4 wiersze, każdy na 40 znaków.

Tworzenie menu:

<p>
	Twoja ulubiona pora roku:
	<select name="pora" id="pora_roku">
	<option value="jesien" selected="selected">jesien</option>
	<option value="zima">zima</option>
	<option value="wiosna">wiosna</option>
	<option label="lato">lato</option>
	</select>
</p>

Domyślnie wybrana jest jesień (selected="selected").

Tworzenie przycisku wysyłajacego i resetującego:

<p>
<input type="submit" value="Wyślij">
<input type="reset" value="Zacznij od początku">
</p>

Wartość value jest napisem wyświetlanym na przycisku.

A oto otrzymany email: