Formularze#
Pola formularza#
Formularz (X)HTML to zbiór elementów zwanych kontrolkami (polami) i ich etykiet. Każda kontrolka ma nazwę i wartość, etykieta jest natomiast po prostu tekstowym opisem danej kontrolki.
Kontrolka może mieć wartość początkową (domyślną), która obecna jest już przed wypełnieniem formularza przez użytkownika i w wielu wypadkach może być przez niego zmieniona. Zazwyczaj określa się ją za pomocą atrybutu value. Obecną – czy to początkową, czy też wprowadzoną przez użytkownika wartość kontrolki – nazywa się wartością chwilową.
Istnieją również kontrolki nieaktywne i tylko do odczytu – ich wartość nie może być zmieniona przez użytkownika. Te pierwsze określa się za pomocą atrybutu disabled="disabled". Zastosowanie tych drugich wymaga zaś użycia atrybutu readonly="readonly". Przeglądarka najczęściej podświetli na szaro kontrolki nieaktywne, wyłączy możliwość wstawienia w nie kursora i edycji ich wartości. Nie będą one również wysłane na serwer. Wygląd kontrolek tylko do odczytu nie zmieni się i zostaną one zawarte w zestawie danych wysyłanych na serwer, jednak i tutaj niemożliwa będzie ich edycja.
Oprócz wysłania zawartości formularza do skryptu na serwerze użytkownik zazwyczaj ma też możliwość zresetowania formularza. Przywraca to wszystkie jego kontrolki do wartości domyślnych.
Nazwy pól (name)#
Nazwę kontrolki definiuje się przy użyciu atrybutu name. Ta nazwa pozwala skryptowi po stronie serwera rozpoznać dane, dlatego przesyłane są wartości tylko tych elementów, które mają nazwę.
Atrybut id w formularzach nie ma specjalnego znaczenia i jest niezależny od name.
Nazwy są zazwyczaj unikatowe w ramach jednego formularza dla danego pola (np. text) lub pól przynależnych do jednego pytania (np. checkbox). Jest to jednak ściśle uzależnione od języka stosowanego po stronie serwera.
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 (X)HTML i dla przeglądarek nie ma to żadnego szczególnego znaczenia.
Jeżeli wysyłasz formularz do skryptu po stronie serwera (np. PHP lub CGI), może to wymagać nadania innej nazwy dla każdego pola typu checkbox, 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).
Etykiety pól (label)#
Opis pola formularza nie jest z nim w żaden sposób związany. Aby to zmienić, należy użyć dodatkowego elementu label. Etykiety powinno się dodawać do wszystkich pól formularza (z wyjątkiem przycisków i pól ukrytych). Można to zrobić na dwa sposoby - poprzez umieszczenie pola i opisu 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ą. Przykładowo:
<label>Imię <input type="text" name="imie"></label>lub
<label for="imie1">Imię</label> <input type="text" name="imie" id="imie1">Powyższe polecenia wprowadzają 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. Tekst etykiety może się znajdować przed lub za elementem formularza, do którego się odnosi.
Etykiet nie można zagnieżdżać, tzn. umieszczać jednej wewnątrz drugiej. Pierwszy rodzaj stosowania etykiet nie jest obsługiwany przez MSIE 6.0, ale drugi rodzaj - tak. Od MSIE 7.0 wszystko jest w porządku.
W większości przypadków 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.
Podstawowe grupy pól#
Pola formularzy można podzielić na kilka podstawowych grup:
- input
- Z dodatkowymi atrybutami (
type,nameivalue), służy do tworzenia kontrolek, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję. Przykładowo:<form action="" method="post"> <p> <em><strong>Wpisz swoje imię i nazwisko:</strong></em> </p> <div> <input name="imie" size="40" type="text" /> </div> </form>Efekt:
Kolejny przykład:
<form action="" method="post"> <p> <em><strong>Ile masz lat?</strong></em> </p> <div> <label>Mniej niż 20 <input type="radio" value="0-20" name="wiek" /></label> <label>21-40 <input type="radio" value="21-40" name="wiek" /></label> <label>41-60 <input type="radio" value="41-60" name="wiek" /></label> <label>więcej niż 60 <input type="radio" value=">60" name="wiek" /></label> </div> </form>Efekt:
- select
- Służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. Przykładowo:
<form action="" method="post"> <p> <em><strong>Jakiej przeglądarki WWW używasz?</strong></em> </p> <div> <select size="4" name="browser"> <option>Mozilla Firefox</option> <option>Microsoft Internet Explorer</option> <option>Opera</option> <option>Google Chrome</option> <option>Safari</option> <option>Innej</option> </select> </div> </form>Efekt:
- textarea
- Jest poleceniem służącym do przesyłania dowolnych treści przez czytelnika (np. posta na forum lub komentarza).
Efekt:
Wykaz wszystkich pól#
W poniższej tabeli można zapoznać się ze wszystkimi rodzajami kontrolek:
| Nazwa kontrolki | Nazwa angielska kontrolki | Opis kontrolki |
|---|---|---|
| Pole tekstowe | Text input | Pole umożliwiające wprowadzenie tekstu |
| Pole hasła | Password input | Pole umożliwiające wprowadzenie hasła – zamiast wypisywanych znaków pojawiają się znaki zastępcze (przeważnie gwiazdki ****) |
| Pole wyboru (wielokrotnego) | Checkbox | Pole z możliwością zaznaczenia wielu opcji |
| Pole opcji (wybór jednokrotny) | Radio button | Pole z możliwością zaznaczenia tylko jednej opcji |
| Lista wyboru | Menu | Lista z możliwością zaznaczenia wielu lub jednej opcji |
| Pole wyboru pliku | File select | Pole umożliwiające wprowadzenie ścieżki dostępu do pliku na komputerze użytkownika |
| Pole ukryte | Hidden control | Pole niewidoczne dla użytkownika wypełniającego formularz |
| Obszar tekstowy | Textarea | Wieloliniowy obszar pozwalający na wprowadzenie tekstu |
| Przycisk | Push button | Przycisk bez domyślnie przypisanego zachowania |
| Przycisk wysyłający | Submit button | Przycisk, którego naciśnięcie powoduje wysłanie wypełnionego formularza na serwer |
| Graficzny przycisk wysyłający | Image button | Przycisk w postaci obrazu, którego naciśnięcie powoduje wysłanie wypełnionego formularza na serwer |
| Przycisk resetujący | Reset button | Przycisk, którego naciśnięcie powoduje powrót zawartości kontrolek formularza do wartości domyślnych |
Wygląd pól#
Domyślny wygląd kontrolek zależy nie tylko od systemu operacyjnego użytkownika przeglądającego stronę (np. Windows, Mac OS, Linux), ale również użytej przeglądarki (np. Internet Explorer, Mozilla Firefox, Apple Safari). Dlatego kontrolki na różnych konfiguracjach sprzętowych mogą wyglądać inaczej.
Bardziej problematyczny jest fakt, że 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 elementu legend.