• 
  Formularz na stronie internetowej

  Do czego są przydatne formularze elektroniczne na stronach WWW?

• 
  Ramy formularza HTML <form>

  Jak wstawić formularz na stronę WWW? Co można uzyskać obsługując formularze przez skrypty? W jaki sposób sprawdzić, czy użytkownik wypełnił wszystkie pola formularza?

• 
  Pole tekstowe <input "text">

  Jak wprowadzić pole tekstowe, w którym można wpisać np. imię i nazwisko? W jaki sposób zablokować pole przed wpisywaniem? Jak zmienić kolejność aktywowania elementów przy pomocy tabulatora?

• 
  Hasło <input "password">

  Jak wprowadzić pole, w którym można wpisać hasło?

• 
  Pole wyboru <input "checkbox">

  Jak dać użytkownikowi możliwość wyboru kilku bądź jednej odpowiedzi? W jaki sposób zaznaczyć pole wyboru po kliknięciu tekstu opisu? W jaki sposób zdefiniować klawisz skrótu? Jak odblokować pole formularza dopiero po wybraniu określonej opcji?

• 
  Pole opcji <input "radio">

  Jak wprowadzić na stronę WWW "przełącznik" (pole opcji)?

• 
  Lista rozwijalna <select, option, optgroup>

  Jak wprowadzić rozwijane menu?

• 
  Obszar tekstowy <textarea>

  Jak wprowadzić wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz?

• 
  Selektor plików <input "file">

  W jaki sposób umożliwić użytkownikowi wybranie pliku ze swojego dysku lokalnego?

• 
  Ukryte dane <input "hidden">

  Jak przesłać ukryte dane w formularzu?

• 
  Wysłanie formularza <input "submit, image">

  Jak wysłać formularz?

• 
  Wyczyszczenie danych <input "reset">

  Jak wyczyścić wszystkie wprowadzone dane w formularzu? W jaki sposób zapobiec omyłkowemu wyczyszczeniu danych formularza?

• 
  Przycisk <button>

  Jak wprowadzić przycisk na stronę WWW?

• 
  Grupowanie pól <fieldset, legend>

  W jaki sposób zgrupować tematycznie klika pól formularza?

• 
  Forma odszyfrowana <form enctype accept-charset>

  Co zrobić, aby formularze były przesyłane w formie odszyfrowanej, którą łatwiej później odczytać? Jak usunąć polskie znaki z formularza?

• 
  Przykład formularza HTML

  Jak wygląda przykładowy formularz HTML?

• 
  Alternatywny sposób wysłania formularza

  W jaki sposób zabezpieczyć się przed błędem w niektórych systemach operacyjnych, uniemożliwiającym wysyłanie formularzy pocztowych?

• 
  Wysłanie formularza bez programu pocztowego

  Jak wysłać formularz na wskazany adres e-mail bez używania programu pocztowego?

• 
  Pytania i odpowiedzi

  HTML

• 
  Powtórka

  HTML

• 
  Quiz i certyfikat ukończenia

  HTML

• 
  Ćwiczenia

  HTML

Dzięki formularzom, które są umieszczane bezpośrednio na stronie WWW, możesz uzyskać wiele informacji o użytkownikach odwiedzających Twój serwis. Służą one również do zamawiania różnych towarów w sklepach internetowych, chociaż wtedy należy dodatkowo zadbać o bezpieczeństwo przesyłanych danych. Prosty formularz pocztowy przedstawiony w tym rozdziale, na pewno nie jest odpowiedni do przesyłania np. numerów kart kredytowych, ważnych haseł dostępu czy innych poufnych danych! Bezpieczestwo można uzyskać przy pomocy skryptów wykonywanych po stronie serwera oraz protokołu SSL.

Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie. Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Taki formularz może być przesłany pocztą elektroniczną e-mail (prosty formularz pocztowy) i odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Są to zarówno aplikacje w postaci programów instalowanych tradycyjnie, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce (np. PHP).

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 zainteresowanych
Istnieje pewien sposób, aby można było przypisać do formularza nawet takie pola, które znajdują się poza nim: HTML5 / Przypisanie pola do formularza. Jednak jeśli to tylko możliwe, zalecam raczej korzystanie z podstawowej metody.

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>

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat wbudowanych funkcji do sprawdzania poprawności wypełnienia formularza, zobacz rozdział HTML5: Walidacja pól formularza, Pole obowiązkowe.

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.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<form>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<form action>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<form enctype>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<form method>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<form name>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26

Pole tekstowe <input "text">

<form action="...">
	<input type="text" name="nazwa">
</form>

<form action="...">
	<input name="nazwa">
</form>

Atrybut name="...", powinien być unikalny w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy.

Typ "text" jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie.

UWAGA! Wszystkie pola (dowolnego typu), które mają się znaleźć w formularzu, należy umieszczać pomiędzy tymi samymi znacznikami <form> oraz </form> (zobacz: Ramy formularza). Oczywiście w pojedynczym dokumencie można umieścić kilka formularzy - wtedy wstawiamy klika znaczników <form>...</form>, dla każdego formularza osobno.

Przykład <input "text">

Zwróć uwagę, że po kliknięciu myszką wewnątrz poniższego pola, możesz wpisać tam jakiś tekst.

Odpowiedź domyślna <input "text" value>

<input type="text" name="nazwa" value="odpowiedź domyślna">

Przykład <input "text" value>

Długość pola <input "text: size>

<input type="text" name="nazwa" size="k">

Przykład <input "text" size>

Maksymalna ilość znaków, które można wpisać do pola <input "text" maxlength>

<input type="text" name="nazwa" maxlength="n">

W języku HTML5 możliwe jest również ustalenie minimalnej długości pola: minlength="...".

Przykład <input "text" maxlength>

Pole tylko do odczytu <input "text" readonly>

<input type="text" name="nazwa" readonly>

Wstawienie atrybutu readonly powoduje, że tekstu zapisanego domyślnie w tym polu (atrybut value="odpowiedź domyślna"), nie będzie można modyfikować. Wartość pola jest jednak normalnie przesyłana w formularzu.

Przykład <input "text" readonly>

Blokada pola <input "text" disabled>

<input type="text" name="nazwa" disabled>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <input "text" disabled>

Tabulator <input "text" tabindex>

Wiele osób wypełniając formularze przenosi się do kolejnych pól nie za pomocą myszki, ale klawisza tabulatora (Tab), a powraca do poprzedniego pola za pomocą kombinacji Shift+Tab. Taki sposób wypełniania formularzy znacznie przyspiesza proces, ponieważ nie trzeba się odrywać od klawiatury, aby przenieść dłoń na myszkę.

Normalnie porządek aktywacji kolejnych pól formularza z użyciem tabulatora jest zgodny z porządkiem umieszczenia kontrolek formularza w kodzie źródłowym strony. Zwykle jest to zupełnie naturalna kolejność. Czasami jednak chcielibyśmy ją zmienić. Na przykład wyobraźmy sobie, że pola formularza są umieszczone w kilku kolumnach i wierszach tabeli. W takim przypadku kolejność aktywacji będzie następowała wierszami (poziomo), ponieważ w takiej kolejności są umieszczone komórki tabeli w kodzie źródłowym. Jeśli jednak ze względu na budowę naszego formularza logiczniej by było aktywować kontrolki kolumnami (pionowo), można to zrobić dodając dla wszystkich pól odpowiedni atrybut tabindex="...":

<input type="text" name="nazwa" tabindex="n">

Przy ustalaniu ostatecznej kolejności aktywacji istnieje kilka zasad:

1. Elementy z atrybutem tabindex="0" (zero) zachowują się identycznie, jakby w ogóle nie miały przypisanego tego atrybutu.
2. Elementy bez atrybutu tabindex="..." są aktywowane zawsze po tych, które posiadają niezerową wartość tego atrybutu - w kolejności występowania w kodzie źródłowym dokumentu.
3. Elementy z taką samą wartością tabindex="..." są aktywowane w kolejności występowania w kodzie źródłowym.
4. Możliwe jest opuszczanie wybranych liczb w numeracji tabindex="...". Nie ma również wymogu rozpoczynania numeracji od 0 ani od 1.
5. Elementy zablokowane atrybutem disabled nie są uwzględniane w porządku aktywacji, ponieważ w ogóle nie można ich wybrać.
6. Elementy tylko do odczytu (readonly) są normalnie aktywowane, ale oczywiście nie można do nich nic wpisać.

Atrybut tabindex="..." można zastosować dla znaczników: A, AREA, BUTTON, TEXTAREA, SELECT, INPUT oraz OBJECT.

Przykład <input "text" tabindex>

Aktywacja elementów kolumnami, a nie wierszami:

<table>
<tr>
	<td><input type="text" name="nazwa1" tabindex="1"></td>
	<td><input type="text" name="nazwa4" tabindex="4"></td>
	<td><input type="text" name="nazwa7" tabindex="7"></td>
</tr>
<tr>
	<td><input type="text" name="nazwa2" tabindex="2"></td>
	<td><input type="text" name="nazwa5" tabindex="5"></td>
	<td><input type="text" name="nazwa8" tabindex="8"></td>
</tr>
<tr>
	<td><input type="text" name="nazwa3" tabindex="3"></td>
	<td><input type="text" name="nazwa6" tabindex="6"></td>
	<td><input type="text" name="nazwa9" tabindex="9"></td>
</tr>
</table>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="text">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Hasło <input "password">

<form action="...">
	<input type="password" name="nazwa">
</form>

Wprowadza pole, w którym można wpisać hasło. Od zwykłego pola tekstowego różni się tylko tym, że podczas wpisywania do niego tekstu, nie są widoczne podawane znaki, ale jedynie gwiazdki ("*"). Można również stosować dokładnie te same atrybuty, chociaż podanie hasła domyślnego, może nie być dobrym pomysłem :-).

Przesyłanie ważnych haseł dostępu w zwykłym formularzu pocztowym nie jest bezpieczne, ponieważ formularz taki nie jest szyfrowany. Niesie to ze sobą niebezpieczeństwo, że wiadomość w drodze do adresata może zostać przechwycona i odczytana przez osoby niepowołane.

Dla zaawansowanych
Można natomiast zaszyfrować cały formularz, podczas przesyłania go do skryptu, pracującego na serwerze. Aby to zrobić, należy adres skryptu (atrybut ACTION dla znacznika FORM) poprzedzić przez: "https://" (należy podać całkowity adres, a nie względną ścieżkę dostępu). Spowoduje to nawiązanie połączenia przez bezpieczny protokół SSL. Niestety nie wszystkie serwery obsługują takie połączenie :-(

Przykład <input "password" size maxlength value readonly disabled>

Zwróć uwagę, że wpisywane znaki są automatycznie zastępowane gwiazdkami.

Strona na hasło

Wykorzystując pole typu "password" można w prosty sposób zabezpieczyć wybraną stronę hasłem. W tym celu wystarczy na stronie głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod:

<form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false">
	<input type="password" name="password">
	<input type="submit" value="OK">
</form>

Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć. Przykładowo: hasłem do strony tajna_strona.html (która znajduje się w tym samym katalogu co strona główna, czyli tam gdzie wstawiliśmy powyższy skrypt) będzie tajna_strona

Należy przy tym pamiętać, że zabezpieczane strony muszą mieć rozszerzenie *.html, a jeśli to niemożliwe, należy zmienić pierwszą linijkę powyższego skryptu w wyróżnionym miejscu. Nie muszę chyba przypominać, że link do takiej strony nie może pojawić się w żadnym miejscu serwisu ani na żadnej innej stronie, bo wtedy zabezpieczanie będzie zupełnie bezużyteczne, skoro dowolny użytkownik i tak będzie mógł wejść na "chronioną" stronę po prostu klikając w taki link. Jeśli nazwa strony nie będzie publicznie prezentowana, to nikt bez znajomości hasła (czyli w rzeczywistości nazwy ukrytej strony) nie będzie mógł się na nią dostać.

Oczywiście nic nie stoi na przeszkodzie, aby zabezpieczyć w ten sposób kilka różnych stron - każdą innym hasłem. Nie można zabezpieczyć jednak dwóch podstron tym samym hasłem, ponieważ każdy plik musi mieć inną nazwę. Aby zaimplementować taki mechanizm - logowanie i ewentualnie rejestrację nowych użytkowników - trzeba się posłużyć bardziej zaawansowanym skryptem obsługiwanym po stronie serwera, np. w języku PHP.

UWAGA!
Jeśli do komputera z którego korzystają użytkownicy posiadający hasło mają dostęp również inne osoby (np. użytkownicy wchodzą na zabezpieczone strony z kafejki internetowej), po zakończeniu pracy trzeba koniecznie wyczyścić tymczasowe pliki internetowe (tzw. cache przeglądarki) oraz historię w przeglądarce, która była używana. Jeśli nie zostanie to zrobione, zabezpieczenie w ogóle nie będzie skuteczne!

Ponadto konieczne jest, aby w katalogu w którym znajduje się strona chroniona hasłem umieścić plik "index.html", ponieważ bez niego na niektórych serwerach będzie można zobaczyć zawartość katalogu, a tym samym nazwę ukrytej strony, która jest jednocześnie hasłem. Plik "index.html" może być nawet pusty - ważne jest, żeby się znajdował w tym samym katalogu co tajny dokument!

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="password">	1 2008-12-11	1 2004-11-09	12 2015-07-29	2 1996-07-14	1 2003-06-23

Pole wyboru <input "checkbox">

<form action="...">
	<input type="checkbox" name="nazwa" value="wartość">Tu wpisz opis pola
</form>

Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!

Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi.

Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikalny identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.
Jeżeli wysyłasz formularz do skryptu po stronie serwera (np. PHP lub CGI), może to wymagać nadania innej nazwy (atrybut name="...") dla każdego pola tego typu, nawet jeśli dotyczą one tego samego pytania. Jeśli chodzi o PHP jako nazwy wszystkich pól tego samego pytania można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych elementów (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile pól zostanie zaznaczonych).

Przykład <input "checkbox">

Zwróć uwagę, że możesz zaznaczyć więcej niż jedno pole tego typu lub nawet nie zaznaczać żadnego. Zaznaczone pole możesz także "odznaczyć", powtórnie klikając na nie myszką:

Domyślne zaznaczenie pola <input "checkbox" checked>

<input type="checkbox" name="nazwa" value="wartość" checked>Opis pola

Podanie atrybutu checked powoduje domyślne zaznaczenie pola. Możliwe jest zaznaczenie kilku pól tego typu, które dotyczą tego samego pytania.

Przykład <input "checkbox" checked>

Blokada pola <input "checkbox" disabled>

<input type="checkbox" name="nazwa" value="wartość" disabled>Opis pola

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <input "checkbox" disabled>

Etykieta <label>

Opis pola nie jest z nim w żaden sposób związany logicznie. Aby to zmienić, należy użyć dodatkowego znacznika <label>...</label>, wewnątrz którego wpisujemy opis kontrolki formularza, który ma być z nią związany:

<label><input type="checkbox" name="nazwa" value="wartość">
To jest etykieta pola obok</label>

<input type="checkbox" name="nazwa" value="wartość" id="pole1">
<label for="pole1">To jest etykieta pola obok</label>

Polecenie takie wprowadza na ekran etykietę z tekstowym opisem pola, która jest z nim skojarzona logicznie. Dzięki temu kliknięciu etykiety powoduje zwykle taki sam efekt jak kliknięcie samego pola, tzn. jego zaznaczenie lub odznaczenie, a dodatkowo wskazanie etykiety myszką może spowodować "podświetlenie" pola. Tekst etykiety może się znajdować przed lub za elementem formularza, do którego się odnosi.

Zwykle zupełnie wystarczający jest pierwszy z podanych sposobów przypisywania etykiety. Wyobraźmy sobie jednak sytuację, kiedy elementy formularza są umieszczone w tabeli w taki sposób, że w pierwszej kolumnie każdego wiersza znajdują się opisy (etykiety), a w drugiej - pola. W takim przypadku nie można objąć znacznikiem <label>...</label> zarówno tekstu opisu jak i pola formularza, ponieważ etykieta musiałaby obejmować dwie różne komórki tabeli, co jest niedozwolone. W takim właśnie przypadku należy wykorzystać drugi z wymienionych sposobów - z podaniem identyfikatora id="..." i odniesieniem do niego for="...". Zwróć uwagę, że wartości wyróżnionych atrybutów muszą być takie same dla etykiety oraz dla pola, którego dotyczy. Ponadto w jednym dokumencie nie mogą znajdować się dwa pola o takim samym identyfikatorze (atrybut id="...").

Etykiety można przypisywać do wszystkich typów pól formularza.

UWAGA! Etykiet nie można zagnieżdżać, tzn. umieszczać jednej wewnątrz drugiej.

Przykład <label, input "checkbox">

(spróbuj kliknąć opisy powyższych pól)

Klawisz skrótu <input "checkbox" accesskey>

Możliwe jest przypisanie klawisza skrótu do danego pola (atrybut accesskey="klawisz"). Jeśli wciśniemy na klawiaturze kombinację Alt+klawisz (w przeglądarce Opera należy wcisnąć Shift+Esc+klawisz), zogniskowanie zostanie przeniesione do danego pola. Jeżeli będzie to pole tekstowe, pojawi się w nim kursor tekstowy, natomiast dla pola wyboru (oraz opcji) spowoduje to jego zaznaczenie/odznaczenie. O dostępnych klawiszach skrótu informuje się zwykle poprzez podkreślenie litery w opisie pola, która stanowi skrót:

<input type="checkbox" name="nazwa" value="wartość" accesskey="a">Pole <u>a</u> (wciśnij Alt+A; jeśli używasz opery, wciśnij Shift+Esc+A)

Atrybut accesskey="..." można zastosować dla znaczników: A, AREA, BUTTON, LABEL, LEGEND, TEXTAREA oraz INPUT.

Przykład <input "checkbox" accesskey>

Dynamiczne blokowanie pól formularza

Zdarza się, że niektóre pola powinny stać się dostępne dopiero po zaznaczeniu określonej opcji wyboru, np. kiedy w formularzu umieszczona jest grupa pól wyboru, z których jedno nosi nazwę "Inne", a obok znajduje się pole tekstowe do wpisania innej możliwości przez użytkownika, ale tylko gdy wcześniej zostanie zaznaczone to pole wyboru. Normalnie istnieje możliwość wpisania przez użytkownika tekstu w to pole, ale bez zaznaczenia odpowiedniej opcji wyboru "Inne". Lepiej by było, aby pole tekstowe było zablokowane, dopóki użytkownik nie zaznaczy tego pola wyboru. Statyczny HTML nie udostępnia takich możliwości, jednak problem daje się łatwo rozwiązać za pomocą JavaScript:

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>

Przykład <input "checkbox" onclick>

Po wybraniu opcji, pole tekstowe zostanie odblokowane:

Możliwe jest również odblokowanie kilku pól naraz (dowolnych typów):

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>
<input type="text" name="nazwa3" disabled>

Po wybraniu opcji, oba pola tekstowe zostaną odblokowane:

Czasem w formularzach mamy do czynienia z sytuacją odwrotną, tzn. jakieś pole lub kilka pól tekstowych (albo dowolnych innych typów) powinny stać się niedostępne po zaznaczeniu określonej opcji wyboru. Na przykład nie ma sensu pytać użytkownika o dalsze szczegóły dotyczące jego samochodu, gdy wcześniej zaznaczy opcję, że nie posiada własnego pojazdu.

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.checked">
<input type="text" name="nazwa2">

Po wybraniu opcji, pole tekstowe zostanie zablokowane:

Podobnie jak w poprzednim przypadku, możliwe jest zablokowanie kilku pól naraz (dowolnych typów):

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<input type="text" name="nazwa2">
<input type="text" name="nazwa3">

Po wybraniu opcji, oba pola tekstowe zostaną zablokowane:

Dynamiczne ukrywanie pól formularza

Samo blokowanie niepotrzebnych pól formularza w większości przypadku jest zupełnie wystarczające. Czasem jednak formularze są na tyle skomplikowane, że wyświetlanie wszystkich zablokowanych pól znacznie zaciemniłoby i bardzo utrudniło poprawne wypełnienie danych. W takiej sytuacji lepiej wyświetlić określona pola, dopiero gdy będą potrzebne, tzn. gdy użytkownik zaznaczy odpowiednią opcję wyboru:

<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<div id="identyfikator" style="display: none">
	<input type="text" name="nazwa2" disabled>
	<input type="text" name="nazwa3" disabled>
</div>

Przykład <input "checkbox" onclick>

Tym sposobem, razem z polami tekstowymi (lub innych typów), możemy ukrywać również dowolne inne treści, jak np. etykiety tekstowe itp.

Ukrywanie elementów po wybraniu opcji:

<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'none' : 'block'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<div id="identyfikator">
	<input type="text" name="nazwa2">
	<input type="text" name="nazwa3">
</div>

W jednym dokumencie nie mogą znajdować się dwa elementy o tym samym identyfikatorze - atrybut id="..."!

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="checkbox">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Pole opcji <input "radio">

<form action="...">
	<input type="radio" name="nazwa" value="wartość">Tu wpisz opis pola
</form>

Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!

Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikalny identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.

Polecenie to spowoduje wyświetlenie okrągłego pola, które możesz zaznaczać myszką (pole opcji). W przypadku gdy istnieje więcej takich pól, jako możliwości odpowiedzi na to samo pytanie, możliwe jest zaznaczenie tylko i wyłącznie jednego z nich. Raz zaznaczone pole tego typu, można "odznaczyć" tylko poprzez zaznaczenie innego z podanych możliwości.
Polecenie to pozwala stworzyć pytanie z kilkoma możliwościami odpowiedzi, z których można wybrać tylko jedną, ponieważ np. wybranie dwóch jednocześnie, jak w przypadku checkbox, byłoby nielogiczne.

Do pola tego typu można również przypisać etykietę oraz klawisz skrótu.

Przykład <input "radio">

Zwróć uwagę, że możesz zaznaczyć (myszką) tylko jedno pole. Jeśli chcesz je "odznaczyć", musisz wybrać inną możliwość:

Domyślne zaznaczenie pola <input "radio" checked>

<input type="radio" name="nazwa" value="wartość" checked>Opis pola

Podanie atrybutu checked powoduje domyślne zaznaczenie pola.

Oczywiście nie można zaznaczyć domyślnie dwóch pól tego typu, jako odpowiedzi na to samo pytanie, co wynika z ich sposobu działania.

Przykład <input "radio" checked>

Blokada pola <input "radio" disabled>

<input type="radio" name="nazwa" value="wartość" disabled>Opis pola

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <input "radio" disabled>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="radio">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Lista rozwijalna <select, option, optgroup>

<form action="...">
	<select name="nazwa">
		<option>Tu wpisz pierwszą możliwość</option>
		<option>Tu wpisz drugą możliwość</option>
		(...)
	</select>
</form>

Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <option>...</option>, można wprowadzić dla tych znaczników dodatkowe atrybuty value="wartość". Ich treść może się różnić od tekstu wpisanego po znaczniku <option>...</option>. Atrybuty value="..." są obowiązkowe, jeśli zamierzamy wykorzystać formularz w skrypcie.

Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. Każdy znacznik <option>...</option> odpowiada jednej opcji na liście. Możliwe jest oczywiście wprowadzenie więcej niż dwóch opcji wyboru (w miejsce kropek).

UWAGA! W zawartości elementu OPTION nie można wpisywać żadnych znaczników.

Przykład <select, option>

Zwróć uwagę, że po kliknięciu tego pola, rozwija się menu, z którego możesz wybrać jedną z kilku opcji.

Możliwość wyboru kilku opcji (typ rozszerzony) <select multiple>

<select name="nazwa" multiple>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Dla zaawansowanych
Aby odebrać wszystkie zaznaczone opcje w skrypcie PHP, jako nazwę pola można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych opcji (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile opcji zostanie zaznaczonych).

Przykład <select multiple, option>

Dodatkowe możliwości wybiera się trzymając wciśnięty klawisz Ctrl ("Control") lub przeciągając myszką:

Z zaznaczoną domyślnie opcją <option selected>

<select name="nazwa">
	<option>Tu wpisz pierwszą możliwość</option>
	<option selected>Tu wpisz drugą możliwość<option>
</select>

Aby można było zaznaczyć kilka opcji domyślnych, koniecznie należy zastosować typ rozszerzony (MULTIPLE)!

Przykład <select, select multiple, option selected>

Zwróć uwagę, że w poniższym "okienku" jest zaznaczona domyślnie Możliwość 2, a nie jak poprzednio Możliwość 1:

O określonej wysokości pola <select size>

<select name="nazwa" size="w">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Przykład <select size, option>

Zauważ, że jeśli wysokość pola jest większa niż ilość opcji, to nie pojawia się suwak do jego przewijania:

Blokada pola <select disabled>

<select name="nazwa" disabled>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <select disabled, option, option selected>

Grupy opcji <optgroup>

<select name="nazwa">
<optgroup label="nazwa grupy">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</optgroup>
</select>

Czasem zachodzi potrzeba wizualnego zgrupowania kilku opcji listy rozwijalnej. Można oczywiście próbować wstawiać pomiędzy kolejne grupy znaczniki OPTION zawierające np. kilka znaków myślnika lub po prostu pustą zawartość. Niestety opcje takie tak naprawdę niczym nie będą różniły się od pozostałych, tzn. będzie je można normalnie wybrać. Można jednak dokonać grupowania za pomocą osobnego znacznika OPTGROUP. Pojawi się on w postaci nagłówka nad opcjami, które zawiera. Będzie wyróżniony wizualnie i nie będzie możliwe jego wybranie. Jedna lista rozwijalna może zawierać dowolną liczbę grup opcji, ale nie można ich zagnieżdżać, tzn. umieszczać jednej grupy wewnątrz innej.

Wygląd nagłówka grupy opcji może różnić się w zależności od przeglądarki. Na przykład może zostać on wyświetlony czcionką pogrubioną, pochyloną albo wyróżniony w jeszcze inny sposób.

Przykład <select, optgroup, option>

Rozwiń listę, aby zobaczyć grupy opcji (zwróć uwagę, że nie możesz wybrać nagłówka grupy):

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<optgroup>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<optgroup disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<optgroup label>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option label>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option selected>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<option value>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<select>	1 2008-12-11	1 2004-11-09	12 2015-07-29	2 1996-07-14	1 2003-06-23
<select disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select form>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select multiple>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select name>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<select size>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26

Obszar tekstowy <textarea>

<form action="...">
	<textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea>
</form>

Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy). Pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. Można także podać między znacznikami <textarea> a </textarea> treść domyślną, która pojawi się w tym polu (możliwe jest oczywiście jej późniejsze wymazanie przez użytkownika).

Wewnątrz <textarea>...</textarea> (w treści domyślnej) nie można wpisywać żadnych znaczników. Przejście do następnej linii następuje poprzez klawisz Enter. Uwzględniane są dodatkowe spacje oraz tabulacja.

Przykład <textarea>

To jest przykład pola komentarza bez podania treści domyślnej:

Pole tylko do odczytu <textarea readonly>

<textarea name="nazwa" cols="x" rows="y" readonly>...</textarea>

Wstawienie atrybutu readonly powoduje, że tekstu zapisanego domyślnie w tym polu, nie będzie można modyfikować.

Przykład <textarea readonly>

Blokada pola <textarea disabled>

<textarea name="nazwa" cols="x" rows="y" disabled>...</textarea>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <textarea disabled>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<textarea>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea cols>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea form>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea name>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea readonly>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08
<textarea rows>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	≤4 2009-06-08

Selektor plików <input "file">

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa">
</form>

Polecenie wprowadza selektor plików, składający się z dwóch pól:

1. pola tekstowego, w którym wpisuje się ścieżkę dostępu do pliku,
2. przycisku, po naciśnięciu którego, można przeszukać dysk, aby odnaleźć plik.

Selektor plików został wprowadzony teoretycznie po to, aby można było przesłać wybrany plik w załączniku do listu (formularza). Wtedy dla znacznika <form>...</form> należałoby dodatkowo użyć atrybut enctype="multipart/form-data". Niestety nowe przeglądarki generalnie nie interpretują tego polecenia w przypadku prostego formularza pocztowego.

Dla zaawansowanych
Wysyłanie plików w załączniku jest natomiast obsługiwane m.in. przez PHP (należy wtedy dla znacznika <form>...</form> konieczne podać atrybut: enctype="multipart/form-data").

W języku HTML5 możliwe jest ustawienie opcji pozwalającej na wybór wielu plików jednoczenie (przy pomocy klawisza Shift lub/i Ctrl). W tym celu do znacznika wystarczy przypisać dodatkowy atrybut logiczny (podawany bez wartości):

<input type="file" multiple>

Przykład <input "file">

Zwróć uwagę, że po kliknięciu przycisku, otwiera się okienko z systemowym selektorem plików, a jeśli wybierzesz w nim jakiś plik, to w polu tekstowym pojawi się bezwzględna ścieżka dostępu do niego.

Długość pola (tekstowego) <input "file" size>

<input type="file" name="nazwa" size="k">

Przykład <input "file" size>

Blokada pola <input "file" disabled>

<input type="file" name="nazwa" disabled>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input "file" disabled>

Filtr typu plików <form accept, input "file" accept>

<form action="..." enctype="multipart/form-data" accept="lista typów">
	<input type="file" name="nazwa">
</form>

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa" accept="lista typów">
</form>

Czasami oczekujemy, że użytkownik wyśle nam poprzez formularz konkretny typ pliku - np. obrazek. Możemy oczywiście podać gdzieś w widocznym miejscu informację, że np. przyjmujemy tylko pliki JPG i GIF, jednak taka informacja może zostać łatwo przeoczona. Poza tym skoro spodziewamy się tylko określonych typów plików, nie ma sensu, żeby użytkownik przeglądając swój dysk lokalny musiał się przedzierać przez inne pliki, które akurat znajdują się u niego w tym samym katalogu co pożądane obrazki.

Atrybut accept="..." nie jest wystarczającym zabezpieczeniem przed przesyłaniem niechcianych bądź niebezpiecznych typów plików za pomocą formularza, ponieważ przeglądarki i tak zwykle dają możliwość usunięcia filtru i wybrania dowolnego pliku! Jeżeli do odbierania danych używasz np. PHP, musisz nałożyć dodatkowe zabezpieczenie bezpośrednio w skrypcie.

Typ MIME

Istnieje możliwość określenia - dla całego formularza lub dla każdego selektora plików osobno - jakie typy są dopuszczalne. Niestety nie zawsze wystarczy podać po prostu listę akceptowanych rozszerzeń nazwy pliku, ponieważ teoretycznie to samo rozszerzenie pliku na różnych systemach operacyjnych może oznaczać zupełnie inny typ. Dlatego często korzysta się z tzw. typów MIME, których rejestracją zajmuje się organizacja IANA.

Aby sprawdzić, jaki typ MIME odpowiada danemu rozszerzeniu nazwy pliku, zobacz: Wykaz typów MIME.

Przykład <input "file" accept>

<input type="file" accept="image/jpeg,image/gif">

Wybierz obrazek JPG lub GIF (zwróć uwagę, że pliki innych typów nie powinny być widoczne w selektorze):

Rodzina ogólna

Oprócz tego w języku HTML5 można również określać ogólną rodzinę typu plików:

image/*

Obrazek w dowolnym formacie

audio/*

Muzyka w dowolnym formacie

video/*

Film w dowolnym formacie

Przykład <input "file" accept>

<input type="file" accept="image/*">

Wybierz obrazek w dowolnym formacie:

Rozszerzenie pliku

Język HTML5 pozwala również wprost wskazać rozszerzenie nazwy pliku. W takim przypadku należy jednak pamiętać, aby nazwa rozszerzenia była poprzedzona znakiem kropki (ale bez znaku gwiazdki!).

Przykład <input "file" accept>

<input type="file" accept=".jpeg,.jpg,.jpe">

Wybierz plik w formacie JPG:

Łączenie filtrów

Wszystkie powyższe sposoby można ze sobą łączyć w jednym atrybucie accept="...".

Przykład <input "file" accept>

<input type="file" name="..." accept="image/jpeg,audio/*,.gif">

Wybierz obrazek w formacie JPG, muzykę w dowolnym formacie albo plik w formacie GIF:

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="file">	1 2008-12-11	1 2004-11-09	12 2015-07-29	11 2010-12-16	1 2003-06-23

<form action="...">
	<input type="hidden" name="nazwa" value="wartość">
</form>

Polecenie takie tworzy ukryte pole w formularzu. Nie jest ono widoczne ani dostępne dla użytkownika, ale jego wartość (value="wartość") jest przesyłana wraz z formularzem. Może ono służyć np. dla podania informacji o numerze wersji ankiety, dacie jej ostatniej aktualizacji, adresu strony, z której została wysłana, opisu całego formularza lub też poszczególnych jego pól.

Dla zaawansowanych
Ukryte dane są często wykorzystywane do przekazywania informacji pomiędzy klientem a serwerem (skrypty po stronie serwera), które w przeciwnym razie zostałyby utracone, z uwagi na bezstanowy charakter protokołu HTTP.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="hidden">	1 2008-12-11	1 2004-11-09	12 2015-07-29	2 1996-07-14	1 2003-06-23

Przycisk tekstowy <input "submit">

<form action="...">
	<input type="submit" value="wartość">
</form>

Polecenie wprowadza na ekran przycisk z tekstem, po naciśnięciu którego, nastąpi wysłanie formularza.

Przykład <input "submit">

Blokada pola

<form action="...">
	<input type="submit" value="wartość" disabled>
</form>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input "submit" disabled>

Przycisk obrazkowy <input "image">

<form action="...">
	<input type="image" src="ścieżka dostępu do obrazka" alt="informacja alternatywna">
</form>

Polecenie wprowadza na ekran przycisk w postaci obrazka, po naciśnięciu którego, nastąpi wysłanie formularza. Atrybut alt="..." pozwala podać tekst, który będzie wyświetlony zamiast przycisku w przeglądarkach tekstowych, a także jeśli użytkownik wyłączy w swojej przeglądarce wyświetlanie obrazów.

W języku HTML5 możliwe jest również podanie rozmiarów przycisku obrazkowego: width="..." height="...".

Przykład <input "image">

Możesz kliknąć poniższy obrazek, aby wysłać formularz:

Nazwa przycisku wysłania formularza <input "submit" name>

Pole wysłania formularza posiada ciekawą własność. Mianowicie jeżeli nadamy mu atrybut name="nazwa", wtedy jego wartość zostanie wysłana wraz z formularzem, tak jak to się dzieje w przypadku zwykłych pól przechowujących wpisywane przez użytkownika dane. Nowość polega jednak na tym, że w jednym formularzu może się znajdować kilka różnych pól wysyłających, każde z nich może mieć inną nazwę lub/i wartość, a z formularzem jest wysyłana wartość tylko tego, za pomocą którego został on wysłany - tzn. tego, który został kliknięty. Dzięki temu w niektórych przypadkach prostych formularzy nie trzeba wstawiać dodatkowych pól typu RADIO, a wystarczy umieścić po prostu kilka różnych przycisków wysyłających.
Nie dotyczy to alternatywnego sposobu wysyłania formularzy - wtedy trzeba stosować metody konwencjonalne.

Przykład <input "submit" name>

<form action="mailto:e-mail" method="post">
<input type="submit" name="opcja" value="Opcja 1">
<input type="submit" name="opcja" value="Opcja 2">
<input type="submit" name="opcja" value="Opcja 3">
</form>

Z takim formularzem zostanie wysłana tylko jedna z wartości:

• opcja=Opcja 1
• opcja=Opcja 2
• opcja=Opcja 3

w zależności od tego, który przycisk wciśnie użytkownik. Zatem będzie to równoznaczne z następującym konwencjonalnym formularzem:

<form action="mailto:e-mail" method="post">
<input type="radio" name="opcja" value="Opcja 1">
<input type="radio" name="opcja" value="Opcja 2">
<input type="radio" name="opcja" value="Opcja 3">
<input type="submit" value="wyślij">
</form>

W skryptach np. PHP własność tą często wykorzystuje się do potwierdzania decyzji użytkownika:

<form action="?akcja=kasowanie" method="post">
<input type="hidden" name="id" value="1">
<p>Czy na pewno chcesz to zrobić?</p>
<input type="submit" name="potwierdzenie" value="Tak">
<input type="submit" name="potwierdzenie" value="Nie">
</form>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="submit">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
<input type="image">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Wyczyszczenie danych <input "reset">

<form action="...">
	<input type="reset" value="wartość">
</form>

Komenda wyświetla na ekranie przycisk, po naciśnięciu którego, nastąpi wyczyszczenie wszystkich udzielonych do tej pory odpowiedzi w ankiecie (np. jeśli się rozmyślimy).

Przykład <input "reset">

Wypełnij formularz, a następnie kliknij jeden z poniższych przycisków:

Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony).

Blokada pola <input "reset" disabled>

Możliwe jest także zablokowanie przycisku (nie obsługuje Opera 6):

<form action="...">
	<input type="reset" value="wartość" disabled>
</form>

Przykład <input "reset" disabled>

Potwierdzenie wyczyszczenia formularza <form onreset>

Przed wyczyszczeniem całego formularza, można się upewnić, czy użytkownik na pewno chce to zrobić. Dzięki temu wyeliminujemy możliwość przypadkowego naciśnięcia przycisku "reset". Ma to szczególne znaczenie zwłaszcza w przypadku długich formularzy, przy których ponowne wpisywanie wszystkich danych trwałoby dość długo.

Aby potwierdzić wyczyszczenie formularza, należy do znacznika <form> dodać atrybut onreset="...":

<form action="adres" method="post" onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">...</form>

Przykład <form onreset>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<input type="reset">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

<button type="rodzaj">Treść przycisku</button>

Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis">. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić dodatkowe znaczniki pomiędzy <button> a </button> (w miejsce treści przycisku). Można również dowolnie formatować tekst, np. wprowadzając pogrubienie, pochylenie i inne.

W przypadku zastosowania type="button" na ekranie pojawi się przycisk, po kliknięciu którego nie nastąpi żadna akcja. Aby to zmienić, należy przechwycić wygenerowane zdarzenie onclick.

Jeśli przycisk posiada atrybut name="...", jego wartość powinna zostać wysłana razem z formularzem. W przypadku wstawienia kilku takich przycisków, oprócz standardowych pól z formularzem powinna być wysłana wartość tylko tego przycisku, który został kliknięty.

UWAGA! Element BUTTON nie może zawierać znaczników: A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET.

Przykład <button>

Treść przycisku:

pogrubienie
pochylenie
podkreślenie
czcionka 'Courier New'
kolor czerwony
mała czcionka
Wykaz:

• Punkt pierwszy
• Punkt drugi

Przykład z obrazkiem:


Przykład z tabelką:

komórka1	komórka2
komórka3	komórka4

Przycisk zablokowany!Ten przycisk jest zablokowany - disabled (nie obsługuje Opera 6).

W niektórych systemach operacyjnych i przeglądarkach wygląd przycisków o dużych rozmiarach może być bardzo nieestetyczny!

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<button>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤15 2013-07-02	1 2003-06-23
<button disabled>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<button form>	9 2011-02-03	4 2011-03-22	16 2017-10-17	15 2013-07-02	5.1 2011-07-20
<button name>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<button type>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08
<button value>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	≤4 2009-06-08

1. Wersja podstawowa:

   <fieldset>
   	(Pola formularza)
   </fieldset>

2. Wersja z tytułem:

   <fieldset>
   <legend>Tytuł</legend>
   	(Pola formularza)
   </fieldset>

Pozwala zgrupować tematycznie kilka pól formularza, dzięki czemu zostają one objęte ramką. Wygląd ramki grupującej może się różnić w zależności od przeglądarki. W drugiej z podanych wersji powoduje pojawienie się tytułu na ramce grupującej.

UWAGA! Znacznik <legend>...</legend> (tytuł ramki grupującej) musi znajdować się bezpośrednio po znaczniku otwierającym <fieldset> oraz nie może zawierać elementów blokowych.

Przykład <fieldset, legend>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<fieldset>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤15 2013-07-02	≤4 2009-06-08
<legend>	1 2008-12-11	1 2004-11-09	12 2015-07-29	≤12.1 2012-11-20	3 2007-10-26

Forma odszyfrowana <form enctype>

<form action="..." enctype="text/plain">...</form>

Formularze są wysyłane w formie zakodowanej, np. możesz otrzymać coś takiego:

Imi%EA=S%B3awomir&Nazwisko=Kok%B3owski&P%B3e%E6=M%EA%BFczyzna&Wiek=20-29&Muzyka=Rock&Muzyka=Elektroniczna&Przegl%B9darka=Opera&System+operacyjny=Dos&System+operacyjny=Windows&System+operacyjny=Linux&Komentarz=Prosz%EA%2C+wpisz+tutaj+jaki%9C+komentarz...

Powyższy atrybut (enctype="text/plain") powoduje, że wszystkie formularze będą przysyłane w formie odszyfrowanej, dla powyższego przykładu jest to:

Imię=Sławomir
Nazwisko=Kokłowski
Płeć=Mężczyzna
Wiek=20-29
Muzyka=Rock
Muzyka=Inna
Muzyka=Elektroniczna
Przeglądarka=Opera
System operacyjny=Dos
System operacyjny=Windows
System operacyjny=Linux
Komentarz=Proszę, wpisz tutaj jakiś komentarz...

Prawda, że łatwiej przeczytać coś takiego? Zatem staraj się zawsze używać tej metody w formularzach pocztowych, ponieważ może Ci ona zaoszczędzić dużo czasu na odszyfrowywanie przysłanych danych. Nie ma to natomiast większego znaczenia, w przypadku wykorzystywania formularza w skryptach (po stronie klienta lub serwera).

Formularz może posiadać więcej niż jeden przycisk wysyłania danych. Istnieje możliwość, aby każdy z nich w inny sposób kodował przesyłane informacje: HTML5 / Nadpisanie atrybutów formularza.

Usunięcie polskich znaków z formularza

W przypadku niektórych programów pocztowych w przesłanym formularzu potencjalnie mogą się niepoprawnie wyświetlać polskie znaki diakrytyczne. Dość drastycznym, choć skutecznym sposobem rozwiązania tego problemu może być automatyczne usunięcie przed wysłaniem formularza wszystkich polskich znaków, które mógł podać użytkownik. Odnosi się to do pól tekstowych oraz obszarów tekstowych. Jeśli chodzi o inne pola (np. checkbox, radio), dla nich możesz samodzielnie wpisać w treści atrybutów value="..." tekst bez polskich znaków. Atrybut ten można również podać dla znacznika <option>...</option> (lista rozwijalna):

<select name="nazwa">
	<option value="acelnoszz">ąćęłńóśźż</option>
	<option value="ACELNOSZZ">ĄĆĘŁŃÓŚŹŻ</option>
</select>

Zwróć uwagę, że tekst po znaczniku <option> może się różnić od wartości atrybutu value="...". W ten sposób użytkownik wypełniający formularz, zobaczy poprawne polskie litery.

Aby automatycznie usunąć polskie znaki z pól i obszarów tekstowych, można umieścić przed formularzem odpowiedni skrypt:

<script>
function usun_pl(formularz)
{
	for (i = 0; i < formularz.length; i++)
	{
		var pole = formularz.elements[i];
		if (pole.type != "text" && pole.type != "textarea") continue;
		var str = "";
		for (j = 0; j < pole.value.length; j++)
		{
			switch (pole.value.charAt(j))
			{
				case "ą": str += "a"; break;
				case "ć": str += "c"; break;
				case "ę": str += "e"; break;
				case "ł": str += "l"; break;
				case "ń": str += "n"; break;
				case "ó": str += "o"; break;
				case "ś": str += "s"; break;
				case "ź": str += "z"; break;
				case "ż": str += "z"; break;
				case "Ą": str += "a"; break;
				case "Ć": str += "c"; break;
				case "Ę": str += "e"; break;
				case "Ł": str += "l"; break;
				case "Ń": str += "n"; break;
				case "Ó": str += "o"; break;
				case "Ś": str += "s"; break;
				case "Ź": str += "z"; break;
				case "Ż": str += "z"; break;
				default: str += pole.value.charAt(j); break;
			}
		}
		pole.value = str;
	}
}
</script>

<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this)">
	(Pola formularza)
</form>

Zwróć uwagę, aby dodać atrybut onsubmit="usun_pl(this)" do znacznika <form>!

Strona kodowa formularza <form accept-charset>

<form action="..." accept-charset="strona kodowa">...</form>

Domyślnie zawartość formularza, wypełniona przez użytkownika, jest wysyłana przy użyciu takiej samej strony kodowej jak określona w dokumencie z formularzem. Może się jednak zdarzyć, że system odbierający dane (np. skrypt PHP albo program pocztowy użytkownika) posługuje się innym kodowaniem znaków. W takiej sytuacji powinniśmy ujednolicić kodowanie dokumentu i systemu odbierającego dane, bo inaczej informacje zostaną zniekształcone przez ten system - m.in. w miejsce polskich znaków diakrytycznych mogą pojawić się "krzaczki".

Jednak często zmiana strony kodowej dokumentu z formularzem nie jest najlepszym rozwiązaniem, ponieważ cała reszta serwisu byłaby zapisana inaczej niż ten jeden dokument. Zmiana kodowania znaków systemu odbierającego dane z formularza może w ogóle nie wchodzić w grę - możemy nie mieć wpływu na stronę kodową systemu operacyjnego, programu pocztowego czy skryptu na serwerze. W takiej sytuacji wystarczy zdefiniować, jakiej strony kodowej używa system odbierający dane, a przeglądarka podczas wysyłania formularza powinna automatycznie skonwertować cały tekst. Na przykład, jeśli nasza strona jest zapisana przy użyciu kodowania znaków utf-8, ale wiemy, że system, do którego wysyłamy formularz używa kodowania windows-1250, powinniśmy wpisać:

<form action="..." accept-charset="windows-1250">...</form>

Niestety atrybut accept-charset="..." nie jest cudownym sposobem na zachowanie prawidłowych polskich znaków diakrytycznych w prostych formularzach pocztowych :-( Nie wiadomo z jakiego systemu operacyjnego ani z jakiego programu pocztowego korzysta użytkownik, który będzie wypełniał formularz, a więc nie można jednoznacznie ustalić docelowej strony kodowej wysyłanych danych.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<form enctype>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26
<form accept-charset>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26

Jeśli jeszcze niezbyt dobrze rozumiesz formularze HTML, specjalnie dla Ciebie napisałem ten przykład. Myślę, że po jego przeczytaniu wyjaśni się wiele niezrozumiałych dotąd rzeczy. Natomiast jeżeli chcesz dowiedzieć się więcej na temat dodatkowych możliwości pól formularza użytych w poniższym przykładzie, zobacz rozdziały:

• Ramy formularza <form>
• Pole tekstowe <input text>
• Pole opcji <input radio>
• Pole wyboru <input checkbox>
• Lista rozwijalna <select, option>
• Obszar tekstowy <textarea>
• Wysłanie formularza <input submit>
• Wyczyszczenie danych <input reset>

Przykład <form, input "radio, checkbox, submit, reset", select, option, textarea>

Wyróżnione fragmenty, można (a nawet trzeba) zastąpić innym tekstem. Są to np. pytania, poszczególne odpowiedzi, wartości parametrów i inne. Czcionką pogrubioną (pomiędzy znakami <!-- a -->) zaznaczono komentarze. Nie są one oczywiście konieczne (możesz je pominąć). Natomiast pozwalają zorientować się, czego dotyczy fragment kodu poniżej nich.

<form action="mailto:twój_adres_poczty@domena" method="post" enctype="text/plain"><div>
<!-- Podstawowe pole tekstowe -->
<input name="Imię">Podaj swoje imię<br>
<input name="Nazwisko">Podaj swoje nazwisko
<!-- Pole typu RADIO -->
<p>Podaj swoją płeć:</p>
<input type="radio" name="Płeć" value="Kobieta">Kobieta
<input type="radio" name="Płeć" value="Mężczyzna">Mężczyzna
<!-- Pole typu RADIO -->
<p>Ile masz lat?</p>
<input type="radio" name="Wiek" value="mniej niż 15">mniej niż 15<br>
<input type="radio" name="Wiek" value="15-19">15-19<br>
<input type="radio" name="Wiek" value="20-29">20-29<br>
<input type="radio" name="Wiek" value="30-39">30-39<br>
<input type="radio" name="Wiek" value="40-60">40-60<br>
<input type="radio" name="Wiek" value="więcej niż 60">więcej niż 60 
<!-- Pole typu CHECKBOX -->
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka" value="Inna">Inna (podaj jaka):
<input name="Muzyka">
<!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną -->
<p>Jakiej przeglądarki internetowej używasz?</p>
<select name="Przeglądarka">
	<option selected>Chrome</option>
	<option>Opera</option>
	<option>Firefox</option>
    <option>Edge</option>
	<option>Inna</option>
</select>
<!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością -->
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny" multiple size="3">
	<option selected>Windows</option>
	<option>DOS</option>
	<option>Linux</option>
	<option>Inny</option>
</select>
<!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) -->
<p>Podaj swój komentarz:</p>
<textarea name="Komentarz" cols="50" rows="10">Proszę, wpisz tutaj jakiś komentarz...</textarea>
<br><br><br>
<!-- Przycisk WYŚLIJ -->
<input type="submit" value="Wyślij formularz">
<!-- Przycisk WYCZYŚĆ DANE -->
<input type="reset" value="Wyczyść dane">
</div></form>

A oto co otrzymamy po wpisaniu powyższego tekstu:

(możesz kliknąć przycisk "Wyślij formularz", aby zobaczyć szybki efekt, bez wysyłania danych)

Aby ustalić dokładne położenie pól formularza, zwykle umieszcza się je w komórkach tabeli. W ten sposób możliwe jest np. ustawienie opisów w lewej kolumnie, a samych pól w równej odległości po prawej (nie dotyczy to pól wyboru, opcji itp., do których użytkownik nie może wpisywać tekstu). Jeśli zrobimy to bez tabeli, pola będą poukładane nierówno z powodu różnej długości opisów. Na przykład po wpisaniu:

<form action="mailto:e-mail" method="post" enctype="text/plain"><div>
<table style="background-color: silver">
<tr>
	<td>Imię:</td><td><input type="text" name="imie"></td>
</tr>
<tr>
	<td>Nazwisko:</td><td><input type="text" name="nazwisko"></td>
</tr>
<tr>
	<td colspan="2" style="text-align: center"><br>
		<input type="submit" value="Wyślij">
		<input type="reset" value="Wyczyść">
	</td>
</tr>
</table>
</div></form>

otrzymamy:

Jeśli chcemy, aby opisy w lewej kolumnie przylegały do pól formularza (wyrównanie do prawej), wystarczy dla komórek tabeli <td> dodać atrybut style="text-align: right".

Niestety opisany w tym rozdziale sposób wysyłania prostych formularzy pocztowych nie zawsze działa poprawnie :-( Na przykład może się zdarzyć, że zamiast automatycznego wysłania formularza, otworzy się program pocztowy z pustą wiadomością. Wysłanie takiego listu oczywiście nie przyniesie żadnych korzyści, ponieważ nie będzie on miał treści. Sposobem na ominięcie tej luki może być skorzystanie ze skryptu PHP, który potrafi wysłać formularz w ogóle bez potrzeby używania programu pocztowego przez użytkownika. Niestety nie zawsze nasz serwer WWW obsługuje skrypty PHP, a jeśli nawet, to często właśnie funkcja odpowiadająca za wysyłanie listów jest zablokowana przez administratora. Można sobie jednak poradzić stosując bardzo prosty skrypt JavaScript, do obsługi którego nie potrzebne są żadne dodatkowe funkcje na serwerze WWW. Dzięki niemu możemy próbować ominąć opisany błąd systemowy.

Aby zastosować taki skrypt, wstaw przed formularzem (najlepiej w treści nagłówkowej dokumentu) następujący kod:

<script>
// www.kurshtml.edu.pl

function mail_form(f)
{
	function url_encode(text)
	{
		return text.replace(/%/g, '%25').replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/#/g, '%23').replace(/\r/g, '%0D').replace(/\n/g, '%0A');
	}
	
	for (var i = 0, text = ''; i < f.elements.length; i++)
	{
		if (f.elements[i].name == '' || f.elements[i].disabled) continue;
		switch (f.elements[i].type)
		{
			case 'radio':
			case 'checkbox':
				if (f.elements[i].checked) text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].value) + "%0A";
			break;
			case 'select':
			case 'select-one':
			case 'select-multiple':
				for (var j = 0; j < f.elements[i].options.length; j++)
				{
					if (f.elements[i].options[j].selected) text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].options[j].value != '' ? f.elements[i].options[j].value : f.elements[i].options[j].text) + "%0A";
				}
			break;
			default:
				text += url_encode(f.elements[i].name) + '=' + url_encode(f.elements[i].value) + "%0A";
			break;
		}
	}

	window.location.href = f.action + (f.action.indexOf('?') == -1 ? '?' : '&') + 'body=' + text;
}
</script>

Na koniec musisz tylko dodać do znacznika <form> formularza atrybut: onsubmit="mail_form(this); return false", np.:

<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="mail_form(this); return false">
	(Pola formularza)
</form>

Działanie tego skryptu nie jest identyczne jak w przypadku prostego formularza pocztowego. Podczas gdy normalny formularz jest automatycznie wysyłany, w tym przypadku zostanie otwarte okno programu pocztowego użytkownika z wypełnioną na podstawie danych z formularza treścią. Treść tą użytkownik będzie mógł wyedytować, a następnie będzie trzeba kliknąć przycisk wysyłający list. Jednak pomimo różnic i pewnych niedogodności (np. możliwość ręcznej zmiany treści) takie działanie jest chyba raczej lepsze niż zupełny brak możliwości wysłania prostego formularza pocztowego z poziomu strony WWW. Problem ten dotyka naprawdę dużą grupę internautów. Jest bardzo prawdopodobne, że również czytelnicy Twojej strony mają problemy z wysłaniem do Ciebie formularza umieszczonego w serwisie.

UWAGA!
Istnieje duże prawdopodobieństwo, że w formularzu zamiast polskich liter mogą się pojawić nieoczekiwane znaki. Dlatego zaleca się dołączenie również skryptu odpowiadającego za automatyczne usunięcie polskich liter przed wysłaniem formularza.

Aby to zrobić, przed formularzem należy umieścić oba skrypty, a potem następująco zmodyfikować znacznik <form>

<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this); mail_form(this); return false">
 (Pola formularza)
</form>

Do wysyłania formularzy opisanych w tym rozdziale konieczny jest program pocztowy, np. MS Outlook, Mozilla Thunderbird lub inny. Program taki musi posiadać zainstalowany i skonfigurowany w swoim systemie operacyjnym użytkownik, który chce wysłać do nas formularz pocztowy. Problem w tym, że część użytkowników w ogóle takiego programu nie posiada, ponieważ swoją pocztę odczytują za pomocą tzw. aplikacji webmail, czyli specjalnej strony WWW. Takie strony-aplikacje udostępniają wszystkie duże portale oferujące darmowe konta e-mail.

Użytkownicy, którzy nie posiadają skonfigurowanego programu pocztowego, ponieważ np. korzystają z systemu webmail, nie będą w stanie wysłać formularza pocztowego.

Jak się przed tym zabezpieczyć? W języku HTML ani nawet JavaScript nic nie da się zrobić. Z pomocą przychodzą skrypty obsługiwane po stronie serwera, jak np. PHP. Aby skorzystać z tego rozwiązania, serwer na którym znajduje się strona przede wszystkim musi obsługiwać PHP. Niestety nie jest to normą. Co więcej, funkcja służąca do wysyłania listów e-mail (pod nazwą: mail) za pośrednictwem skryptów PHP musi być włączona. Niestety administratorzy, zwłaszcza darmowych serwerów, czasami blokują tę funkcję, aby konta nie były wykorzystywane do rozsyłania spamu. O tym, czy Twój serwer WWW obsługuje skrypty PHP i czy funkcja mail nie została zablokowana, możesz się zwykle przekonać odwiedzając stronę domową danego serwera lub kontaktując się z administratorem serwera.

Jeżeli Twój serwer nie obsługuje skryptów PHP albo funkcja mail wysyłająca listy elektroniczne jest zablokowana, jedynym rozwiązaniem dla Ciebie będzie skorzystanie z darmowych komponentów przetwarzających dowolne formularze i wysyłających wynik na wskazany adres e-mail. Jedyne co musisz w takim przypadku zrobić, to zarejestrować się w wybranym serwisie, który oferuje takie komponenty i założyć, a potem skonfigurować odpowiedni komponent.

Przedstawiony poniżej opis zakłada, że Twój serwer jednak obsługuje skrypty PHP, a funkcja mail nie została zablokowana. Ponadto zwracam uwagę, że poniższy skrypt zadziała dopiero po wprowadzaniu strony na serwer WWW. Nie będzie można go przetestować na swoim dysku lokalnym, a co więcej sam wygląd formularza może być wtedy nieprawidłowy.

Aby wysłać formularz bez pośrednictwa programu pocztowego, należy utworzyć normalną stronę HTML, a następnie w wybranym miejscu dokumentu wstawić poniższy kod zawierający formularz. Ważne jest tylko, aby plikowi nadać rozszerzenie *.php (czyli np. formularz.php), a nie *.html. Jeżeli nie dopełnisz tego warunku, skrypt nie zadziała!

<?php
if ($_POST)
{
	////////// USTAWIENIA //////////
	$email = 'adres e-mail gdzie wysłać formularz';	// Adres e-mail adresata
	$subject = 'temat';	// Temat listu
	$message = 'Dziękujemy za wysłanie formularza';	// Komunikat
	$error = 'Wystąpił błąd podczas wysyłania formularza';	// Komunikat błędu
	$charset = 'utf-8';	// Strona kodowa
	//////////////////////////////
	
	if (!isset($_POST['captcha']) || $_POST['captcha'] != '') echo $error;
	else
	{
		unset($_POST['captcha']);
		$head =
			"MIME-Version: 1.0\r\n" .
			"Content-Type: text/plain; charset=$charset\r\n" .
			"Content-Transfer-Encoding: 8bit";
		$body = '';
		foreach ($_POST as $name => $value)
		{
			if (is_array($value))
			{
				for ($i = 0; $i < count($value); $i++)
				{
					$body .= "$name=" . (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc() ? stripslashes($value[$i]) : $value[$i]) . "\r\n";
				}
			}
			else $body .= "$name=" . (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc() ? stripslashes($value) : $value) . "\r\n";
		}
		echo mail($email, "=?$charset?B?" . base64_encode($subject) . "?=", $body, $head) ? $message : $error;
	}
}
else
{
?>
<form action="?" method="post">

Tutaj umieść wszystkie pola formularza

<input name="captcha" style="display: none">
</form>
<?php
}
?>

Zwróć uwagę na specjalną formę znacznika <form>...</form> - nie należy nic w niej zmieniać. We właściwej treści formularza nie wolno już umieszczać drugiego znacznika <form>...</form>. Zauważ także, że za znacznikiem zamykającym </form> znajduje się jeszcze dodatkowy krótki blok kodu. Nie zapomnij go wpisać! Ponadto nie usuwaj z formularza następującego pola:

<input name="captcha" style="display: none">

Jest to proste zabezpieczenie przeciwko botom, które mogą próbować automatycznie wysyłać formularz, przez co na Twoją skrzynkę e-mail mogłoby lądować sporo spamu.

Jeżeli w formularzu takim znajdują się pola wyboru (<input type="checkbox">) albo lista rozwijalna z możliwością wyboru kilku opcji - typ rozszerzony (<select multiple>...</select>), na końcu nazwy każdego pola typu checkbox oraz w nazwie takiego elementu select, obowiązkowo należy postawić pusty nawias kwadratowy: []. Wewnątrz tych nawiasów nie może być żadnego znaku, nawet spacji!

Na przykład:

<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka[]" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka[]" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka[]" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka[]" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka[]" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka[]" value="Inna">Inna (podaj jaka):
<input name="Muzyka[]">

<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny[]" multiple size="3">
	<option selected>Dos</option>
	<option>Windows</option>
	<option>Linux</option>
	<option>Inny</option>
</select>

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak wstawić formularz na stronę WWW? Co można uzyskać obsługując formularze przez skrypty? W jaki sposób sprawdzić, czy użytkownik wypełnił wszystkie pola formularza?

<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>

Zobacz więcej...

Jak wprowadzić pole tekstowe, w którym można wpisać np. imię i nazwisko? W jaki sposób zablokować pole przed wpisywaniem? Jak zmienić kolejność aktywowania elementów przy pomocy tabulatora?

<form action="...">
	<input type="text" name="nazwa">
</form>

<form action="...">
	<input name="nazwa">
</form>

<input type="text" name="nazwa" value="odpowiedź domyślna">

<input type="text" name="nazwa" size="k">

<input type="text" name="nazwa" maxlength="n">

<input type="text" name="nazwa" readonly>

<input type="text" name="nazwa" disabled>

Zobacz więcej...

Jak wprowadzić pole, w którym można wpisać hasło?

<form action="...">
	<input type="password" name="nazwa">
</form>

Zobacz więcej...

Jak dać użytkownikowi możliwość wyboru kilku bądź jednej odpowiedzi? W jaki sposób zaznaczyć pole wyboru po kliknięciu tekstu opisu? W jaki sposób zdefiniować klawisz skrótu? Jak odblokować pole formularza dopiero po wybraniu określonej opcji?

<form action="...">
	<input type="checkbox" name="nazwa" value="wartość">Tu wpisz opis pola
</form>

<input type="checkbox" name="nazwa" value="wartość" checked>Opis pola

<input type="checkbox" name="nazwa" value="wartość" disabled>Opis pola

Zobacz więcej...

Jak wprowadzić na stronę WWW "przełącznik" (pole opcji)?

<form action="...">
	<input type="radio" name="nazwa" value="wartość">Tu wpisz opis pola
</form>

<input type="radio" name="nazwa" value="wartość" checked>Opis pola

<input type="radio" name="nazwa" value="wartość" disabled>Opis pola

Zobacz więcej...

Jak wprowadzić rozwijane menu?

<form action="...">
	<select name="nazwa">
		<option>Tu wpisz pierwszą możliwość</option>
		<option>Tu wpisz drugą możliwość</option>
		(...)
	</select>
</form>

<select name="nazwa" multiple>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

<select name="nazwa">
	<option>Tu wpisz pierwszą możliwość</option>
	<option selected>Tu wpisz drugą możliwość<option>
</select>

<select name="nazwa" size="w">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

<select name="nazwa" disabled>
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</select>

<select name="nazwa">
<optgroup label="nazwa grupy">
	<option>Tu wpisz pierwszą możliwość</option>
	<option>Tu wpisz drugą możliwość</option>
</optgroup>
</select>

Zobacz więcej...

Jak wprowadzić wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz?

<form action="...">
	<textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea>
</form>

<textarea name="nazwa" cols="x" rows="y" readonly>...</textarea>

<textarea name="nazwa" cols="x" rows="y" disabled>...</textarea>

Zobacz więcej...

W jaki sposób umożliwić użytkownikowi wybranie pliku ze swojego dysku lokalnego?

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa">
</form>

<input type="file" name="nazwa" size="k">

<input type="file" name="nazwa" disabled>

<form action="..." enctype="multipart/form-data" accept="lista typów">
	<input type="file" name="nazwa">
</form>

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa" accept="lista typów">
</form>

Zobacz więcej...

Jak przesłać ukryte dane w formularzu?

<form action="...">
	<input type="hidden" name="nazwa" value="wartość">
</form>

Zobacz więcej...

Jak wysłać formularz?

<form action="...">
	<input type="submit" value="wartość">
</form>

<form action="...">
	<input type="submit" value="wartość" disabled>
</form>

<form action="...">
	<input type="image" src="ścieżka dostępu do obrazka" alt="informacja alternatywna">
</form>

Zobacz więcej...

Jak wyczyścić wszystkie wprowadzone dane w formularzu? W jaki sposób zapobiec omyłkowemu wyczyszczeniu danych formularza?

<form action="...">
	<input type="reset" value="wartość">
</form>

<form action="...">
	<input type="reset" value="wartość" disabled>
</form>

Zobacz więcej...

Jak wprowadzić przycisk na stronę WWW?

<button type="rodzaj">Treść przycisku</button>

Zobacz więcej...

W jaki sposób zgrupować tematycznie klika pól formularza?

<fieldset>
	(Pola formularza)
</fieldset>

<fieldset>
<legend>Tytuł</legend>
	(Pola formularza)
</fieldset>

Zobacz więcej...

Co zrobić, aby formularze były przesyłane w formie odszyfrowanej, którą łatwiej później odczytać? Jak usunąć polskie znaki z formularza?

<form action="..." enctype="text/plain">...</form>

<form action="..." accept-charset="strona kodowa">...</form>

Zobacz więcej...

Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia ^* , rozwiązując testowy QUIZ (online).

✅ Rozpocznij quiz HTML

* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Na podstronie kontakt.html dodaj formularz kontaktowy kierujący na Twój adres e-mail.
3. W formularzu umieść następujące pola:
   • Temat - pole tekstowe o nazwie name="subject"
   • Wiadomość - obszar tekstowy o nazwie name="body"
   • Wyślij - przycisk wysłania formularza
   • Anuluj - przycisk wyczyszczenia danych
4. Jeżeli masz skonfigurowane na swoim komputerze konto w programie pocztowym, otwórz w przeglądarce internetowej Twoją stronę z utworzonym formularzem, wypełnij go przykładowymi danymi i spróbuj wysłać.