Formularze
Pozwalają pobierać dane od użytkownika strony i wysyłać je do przetworzenia na serwerze. Nie można wykorzystać formularzy HTML bez pomocy skryptu po stronie serwera, który odbierze i przetworzy dane. Najpopularniejszym językiem używanym do tego celu jest PHP.
Specyfikacja CSS słabo określa, w jaki sposób mają być stylowane formularze, dlatego formularze w różnych przeglądarkach mogą różnie reagować na nadane style. W praktyce kłopotliwe są wymiary (nie
respektujące boxmodelu), interpretacja obramowania kontrolek typu radio
oraz pozycja <legend>
.
Na Sieci jest pełno botów wykorzystujących formularze do spamowania. Ponieważ zabezpieczenie się przed tym jest skomplikowane, polecamy serwis Sblam! oferujący skuteczne, darmowe zabezpieczenie.
Formularz: <form>
Wszystkie elementy fomularzy muszą znajdować się wewnątz tego elementu. <form>
jest elementem blokowym i musi
zawierać w sobie elementy blokowe, takie jak <p>
, <div>
lub <fieldset>
.
Nie można umieszczać fomularza w formularzu. Cały formularz musi być wysłany na serwer, nawet jeśli ma zmienić się tylko jego część (jeden formularz może wykonać kilka różnych akcji)
Adres docelowy: action
Atrybut określa adres strony, która ma odebrać dane. Pusta wartość oznacza tę samą stronę.
<form action="">
Nie da się wysłać fomularza do dwóch stron naraz ani wysłać pod różne adresy, zależnie od jego zawartości. Taką funkcjonalność można uzyskać, wysyłając formularz do skryptu, który przeanalizuje jego dane i sam wykona odpowiednie czynności (wczytanie innej strony, przekierowanie).
Metoda: method
Atrybut określający, jaką metodą dane zostaną przesłane.
Jeśli formularz wysyłany jest metodą get
, to nie umieszczaj query string w action
. Zamiast tego dodaj
ukryte pola do formularza.
- get
- Oznacza, że wysłanie fomularza nie ma ważnych efektów ubocznych. Tej metody używa się do wyszukiwarek, wyboru wersji pliku, itp. Dane formularza zostaną dołączone do adresu strony docelowej (jako query string w URI) i zostaną pobrane z serwera tak, jak zwykłe odnośniki. Przesyłane są widoczne dla użytkownika, a rezultat działania formularza może być zapamiętany w zakładkach.
- post
-
Oznacza, że formularz wykonuje jakąś ważną akcję na serwerze, np. zalogowanie lub rejestrację użytkownika, dodanie artykułu, itp. Dane zostaną przesłane jako treść zapytania HTTP, przez co
przesyłane dane będą niewidoczne dla użytkownika (choć to w żaden sposób nie gwarantuje bezpieczeństwa/poufności przesyłanych danych!).
Aby odświeżenie strony nie wysyłało ponownie danych, możesz wykonać przekierowanie statusem 303.
Format danych: enctype
Atrybut określa w jakim formacie przesłać formularz na serwer. Jeśli formularz zawiera pola przesyłające plik, należy ustawić wartość multipart/form-data
.
Weryfikacja poprawności danych: onsubmit
Sprawdzanie po stronie klienta jest opcjonalne, dlatego zawsze należy wykonać pełne sprawdzenie poprawności danych po stronie serwera!
Skrypty JavaScript mogą po stronie klienta sprawdzić poprawność danych w formularzu i ewentualnie wstrzymać jego wysyłanie.
Pola formularza
Nazwy pól: name
Atrybut id
w formularzach nie ma specjalnego znaczenia i jest niezależny od name
Każde pole formularza ma swoją nazwę, określaną atrybutem name
. Ta nazwa pozwala skryptowi po stronie serwera rozpoznać dane, dlatego przesyłane są wartości tylko tych elementów, które
mają nazwę.
PHP pozwala tworzyć tablice z pól, które mają w nazwie znaki []
. To jest niestandardowa konstrukcja dająca iluzję tablic
tylko w PHP — w XHTML i dla przeglądarek nie ma to żadnego szczególnego znaczenia.
Etykiety: <label>
Dla wszystkich pól formularza (z wyjątkiem przycisków i pól ukrytych) powinno się dodawać etykiety nazywające pole. Można to zrobić na dwa sposoby — poprzez umieszczenie pola wewnątrz elementu
<label>
lub poprzez nadanie id
polu (dowolnego, może być różne od name
) i dodanie
etykiecie atrybutu for
z tą samą wartością.
<label>
Imie<input type="text" name="imie" /></label>
<label for="imie1">
Imie</label>
<input type="text" name="imie" id="imie1" />
Druga metoda, w połączeniu z CSSowym inline-block lub float pozwala nadać szerokość etykietom i tym samym wizualnie wyrównać pola formularza.
Ten element jest szczególnie ważny dla pól typu checkbox
i radio
, bo powoduje, że kliknięcie etykiety zaznacza pole (tak, jak to ma miejsce w większości systemów
operacyjnych).
Pole tekstowe: <input type="text" />

Pozwala wprowadzić jedną linijkę tekstu. Domyślną wartość podaje się w atrybucie value
.
Atrybut maxlength
określa maksymalną ilość znaków, jaką wolno wprowadzić. Dozwolony jest dla pól typu „text” i „password”. Powinien być używany tylko wtedy, gdy określona długość jest
naprawdę ważna.
Hasło: <input type="password" />
Wpisywany tekst będzie zamaskowany. Ponadto wiele przeglądarek oferuje zapamiętywanie haseł.

To pole nie szyfruje przesyłanego hasła. Jeśli formularz musi być bezpieczny, to należy go umieścić i wysyłać do strony przesyłanej protokołem HTTPS.
Wieloliniowe pole tekstowe: <textarea>
Tworzy pole w którym użytkownik może wpisać wiele linii tekstu.
Wymiary podane w CSS mają priorytet nad wymiarami rows
i cols
Obowiązkowe atrybuty rows
i cols
sugerują, ile pole ma mieć linii i ile znaków ma się mieścić w linii.
Domyślny tekst umieszcza się wewnątrz elementu <textarea>
. Nie można w nim umieszczać elementów XHTML i należy zamieniać "<" i "&" na encje. Wyjątkowo przejścia do nowej linii w kodzie strony są zachowywane i widoczne w polu tekstowym.
Pole wyboru: <input type="checkbox" />

Pozwala udzielić odpowiedzi „tak” lub „nie”. Jego wartość jest przesyłana tylko wtedy, gdy zostanie zaznaczone. Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked
.
<input type="checkbox" checked="checked" name="tak1" />
<input type="checkbox" checked="checked" name="tak2" />
<input type="checkbox" checked="checked" name="tak3" />
Przycisk opcji: <input type="radio" />

Pozwala wybrać tylko jeden z elementów o takiej samej nazwie. Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked
.
<label><input type="radio" name="plec" value="k" />
Kobieta</label>
<label><input type="radio" name="plec" value="m" />
Mężczyzna</label>
Formularz ryzykujący bardzo obleśne procesy o dyskryminację ;)
Ukryty element: <input type="hidden" />
To pole, mimo że nie jest widoczne, może być odczytane i zmienione przez zaawansowanych użytkowników, więc nie umieszczaj w nim ważnych danych i nie ufaj bardziej, niż zwykłemu polu tekstowemu.
Wartość umieszczona w atrybucie value
zostanie przesłana razem z formularzem, ale nie będzie widoczna dla użytkownika.
Elementy ukryte w inny sposób — przez display:none
— pozostaną widoczne w przeglądarkach tekstowych. Widoczność elementu nigdy nie wpływa na to, czy zostanie wysłany.
Listy opcji: <select>
, <option>
, <optgroup>
Lista może być wielokrotnego wyboru, jeśli ma atrybut multiple
. W przeciwnym wypadku użytkownik może wybrać tylko jedną opcję. Atrybut size
ustala ile opcji będzie widoczne
naraz. size="1"
oznacza listę rozwijaną.
Opcje definiuje się elementami <option>
. Mogą one zawierać tylko tekst. Każda z opcji może mieć atrybut value
określający jej wartość. Jeśli go nie ma, wartością jest
zawartość opcji. Atrybut selected
powoduje, że opcja jest domyślnie zaznaczona. disabled
nie pozwala wybrać danej opcji.
Opcje można pogrupować elementami <optgroup>
. Nazwę grupy podaje się w jej atrybucie label
. Grupy nie mogą być wybrane (tylko opcje w nich). Nie można
umieszczać grup w grupach.


<select name="ulubiona-liczba">
<option>
0</option>
<optgroup label="Nieparzysta">
<option value="1">
Jeden</option>
<option value="3">
3</option>
</optgroup>
<optgroup label="Parzysta">
<option>
2</option>
<option selected="selected">
4</option>
</optgroup>
<option disabled="disabled">
gazylion</option>
</select>
Wysyłanie formularza: <input type="submit" />
Tworzy przycisk, którego wciśnięcie spowoduje wysłanie formularza. Etykietę przycisku umieszcza się w atrybucie value
.
Jeśli ustawi się atrybut name
, to etykieta przycisku zostanie wysłana na serwer razem z formularzem, jeśli przycisk zostanie wciśnięty. Można w ten sposób zrobić formularz, który
wykonuje różne akcje zależnie od wciśniętego przycisku.

Przycisk: <button>
Tworzy przycisk, którego etykietą może być kod XHTML umieszczony wewnątrz elementu. Atrybut type
decyduje, czy wciśnięcie przycisku wyśle formularz (type="submit"
), czy
wykona skrypt (type="button"
). Atrybut value
określa co będzie wysłane do serwera, jeśli przycisk zostanie wciśnięty.
<button type="submit">
<img src="duzy-czerwony-przycisk.png" alt="Odpal rakiety" />
</button>
Grupa elementów: <fieldset>
+ <legend>
Dla przejrzystości formularza warto porozdzielać jego elementy na grupy. Służy do tego element <fieldset>
. Technicznie ten element nie zmienia formularza — jest tylko informacją
dla użytkowników.
Pierwszym dzieckiem <fieldset>
ma być element <legend>
. <legend>
zawiera
nazwę/etykietę dla grupy.

<fieldset><legend>
Dane osobowe</legend>
<div><label>
Imie<input type="text" name="imie" /></label></div>
<div><label>
Nazwisko<input type="text" name="nazwisko" /></label></div>
<div><label>
Data urodzenia<input type="date" name="data" /></label></div>
</fieldset>
Wysyłanie plików: <input type="file">
Wymaga ustawienia enctype
Ten element pozwoli użytkownikowi wybrać plik do wysłania. Niestety, nie da się kontrolować tego elementu — nie ma możliwości zasugerowania nazwy pliku, nie da się sprawdzić wielkości pliku przed wysłaniem go i możliwość zmiany wyglądu za pomocą CSS jest bardzo ograniczona.
Elementy tylko do odczytu: readonly
Elementom formularza można nadać atrybut readonly="readonly"
. Wtedy przeglądarka nie pozwoli użytkownikowi zmienić jego zawartości. Poza tym zachowanie elementu nie zmieni się i będzie
normalnie wysłany na serwer.
Tego atrybutu używa się do oznaczenia elementów, których wartość ma związek z formularzem i została narzucona (np. została wyliczona albo ustalona wcześniej).
<label>Twoje imie <input name="imie" value="Jan Kowalski" readonly="readonly" /></label>
<label>Nr telefonu <input name="telefon" value="123-555" /></label>
Element wyłączony: disabled
Element zostanie wyłączony — będzie tylko do odczytu i zostanie zignorowany przy nawigacji z klawiatury i przy wysyłaniu formularza.
Tego atrybutu używa się do oznaczenia elementów, które nie są potrzebne lub nie mogą być użyte w danym momencie (np. użytkownik wybrał, że dana sekcja formularza go nie dotyczy).
<label>Czy posiadasz samochód? <input type="checkbox" /></label>
<label>W jakim kolorze? <input type="text" disabled="disabled" />
Ponieważ za pomocą samego XHTML nie da się określić, jak elementy mają ze sobą współgrać (i w powyższym przykładzie element nigdy się nie odblokuje), ten atrybut prawie zawsze ustawia się za pomocą JavaScript
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 11.07.2007, 11:01