Ramy formularza <form>

<form action="mailto:adres e-mail gdzie wysłać formularz" method="post">
	(Tutaj umieszcza się pola formularza)
</form>

<form action="mailto:adres e-mail?subject=temat" method="post">
	(Tutaj umieszcza się pola formularza)
</form>

UWAGA!
Formularzy nie można zagnieżdżać, tzn. umieszczać jednego w drugim.
W przypadku użycia Strict DTD, wewnątrz znaczników <form>...</form> muszą się znaleźć dodatkowe znaczniki obejmujące wszystkie elementy formularza. Znacznikami obejmującymi mogą być: div, p, fieldset, h1, h2, h3, h4, h5, h6, pre, address, ins, del.

Użytkownicy, którzy nie skonfigurowali w swoim systemie operacyjnym programu pocztowego, nie będą mogli wysyłać tego typu formularzy! Rozwiązaniem może być użycie dowolnego darmowego komponentu automatycznie wysyłającego formularz albo zastosowanie skryptu np. PHP. Zapoznaj się również z punktem pt. Alternatywny sposób wysłania formularza.

Każdy formularz składa się z różnych typów pól, dzięki którym użytkownik może wprowadzać dane. Są to np. pola do wpisywania tekstu, czy też pozwalające wybrać jedną, bądź kilka, z podanych opcji. Pola działające w analogiczny sposób, występują prawie w każdym programie komputerowym, dlatego użytkownicy nie powinni mieć problemów z wypełnieniem formularza na stronie WWW.

Pomiędzy podanymi wyżej znacznikami (<form> oraz </form>), mieszczą się wszystkie inne polecenia, dotyczące formularza (pola do wprowadzania danych). Każdy taki formularz musi rozpoczynać się od znacznika otwierającego <form>, a kończyć się znacznikiem zamykającym </form>, chyba że nie chcesz z nim nic robić (nigdzie go wysłać), ale po co Ci taka "atrapa". Dlatego staraj się o tym nie zapominać!

Dla zaawansowanych

Jako wartość atrybutu action="..." można również podać adres skryptu PHP lub CGI (jeśli znajduje się on na tym samym serwerze, wystarczy podać względną ścieżkę dostępu). Skrypt taki stanowi specjalny program, wykonywany wprost na stronie WWW (na serwerze). Potrafi on, zgodnie z poleceniami programisty, przetworzyć wszystkie dane i np. zapisać je w oddzielnym pliku. W ten sposób oszczędzamy sobie wiele pracy, a wyniki mogą zostać natychmiastowo wyświetlone na ekranie - nie trzeba tego wykonywać ręcznie. Jednak pisanie skryptów PHP lub CGI, jest dużo bardziej skomplikowane niż tworzenie stron za pomocą prostego HTML. Dodatkowo nie wszystkie serwery WWW obsługują takie skrypty 🙁

PHP i CGI to tzw. skrypty wykonywane po stronie serwera. Cechują się one m.in. tym, że potrafią zapisywać dane w zewnętrznych plikach. Oprócz nich istnieją jeszcze skrypty wykonywane po stronie klienta (np.: JavaScript lub Visual Basic - VBScript). Są one obsługiwane przez przeglądarkę użytkownika - na jego komputerze - dlatego mogą być wykonywane nawet bez dostępu do Internetu. Również i one obsługują formularze, lecz nie potrafią zapisywać danych w pliku.

Jeśli wysyłamy formularz do skryptu PHP lub CGI, jako wartość atrybutu method="..." możemy również podać: "get". Dzięki temu dane zostaną dołączone do adresu wywołania. Sposób ten stosuje się często dla bardzo krótkich formularzy. Natomiast jeżeli używamy formularza w skrypcie JavaScript bez wysyłania go nigdzie, atrybut method="..." nie jest konieczny.

Przykład <form onsubmit>

Przy użyciu JavaScript'u można wprowadzić interaktywny formularz. Po wpisaniu:

<form action="..." onsubmit="alert(this.tekst.value); return false">
<input type="text" name="tekst"><input type="submit" value="OK">
</form>

Innym ważnym zastosowanie skryptów wykonywanych po stronie klienta, jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem:

<form action="mailto:adres e-mail" method="post" onsubmit="if (this.tekst2.value == '') { alert('Zanim wyślesz formularz, musisz wypełnić pole tekstem!'); return false }">
<input type="text" name="tekst2"><input type="submit" value="OK">
</form>

Sprawdzenie pól formularza <form onsubmit>

Przed wysłaniem formularza możliwe jest również sprawdzenie wszystkich pól, do których można wpisać tekst. Jeśli dane te są obowiązkowe, a użytkownik ich nie wpisze, formularz nie zostanie wysłany:

<script>
function sprawdz(formularz)
{
	for (i = 0; i < formularz.length; i++)
	{
		var pole = formularz.elements[i];
		if (!pole.disabled && !pole.readonly && (pole.type == "text" || pole.type == "password" || pole.type == "textarea") && pole.value == "")
		{
			alert("Proszę wypełnić wszystkie pola!");
			return false;
		}
	}
	return true;
}
</script>

<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="if (sprawdz(this)) return true; return false">
<div>
	<input type="text" name="a"><br>
	<input type="password" name="b"><br>
	<textarea name="c" cols="20" rows="10"></textarea><br>
	<input type="submit" value="OK">
</div>
</form>

Przykład <form onsubmit>

Naciśnij OK, bez wypełniania wszystkich pól:

Ankieta

Wiele osób pyta, w jaki sposób można stworzyć ankietę, której wyniki byłyby natychmiastowo wyświetlane na stronie. Pozwalają tego dokonać właśnie skrypty wykonywane po stronie serwera (np. PHP lub CGI, ale nie JavaScript). Pisze się wtedy specjalny program, który przyjmuje głosy użytkowników (za pomocą formularza), a następnie zapisuje je w zewnętrznym pliku na serwerze. Potem jeśli chcemy wyświetlić wyniki, wystarczy odczytać ten plik i wypisać dane na stronie. W celu prezentacji wyników można użyć np. wykresu słupkowego. Niestety pisanie skryptów PHP lub CGI jest bardziej skomplikowane niż sam HTML.

Aby się przekonać, czy Twój serwer obsługuje skrypty PHP lub/i CGI (konieczne do stworzenia "automatycznej" ankiety), poszukaj informacji na stronie domowej serwera lub wyślij e-mail do administratora.

Dużo prościej jest jednak skorzystać z gotowych darmowych ankiet (sond), oferowanych za darmo w wielu serwisach. Garść adresów znajdziesz w rozdziale: Darmowe komponenty.