Przejdź do treści

Formularze - HTML

W tym rozdziale dowiesz się...

Stosowanie interaktywnych formularzy na stronach WWW.

Wstęp

Do czego są przydatne formularze elektroniczne na stronach WWW?

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

Ramy formularza <form>

<form action="mailto:adres e-mail gdzie wysłać formularz" method="post">
	(Tutaj umieszcza się pola formularza)
</form>
lub
<form action="mailto:adres e-mail?subject=temat" method="post">
	(Tutaj umieszcza się pola formularza)
</form>
gdzie jako "adres e-mail gdzie wysłać formularz" podaj swój adres poczty elektronicznej e-mail.
Natomiast zamiast "temat" można wpisać tytuł, jaki będzie nosił formularz (jest to przydatne zwłaszcza w przypadku stosowania programów obsługujących formularze).

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>
Otrzymamy:
Wpisz tutaj coś i naciśnij OK:

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>
Naciśnij OK, bez wpisywania tekstu:

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.

Pytania i odpowiedzi <form>

Jak dodać formularz do HTML?

W tym celu do kodu źródłowego strony trzeba dodać znacznik FORM z atrybutem wskazującym akcję, jaka ma zostać wykonana po wysłaniu formularza. Na przykład, aby po wypełnieniu formularza mógł on być wysłany na adres e-mail jan.kowalski@example.com, można się posłużyć następującym znacznikiem: <form action="mailto:jan.kowalski@example.com" method="post">...</form>.

Jak wyśrodkować formularz w HTML?

Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni atrybut: <form action="..." method="post" style="text-align: center">...</form>.

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?

Pole tekstowe <input text>

<form action="...">
	<input type="text" name="nazwa">
</form>
lub
<form action="...">
	<input name="nazwa">
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z formularzem.

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.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

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">
W miejsce tekstu: "odpowiedź domyślna" można wpisać domyślną treść danej odpowiedzi. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze innej.

Przykład <input text value>

Długość pola <input text size>

<input type="text" name="nazwa" size="k">
gdzie jako "k" można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne. Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

Przykład <input text size>

size="10"

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

<input type="text" name="nazwa" maxlength="n">
gdzie jako "n" podaj maksymalną dopuszczalną ilość liter, z których może składać się odpowiedź - użytkownik nie będzie mógł wpisać dłuższego tekstu.

Przykład <input text maxlength>

maxlength="10"

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>

Tekstu w tym polu nie można usunąć ani zmienić (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>

To pole jest zablokowane (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">
gdzie "n" to liczba z przedziału od 0 do 32767.

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>

Pytania i odpowiedzi <input text number>

Jak wstawić pole tekstowe w HTML?

W tym celu do dokumentu HTML wewnątrz znacznika FORM należy wstawić odpowiedni znacznik: <input type="text" name="...">.

Jak zrobić pole numeryczne w HTML?

Pole numeryczne jest odmianą pola tekstowego, w którym jednak można wpisywać tylko liczby. Aby umieścić go wewnątrz formularza, wystarczy ustawić mu odpowiedni typ: <input type="number" name="...">.

Jaki atrybut ustala szerokość pola tekstowego?

Domyślnie każde pole tekstowe ma ustaloną szerokość, która może się różnić w zależności od przeglądarki. Aby ustawić szerokość pola np. na 10 znaków, można się posłużyć następującym kodem: <input type="text" name="..." size="10">. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 10 znaków, nadal będzie mógł to zrobić. W takim przypadku w miarę wpisywania tekstu zawartość pola będzie się przesuwać w lewo.

Hasło <input password>

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

Hasło <input password>

<form action="...">
	<input type="password" name="nazwa">
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola. Zostanie ona później wysłana wraz z formularzem. Nazwa nie powinna być zbyt długa!

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

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

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

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

Podaj hasło...

size="10"

Tutaj możesz wprowadzić najwyżej 10-znakowe hasło (maxlength="10").

To jest pole tylko do odczytu (readonly).

To pole jest zablokowane (disabled).

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!

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 wyboru <input checkbox>

<form action="...">
	<input type="checkbox" name="nazwa" value="wartość">Tu wpisz opis pola
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

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

Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr3

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>

To pole jest domyślnie zaznaczone, ale można go odznaczyć.
To pole również jest zaznaczone.
Natomiast to nie jest.

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>

Tych pól nie możesz zaznaczać ani odznaczać:

Pole 1 Pole 2

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



To jest zwykły opis bez etykiety

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

Pole a (wciśnij Alt+A; w Operze Shift+Esc+A)
Pole tekstowe (wciśnij Alt+K; w Operze Shift+Esc+K)

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="..."!

Pytania i odpowiedzi <input checkbox>

W jaki sposób w HTML wstawić pole wielokrotnego wyboru?

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć więcej niż jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu checkbox. Na przykład: <input type="checkbox" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić wyboru zaznaczonego przez użytkownika.

Jak zrobić checkbox HTML?

Checkbox to inaczej pole wielokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="checkbox" name="nazwa" value="wartość">. Wszystkie pola wyboru, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Pole opcji <input radio>

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

Pole opcji <input radio>

<form action="...">
	<input type="radio" name="nazwa" value="wartość">Tu wpisz opis pola
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

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ść:

Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr3

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>

To pole jest domyślnie zaznaczone, ale można go odznaczyć, klikając inne.
To pole nie może być zaznaczone domyślnie, ponieważ zaznaczone już zostało pierwsze.

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>

Tych pól nie możesz zaznaczać ani odznaczać:

Pole 1 Pole 2

Pytania i odpowiedzi <input radio>

W jaki sposób w HTML wstawić pole jednokrotnego wyboru?

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć najwyżej jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu radio. Na przykład: <input type="radio" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić, którą opcję zaznaczył użytkownik.

Jak zrobić radio HTML?

Radio w języku HTML to nie środek masowego komunikowania, służący do rozpowszechniania audycji dźwiękowych ;-) Jest to inaczej pole jednokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="radio" name="nazwa" value="wartość">. Wszystkie pola opcji, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Lista rozwijalna <select, option, optgroup>

Jak wprowadzić rozwijane menu?

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>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również wpisane możliwości odpowiedzi).

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.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

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.

To jest typ podstawowy

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

To jest typ z możliwością wyboru kilku opcji jednocześnie

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:


MULTIPLE

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>
gdzie "w" oznacza ilości wierszy (linii) z odpowiedziami, które będą jednocześnie widoczne na ekranie (pole może oczywiście posiadać więcej opcji, niezależnie od atrybutu size="...").

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:

size="5"

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>

To pole jest zablokowane (disabled).

To pole jest zablokowane (disabled).

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

Pytania i odpowiedzi <select, option>

Do czego służy znacznik SELECT?

Znacznik SELECT pozwala wstawić listę rozwijaną wewnątrz formularza na stronie. Zawiera ona zestaw opcji do wyboru, ale domyślnie na ekranie wyświetla się tylko jedna z nich, a dopiero po kliknięciu rozwijają się kolejne. Ponadto jeśli opcji będzie bardzo dużo, przeglądarka pokaże pionowy suwak do ich przewijania.

Jak zrobić listę rozwijaną w HTML?

Lista rozwijana jest jednym z rodzajów pól formularza. Aby wstawić pole takiego typu na stronie i umieścić w nim np. trzy opcje, można się posłużyć następującym kodem: <select name="..."> <option>Opcja 1</option> <option>Opcja 2</option> <option>Opcja 3</option> </select>.

Obszar tekstowy <textarea>

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

Obszar tekstowy <textarea>

<form action="...">
	<textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea>
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem.
Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.

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.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład <textarea>

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

Możesz tu coś wpisać...

A to jest przykład podania treści domyślnej (możesz ją wymazać):

Możesz tu coś wpisać...

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>

Pytania i odpowiedzi <textarea>

Co definiuje tag TEXTAREA?

Znacznik TEXTAREA pozwala wstawić wieloliniowe pole tekstowe wewnątrz formularza. Pole takiego typu może być używane np. do wpisania komentarza bądź innej nieco dłuższej wiadomości.

Jak zmienić rozmiar pola tekstowego HTML?

Domyślnie każde wieloliniowe pole tekstowe ma ustaloną zarówno szerokość jak i wysokość, które mogą się różnić w zależności od przeglądarki. Aby ustawić szerokość takiego pola np. na 100 znaków, a wysokość na 10 linijek tekstu, można się posłużyć następującym kodem: <textarea name="..." cols="100" rows="10"></textarea>. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 100 znaków, nadal będzie mógł to zrobić. Wtedy tekst po prostu zostanie przeniesiony do kolejnej linijki. Natomiast jeśli zajmie już całe 10 linijek, przeglądarka wyświetli w tym polu pionowy suwak do przewijania, a cała jego zawartość przesunie się w górę.

Selektor plików <input file>

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

Selektor plików <input file>

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa">
</form>
gdzie jako "nazwa" należy wpisać krótką nazwę danego pola. Zostanie ona później wysłana wraz z formularzem.

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").

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">
gdzie jako "k" podaje się długość pola (tekstowego) w ilości znaków, które będą w nim jednocześnie widoczne. Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

Przykład <input file size>

size="10"

Blokada pola <input file disabled>

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

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input file disabled>

To pole jest zablokowane (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>
lub
<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:

Ukryte dane <input hidden>

Jak przesłać ukryte dane w formularzu?

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

Wysłanie formularza <input submit image>

Jak wysłać formularz?

Przycisk tekstowy <input submit>

<form action="...">
	<input type="submit" value="wartość">
</form>
gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij kwerendę".

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

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład <input submit>

value="Kliknij tutaj!"

To jest przykład bez podania wartości value="...".

Blokada pola

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

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input submit disabled>

To pole jest zablokowane (disabled).

Przycisk obrazkowy <input image>

<form action="...">
	<input type="image" src="ścieżka dostępu do obrazka" alt="informacja alternatywna">
</form>
gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się obrazek, który ma zostać wyświetlony jako przycisk wysłania formularza.
Natomiast zamiast "informacja alternatywna" można podać treść informacji, która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także po wskazaniu go myszką (atrybut ten nie jest konieczny).

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.

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>

Pytania i odpowiedzi <input submit>

Jak wysłać formularz HTML?

Domyślnie formularz jest wysyłany, jeśli użytkownik wciśnie Enter wpisując coś w dowolnym polu tekstowym albo polu hasła, które się w nim znajdują. Jednak mniej doświadczeni użytkownicy mogą nie znać tego zachowania. Poza tym w formularzu może nie być żadnego pola tego typu. Dlatego zwykle umieszcza się w nim dodatkowy przycisk, którego wciśnięcie wysyła formularz.

Który zapis definiuje przycisk w formularzu wysyłający zawartość formularza z napisem "Wyślij"?

Aby to zrobić, wewnątrz formularza należy umieścić odpowiedni znacznik: <input type="submit" value="Wyślij">.

Wyczyszczenie danych <input reset>

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

Wyczyszczenie danych <input reset>

<form action="...">
	<input type="reset" value="wartość">
</form>
gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny napis, np.: "Resetuj".

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

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład <input reset>

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

Wpisz tu jakiś tekst.

Odpowiedź nr1 Odpowiedź nr2

Odpowiedź nr1 Odpowiedź nr2


value="Kliknij tutaj!"...

To jest przykład bez podania wartości VALUE.

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>

To pole jest zablokowane (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>

Wpisz tu jakiś tekst.

Odpowiedź nr1 Odpowiedź nr2

Odpowiedź nr1 Odpowiedź nr2


Pytania i odpowiedzi <input reset>

Jak zresetować formularz HTML?

Zdarza się, że użytkownik w trakcie wypełniania formularza zdecyduje, że chce zacząć od nowa. Oczywiście w tym celu mógłby po prostu odświeżyć całą stronę. Jednak znacznie wygodniej jest umieścić w formularzu specjalny przycisk, po wciśnięciu którego cała zawartość formularza zostanie natychmiast przywrócona na stanu początkowego bez czekania na przeładowanie strony. W tym celu wewnątrz formularza trzeba umieścić specjalny znacznik: <input type="reset" value="Wyczyść">.

Jak wyczyścić formularz?

Pojęcie wyczyszczenia danych zwykle jest stosowane zamiennie z resetowaniem formularza. Formalnie jednak resetowanie oznacza przywrócenie wartości początkowych - tzn. takich jakie miały ustawione pola, zanim użytkownik rozpoczął wypełnianie formularza. Najczęściej będzie to oznaczać właśnie usunięcie ich zawartości. Jednak niektóre pola mogą mieć ustawione przez twórcę strony wartości domyślne, które użytkownik może zmienić. W takim przypadku reset nie wyczyści ich zawartości, ale przywróci te wartości domyślne. W języku HTML nie istnieje element pozwalający naprawdę wyczyścić formularz, ponieważ może to wymagać indywidualnego podejścia w zależności od tego z jakich pól się on składa. Potrzeba uzyskania takiego efektu raczej nie jest częsta - zwykle chodzi nam raczej o zresetowanie danych, a nie ich całkowite wyczyszczenie. Jeśli rzeczywiście jest to konieczne, można taki efekt zaimplementować przy pomocy odpowiedniego skryptu JavaScript.

Przycisk <button>

Jak wprowadzić przycisk na stronę WWW?

<button type="rodzaj">Treść przycisku</button>
gdzie "rodzaj" określa typ przycisku i można tutaj podać:

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.

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład <button>



Przykład z obrazkiem:




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!

Pytania i odpowiedzi <button>

Jak zrobić przyciski w HTML?

Aby wstawić w dokumencie HTML przycisk, po kliknięciu którego nastąpi przejście do innej strony, można się posłużyć odsyłaczem obrazkowym.

Co to jest BUTTON w HTML?

Jest to znacznik, za pomocą którego możemy wstawić przycisk wewnątrz formularza. W języku HTML istnieją trzy typy przycisków, które ustawia się za pomocą odpowiedniego atrybutu: type="submit" - wysłanie formularza, type="reset" - zresetowanie danych, type="button" - przycisk bez akcji (można go użyć np. w skrypcie JavaScript).

Grupowanie pól <fieldset, legend>

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

  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>

Wybierz opcję:
Opcja 1
Opcja 2
Opcja 3
Wpisz dane


TytułWybierz opcję:
Opcja 1
Opcja 2
Opcja 3

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?

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

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.

Przykład formularza HTML

Jak wygląda przykładowy formularz HTML?

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:

Przy tworzeniu formularza HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własne, dopasowane do Twoich wymagań pola formularza.

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:

Podaj swoje imię
Podaj swoje nazwisko

Podaj swoją płeć:

Kobieta Mężczyzna

Ile masz lat?

mniej niż 15
15-19
20-29
30-39
40-60
więcej niż 60

Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?

Rock
Heavy Metal
Pop
Techno
Muzyka poważna
Inna (podaj jaka):

Jakiej przeglądarki internetowej używasz?

Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?

Podaj swój komentarz:




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

Imię:
Nazwisko:

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

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?

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>

Wysłanie formularza bez programu pocztowego

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

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
}
?>
Na początku kodu należy ustawić własne wartości:
adres e-mail gdzie wysłać formularz
Twój adres poczty elektronicznej e-mail.
temat
Tytuł, jaki będzie nosił formularz, tzn. temat listu, który otrzymasz, kiedy formularz zostanie wysłany.
Dziękujemy za wysłanie formularza
Komunikat, który zostanie wyświetlony użytkownikowi po wysłaniu formularza. W jego treści można używać dowolnych znaczników HTML.
Wystąpił błąd podczas wysyłania formularza
Komunikat, który zostanie wyświetlony użytkownikowi w przypadku wystąpienia błędu. W jego treści można używać dowolnych znaczników HTML.
utf-8
Wartość, która musi być identyczna jak strona kodowa dokumentu HTML, w którym znajduje się formularz. Warto zauważyć, że jeśli prawidłowo wypełnisz tę wartość, nie powinno być żadnych problemów z wysyłaniem formularzy zawierających polskie znaki diakrytyczne, jak to ma miejsce w przypadku prostego formularza pocztowego.
Tutaj umieść wszystkie pola formularza
Właściwa zawartość formularza, utworzona w tradycyjny sposób.

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>

Pytania i odpowiedzi

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

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?

Jak dodać formularz do HTML?

W tym celu do kodu źródłowego strony trzeba dodać znacznik FORM z atrybutem wskazującym akcję, jaka ma zostać wykonana po wysłaniu formularza. Na przykład, aby po wypełnieniu formularza mógł on być wysłany na adres e-mail jan.kowalski@example.com, można się posłużyć następującym znacznikiem: <form action="mailto:jan.kowalski@example.com" method="post">...</form>.

Zobacz więcej...

Jak wyśrodkować formularz w HTML?

Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni atrybut: <form action="..." method="post" style="text-align: center">...</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?

Jak wstawić pole tekstowe w HTML?

W tym celu do dokumentu HTML wewnątrz znacznika FORM należy wstawić odpowiedni znacznik: <input type="text" name="...">.

Zobacz więcej...

Jak zrobić pole numeryczne w HTML?

Pole numeryczne jest odmianą pola tekstowego, w którym jednak można wpisywać tylko liczby. Aby umieścić go wewnątrz formularza, wystarczy ustawić mu odpowiedni typ: <input type="number" name="...">.

Zobacz więcej...

Jaki atrybut ustala szerokość pola tekstowego?

Domyślnie każde pole tekstowe ma ustaloną szerokość, która może się różnić w zależności od przeglądarki. Aby ustawić szerokość pola np. na 10 znaków, można się posłużyć następującym kodem: <input type="text" name="..." size="10">. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 10 znaków, nadal będzie mógł to zrobić. W takim przypadku w miarę wpisywania tekstu zawartość pola będzie się przesuwać w lewo.

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?

W jaki sposób w HTML wstawić pole wielokrotnego wyboru?

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć więcej niż jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu checkbox. Na przykład: <input type="checkbox" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić wyboru zaznaczonego przez użytkownika.

Zobacz więcej...

Jak zrobić checkbox HTML?

Checkbox to inaczej pole wielokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="checkbox" name="nazwa" value="wartość">. Wszystkie pola wyboru, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Zobacz więcej...

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

W jaki sposób w HTML wstawić pole jednokrotnego wyboru?

Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć najwyżej jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu radio. Na przykład: <input type="radio" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić, którą opcję zaznaczył użytkownik.

Zobacz więcej...

Jak zrobić radio HTML?

Radio w języku HTML to nie środek masowego komunikowania, służący do rozpowszechniania audycji dźwiękowych ;-) Jest to inaczej pole jednokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="radio" name="nazwa" value="wartość">. Wszystkie pola opcji, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.

Zobacz więcej...

Jak wprowadzić rozwijane menu?

Do czego służy znacznik SELECT?

Znacznik SELECT pozwala wstawić listę rozwijaną wewnątrz formularza na stronie. Zawiera ona zestaw opcji do wyboru, ale domyślnie na ekranie wyświetla się tylko jedna z nich, a dopiero po kliknięciu rozwijają się kolejne. Ponadto jeśli opcji będzie bardzo dużo, przeglądarka pokaże pionowy suwak do ich przewijania.

Zobacz więcej...

Jak zrobić listę rozwijaną w HTML?

Lista rozwijana jest jednym z rodzajów pól formularza. Aby wstawić pole takiego typu na stronie i umieścić w nim np. trzy opcje, można się posłużyć następującym kodem: <select name="..."> <option>Opcja 1</option> <option>Opcja 2</option> <option>Opcja 3</option> </select>.

Zobacz więcej...

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

Co definiuje tag TEXTAREA?

Znacznik TEXTAREA pozwala wstawić wieloliniowe pole tekstowe wewnątrz formularza. Pole takiego typu może być używane np. do wpisania komentarza bądź innej nieco dłuższej wiadomości.

Zobacz więcej...

Jak zmienić rozmiar pola tekstowego HTML?

Domyślnie każde wieloliniowe pole tekstowe ma ustaloną zarówno szerokość jak i wysokość, które mogą się różnić w zależności od przeglądarki. Aby ustawić szerokość takiego pola np. na 100 znaków, a wysokość na 10 linijek tekstu, można się posłużyć następującym kodem: <textarea name="..." cols="100" rows="10"></textarea>. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 100 znaków, nadal będzie mógł to zrobić. Wtedy tekst po prostu zostanie przeniesiony do kolejnej linijki. Natomiast jeśli zajmie już całe 10 linijek, przeglądarka wyświetli w tym polu pionowy suwak do przewijania, a cała jego zawartość przesunie się w górę.

Zobacz więcej...

Jak wysłać formularz?

Jak wysłać formularz HTML?

Domyślnie formularz jest wysyłany, jeśli użytkownik wciśnie Enter wpisując coś w dowolnym polu tekstowym albo polu hasła, które się w nim znajdują. Jednak mniej doświadczeni użytkownicy mogą nie znać tego zachowania. Poza tym w formularzu może nie być żadnego pola tego typu. Dlatego zwykle umieszcza się w nim dodatkowy przycisk, którego wciśnięcie wysyła formularz.

Zobacz więcej...

Który zapis definiuje przycisk w formularzu wysyłający zawartość formularza z napisem "Wyślij"?

Aby to zrobić, wewnątrz formularza należy umieścić odpowiedni znacznik: <input type="submit" value="Wyślij">.

Zobacz więcej...

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

Jak zresetować formularz HTML?

Zdarza się, że użytkownik w trakcie wypełniania formularza zdecyduje, że chce zacząć od nowa. Oczywiście w tym celu mógłby po prostu odświeżyć całą stronę. Jednak znacznie wygodniej jest umieścić w formularzu specjalny przycisk, po wciśnięciu którego cała zawartość formularza zostanie natychmiast przywrócona na stanu początkowego bez czekania na przeładowanie strony. W tym celu wewnątrz formularza trzeba umieścić specjalny znacznik: <input type="reset" value="Wyczyść">.

Zobacz więcej...

Jak wyczyścić formularz?

Pojęcie wyczyszczenia danych zwykle jest stosowane zamiennie z resetowaniem formularza. Formalnie jednak resetowanie oznacza przywrócenie wartości początkowych - tzn. takich jakie miały ustawione pola, zanim użytkownik rozpoczął wypełnianie formularza. Najczęściej będzie to oznaczać właśnie usunięcie ich zawartości. Jednak niektóre pola mogą mieć ustawione przez twórcę strony wartości domyślne, które użytkownik może zmienić. W takim przypadku reset nie wyczyści ich zawartości, ale przywróci te wartości domyślne. W języku HTML nie istnieje element pozwalający naprawdę wyczyścić formularz, ponieważ może to wymagać indywidualnego podejścia w zależności od tego z jakich pól się on składa. Potrzeba uzyskania takiego efektu raczej nie jest częsta - zwykle chodzi nam raczej o zresetowanie danych, a nie ich całkowite wyczyszczenie. Jeśli rzeczywiście jest to konieczne, można taki efekt zaimplementować przy pomocy odpowiedniego skryptu JavaScript.

Zobacz więcej...

Jak wprowadzić przycisk na stronę WWW?

Jak zrobić przyciski w HTML?

Aby wstawić w dokumencie HTML przycisk, po kliknięciu którego nastąpi przejście do innej strony, można się posłużyć odsyłaczem obrazkowym.

Zobacz więcej...

Co to jest BUTTON w HTML?

Jest to znacznik, za pomocą którego możemy wstawić przycisk wewnątrz formularza. W języku HTML istnieją trzy typy przycisków, które ustawia się za pomocą odpowiedniego atrybutu: type="submit" - wysłanie formularza, type="reset" - zresetowanie danych, type="button" - przycisk bez akcji (można go użyć np. w skrypcie JavaScript).

Zobacz więcej...

Powtórka

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

Quiz i certyfikat ukończenia

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

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

Ćwiczenia

  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:
  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ć.
Facebook