Formularze dostępne na stronach WWW zawierają szereg różnych kontrolek służących do wprowadzania danych. Artykuł szczegółowo omawia wszystkie elementy języka HTML dotyczące formularzy i wyjaśnia rolę oraz sposób wykorzystania poszczególnych atrybutów.
Formularz w języku HTML definiujemy stosując element FORM. Element ten należy do grupy elementów blokowych. Wewnątrz, pomiędzy znacznikami <FORM> oraz </FORM> umieszczamy zawartość formularza, na którą składają się głownie elementy INPUT, BUTTON, SELECT, OPTGROUP, OPTION, TEXTAREA, LABEL, FIELDSET oraz LEGEND. Kontrolki te układamy wewnątrz formularza stosując akapity, tabele oraz sekcje DIV.
Zwróćmy uwagę na fakt, że kontrolki formularza są elementami tekstowymi i nie mogą znajdować się bezpośrednio w elemencie FORM. Poprawną zawartością formularza jest co najmniej jeden element blokowy z wykluczeniem samego formularza (formularzy nie można zagnieżdżać!). Zatem pomiędzy znacznikami <FORM ...> oraz </FORM> umieszczamy tabele, akapity czy sekcje, zaś dopiero wewnątrz elementów blokowych właściwe kontrolki formularza. Kod:
PRZYKŁAD NIEPOPRAWNY <FORM ...> Login: <INPUT name="login"><BR> Hasło: <INPUT type="password" name="haslo"><BR> <INPUT type="submit" value="Loguj"> </FORM>
jest niepoprawny. Należy go zapisać:
<FORM ...> <P> Login: <INPUT name="login"><BR> Hasło: <INPUT type="password" name="haslo"><BR> <INPUT type="submit" value="Loguj"> </P> </FORM>
lub stosując tabelę:
<FORM ...> <TABLE> <TR> <TD>Login:</TD> <TD><INPUT name="login"><BR></TD> </TR> ... </TABLE> </FORM>
Rysunek 1 przedstawia dwa przykładowe formularze, stosujące do rozłożenia kontrolek akapit oraz tabelę.
Rys. 1. Kontrolki formularza rozmieszczone wewnątrz akapitu oraz tabeli.
Tabela 1 zawiera zestawienie wszystkich elementów języka HTML, dotyczących formularzy.
Element | Znaczenie | Poprawna zawartość |
---|---|---|
FORM | Formularz. | Elementy blokowe z wykluczeniem elementu FORM. |
INPUT | Wiersz wprowadzania danych, przycisk, pole wyboru, wykluczające pole wyboru. | Element pusty. |
BUTTON | Przycisk. | Element blokowy lub tekstowy z wyjątkiem A, FORM, FIELDSET oraz kontrolek formularzy INPUT, SELECT, TEXTAREA, LABEL oraz BUTTON. |
SELECT | Lista opcji. | Wyłącznie elementy OPTGROUP oraz OPTION. |
OPTGROUP | Grupa opcji. | Element OPTION. |
OPTION | Pojedyncza opcja. | Tekst pozbawiony znaczników. |
TEXTAREA | Pole tekstowe. | Tekst pozbawiony znaczników. |
LABEL | Etykieta kontrolki formularza. | Elementy tekstowe. |
FIELDSET | Grupa kontrolek formularza. | Tekst pozbawiony znaczników, LEGEND oraz elementy blokowe lub tekstowe. |
LEGEND | Etykieta grupy kontrolek. | Elementy tekstowe (w tym: kontrolki formularzy INPUT, SELECT, TEXTAREA, LABEL oraz BUTTON). |
Tabela 1. Elementy języka HTML, które dotyczą formularzy.
Element FORM posiada - oprócz standardowych atrybutów grupy coreattrs (czyli m.in. id, class, title, style, lang oraz standardowych zdarzeń) - własne atrybuty charakterystyczne: action, method, enctype, accept, name, onsubmit, onreset oraz accept-charset.
Najważniejszym z nich jest obowiązkowy atrybut action. Ustala on adres URL skryptu, który będzie wywołany po zatwierdzeniu formularza przyciskiem Wyślij. Dane wprowadzone do formularza zostaną przekazane do podanego skryptu.
Drugim ważnym atrybutem formularza jest atrybut method. Jego wartością jest nazwa metody protokołu HTTP. Dopuszczalnymi wartościami są GET oraz POST. Wprawdzie wartością domyślną jest GET, jednakże zaleca się - głównie z powodów bezpieczeństwa - stosowanie metody POST.
Atrybut enctype ustala sposób zakodowania danych dołączonych do zapytania. Ma on znaczenie jedynie, gdy formularz przekazujemy metodą POST (w przypadku metody GET zawsze stosowane jest kodowanie application/x-www-form-urlencoded). Domyślnie, wartością tego atrybutu jest typ application/x-www-form-urlencoded. W przypadku przekazywania pliku na serwer, należy ustalić wartość tego atrybutu na multipart/form-data.
Z atrybutu enctype korzystamy na dwa sposoby. Jeśli formularz służy do przekazywania pliku na serwer, wówczas należy nadać atrybutowi enctype wartość enctype="multipart/form-data". W przeciwnym razie (czyli w przypadku zwykłego formularza zawierającego kilka kontrolek) atrybut enctype pomijamy. Przyjmie on wówczas wartość domyślną.
Atrybut accept nie jest wykorzystywany. Miał on umożliwiać wskazanie typów plików, jakie mogą być wysłane formularzem na serwer. Jednakże współczesne przeglądarki ignorują jego wartość.
Wreszcie zdarzenia onsubmit oraz onreset umożliwiają wykonanie skryptów po zatwierdzeniu oraz zresetowaniu formularza.
Tabela 2 zawiera sumaryczne zestawienie wszystkich specyficznych atrybutów formularza.
Atrybut | Znaczenie | Wartość domyślna | Uwagi |
---|---|---|---|
action | Adres URL skryptu przetwarzającego formularz. | brak | Wymagany. |
method | GET lub POST: metoda protokołu HTTP, użyta do przekazania wprowadzonych danych. | GET | Zalecane jest stosowanie metody POST. |
enctype | Sposób kodowania danych zawartych w formularzu. | application/x-www-form-urlencoded | W przypadku zwykłego formularza należy stosować metodę POST i domyślną wartość atrybutu enctype (pomijamy atrybut enctype w znaczniku <FORM ...>). W przypadku formularza, który przesyła na serwer plik stosujemy metodę POST i enctype="multipart/form-data". |
accept | Typ plików, jakie można przesłać na serwer. | - | Atrybut ignorowany przez przeglądarki. |
name | Nazwa identyfikująca formularz. | - | Użycie tego atrybutu jest odradzane. W jego miejsce należy stosować atrybut id. |
onsubmit | Skrypt wykonywany po zatwierdzeniu formularza, przed wysłaniem zapytania HTTP. | - | Obsługa zdarzenia może być wykorzystana do walidacji formularza. Jeśli skrypt zwraca wartość false, wówczas formularz nie zostaje wysłany. |
onreset | Skrypt wykonywany po zresetowaniu formularza. | - | Umożliwia inicjalizację pól formularza wartościami domyślnymi. |
accept-charset | Kodowanie znaków. | - | Kodowanie znaków stosowane w formularzu. |
Tabela 2. Atrybuty specyficzne elementu FORM.
Formularz może zawierać kilka rodzajów kontrolek. Należą do nich:
Kontrolki te umieszczamy wewnątrz formularza stosując elementy INPUT, BUTTON, SELECT, OPTGROUP, OPTION i TEXTAREA. Dodatkowo, elementy LABEL, FIELDSET i LEGEND umożliwiają pogrupowanie kontrolek oraz ustalenie etykiet.
Większość kontrolek zawartych w formularzu posiada atrybut name (wyjątkami są przyciski zatwierdzające i resetujące formularz, opcje i grupy opcji OPTION oraz OPTGROUP, jak również elementy FIELDSET, LEGEND i LABEL). Atrybut ten ustala nazwę kontrolki, jaka zostanie przekazana do skryptu. Jeśli wewnątrz następującej kontrolki INPUT:
<INPUT name="email">
wprowadzimy napis diabel@pieklo.com, wówczas do skryptu zostanie przekazana zmienna:
email=diabel@pieklo.com
W języku php, powyższa zmienna będzie dostępna w jednej z tablic $_POST lub $_GET, np.:
$_POST['email'] === 'diabel@pieklo.com'
Warto zwrócić uwagę na pewne ułatwienia występujące w języku php i dotyczące przetwarzania wielu pól formularza. Jeśli wartość atrybutów name kilku kontrolek zakończymy nawiasami kwadratowymi, np.
<INPUT name="kolor[]">
wówczas dane pochodzące z tychże kontrolek formularza zostaną zawarte w tablicy $_POST['kolor']. W ten sposób zamiast wielu osobnych zmiennych otrzymamy jedną tablicę zawierającą wiele wartości. Jest to szczególnie wygodne w przypadku pól wyboru (kontrolki INPUT typu checkbox) oraz list wielokrotnego wyboru (kontrolki SELECT z atrybutem multiselect).
Kolejnym atrybutem, jaki stosujemy w odniesieniu do większości kontrolek jest atrybut value. W zależności od kontrolki, atrybut ten ustala bieżącą wartość zmiennej lub etykietę kontrolki.
Również atrybuty readonly, disabled, accesskey oraz tabindex znajdują zastosowanie w odniesieniu do wielu kontrolek umieszczanych w formularzu. Atrybuty readonly oraz disabled są atrybutami logicznymi.
Wartości logiczne atrybutów możemy ustalić na dwa sposoby. Skrócony zapis ma postać:
<INPUT name="imie" readonly>
Natomiast w rozszerzonej formie, powyższy element będzie wyglądał następująco:
<INPUT name="imie" readonly="readonly">
Dokumentacja języka HTML przestrzega, że część przeglądarek rozpoznaje jedynie postać skróconą (patrz: specyfikacja języka HTML 4.01, strona 36).
Atrybut readonly uniemożliwia modyfikację wartości kontrolki. Kontrolka taka jest widoczna i może stać się aktywna (tj. możemy, korzystając na przykład z klawisza tabulacji, umieścić kursor wewnątrz kontrolki). Nie możemy jednak zmieniać jej wartości. Po zatwierdzeniu formularza, kontrolka taka jest przesyłana do skryptu przetwarzającego formularz.
Kontrolki posiadające atrybut disabled są niedostępne. Nie możemy zmieniać wartości takich kontrolek ani uczynić ich aktywnymi. Co więcej, po przesłaniu formularza, wartości kontrolek posiadających atrybut disabled nie są przesyłane do skryptu.
Jedynym sposobem odblokowania kontrolek readonly oraz disabled jest odpowiednie oprogramowanie zdarzeń formularza lub kontrolek w jednym z języków skryptowych, np. JavaScript. W przeciwnym razie, kontrolki takie będą przez cały czas niedostępne.
Atrybut accesskey ustala skrót klawiszowy dla danej kontrolki. W systemie Windows, skrót aktywujemy przytrzymując lewy klawisz Alt. Jeśli na przykład kontrolka INPUT posiada atrybut accesskey="K", wówczas po naciśnięciu klawiszy Alt+K, kursor zostanie umieszczony wewnątrz kontrolki. Niestety, żadna spośród popularnych przeglądarek nie wyróżnia skrótów klawiszowych (na przykład przez podkreślenie odpowiedniej litery w tekście etykiety). Jeśli chcemy poinformować użytkownika o dostępnych skrótach klawiszowych, to musimy wpisać w formularzu odpowiedni tekst. Dodatkowym problemem jest fakt, że przeglądarki posiadają predefiniowane skróty klawiszowe, przy czym każda z nich może posiadać inne, specyficzne dla siebie skróty. Trudno jest ustalić skróty klawiszowe, które nie są zdublowane przez żadną z popularnych przeglądarek. Zachowanie w przypadku zdublowania skrótu klawiszowego może być różne w przypadku różnych przeglądarek.
Ostatni z atrybutów ogólnych, tabindex, umożliwia ustalenie kolejności, w jakiej kontrolki formularza będą aktywowane klawiszem tabulacji. Wartością atrybutu jest liczba całkowita ustalająca pozycję kontrolki na liście.
W odniesieniu do kontrolek formularza możemy oprogramować kilka zdarzeń, jakie występują podczas wypełniania formularza. Zdarzeniami tymi są onfocus (występuje ono wtedy, gdy kontrolka staje się aktywna, tj. gdy kursor zostaje umieszczony wewnątrz kontrolki), onblur (występuje ono wtedy, gdy kursor opuszcza kontrolkę) onselect (występuje wówczas, gdy w polu tekstowym zostaje zaznaczony pewien tekst; dotyczy ono tylko pól tekstowych) oraz onchange (występuje wówczas, gdy kontrolka zmienia wartość).
Zdarzenia takie możemy oprogramować w językach skryptowych, na przykład JavaScript, VB czy tcl.
Element INPUT służy do umieszczania w formularzu kilku różnych rodzajów kontrolek, m.in. wierszy wprowadzania danych, pól wyboru oraz wykluczających pól wyboru. Posiada on atrybut type, który decyduje o typie kontrolki. Wartością domyślną atrybutu type jest text. Kontrolka INPUT typu text służy do wprowadzenia jednej linii tekstu.
Typ kontrolki | Zastosowanie |
---|---|
submit | Przycisk do wysyłania formularza. |
reset | Przycisk do zresetowania wprowadzonych danych. |
text | Pojedyncza linia tekstu. |
password | Pojedyncza linia tekstu. Wprowadzane znaki nie są widoczne. |
checkbox | Pole wyboru. |
radio | Wykluczające pole wyboru. |
hidden | Przycisk niewidoczny służący do dołączania dodatkowych zmiennych do formularza. |
button | Przycisk. |
file | Przycisk umożliwiający wybranie pliku. |
image | Obraz. Po kliknięciu obrazu do skryptu zostaną przesłane współrzędne klikniętego piksela. |
Tabela 3. Typy elementu INPUT.
Lista atrybutów elementu INPUT jest dość pokaźna. Pełne zestawienie jest zawarte w tabeli 4. Atrybuty elementu INPUT mają różne znaczenie w zależności od typu kontrolki (czyli wartości atrybutu type).
Atrybut | Znaczenie |
---|---|
type | Typ kontrolki. |
name | Nazwa kontrolki. |
value | Etykieta lub wartość. |
checked | Wybrana/niewybrana. |
disabled | Dostępna/niedostępna. |
readonly | Tylko do odczytu. |
size | Rozmiar kontrolki mierzony znakami. |
maxlength | Maksymalna liczba znaków mieszczących się w kontrolce. |
src | Adres URL obrazu. |
alt | Objaśnienie obrazu. |
usemap | Mapa. |
ismap | Czy kontrolka jest mapą? |
tabindex | Kolejność kontrolki przy naciskaniu klawisza tabulacji. |
accesskey | Skrót klawiszowy. |
onfocus | Obsługa zdarzenia uaktywnienia kontrolki. |
onblur | Obsługa zdarzenia deaktywacji kontrolki. |
onselect | Obsługa zdarzenia zaznaczania tekstu. |
onchange | Obsługa zdarzenia modyfikacji kontrolki. |
accept | Rodzaj plików, jakie mogą być wybrane przy przesyłaniu pliku na serwer. |
Tabela 4. Atrybuty kontrolki INPUT.
Niemal każdy formularz posiada przycisk zatwierdzający. Przycisk taki tworzymy stosując kontrolkę INPUT typu submit:
<INPUT type="submit" value="Submit">
Atrybut value ustala etykietę przycisku. Etykietą może być dowolny napis, na przykład OK lub Wyślij.
Jeden formularz może posiadać kilka przycisków zatwierdzających wysłanie. Wówczas przyciski powinny posiadać atrybut name, umożliwiający stwierdzenie, który z nich został naciśnięty.
<INPUT type="submit" value="Zaloguj" name="login"> <INPUT type="submit" value="Wyloguj" name="login"> <INPUT type="submit" value="Zmień hasło" name="passwd">
Po naciśnięciu jednego z przycisków, formularz zostanie wysłany na serwer. W tablicy $_POST będzie dostępna zmienna o indeksie ustalonym na podstawie atrybutu name i wartości równej atrybutowi value naciśniętego przycisku. Na przykład po naciśnięciu przycisku o etykiecie Wyloguj, otrzymamy:
$_POST['login'] === 'Wyloguj'
Przycisk do resetowania formularza posiada typ reset. Podobnie jak w przypadku przycisku wysyłającego formularz, atrybut value stanowi etykietę przycisku:
<INPUT type="reset" value="Resetuj">
Najczęściej stosowaną kontrolką formularzy jest wiersz wprowadzania danych. Kontrolkę taka tworzymy stosując element INPUT typu text:
<INPUT type="text" name="imie">
Ponieważ wartość text jest wartością domyślną, zatem powyższą kontrolkę można w równoważny sposób zapisać jako:
<INPUT name="imie">
W stosunku do wiersza wprowadzania danych zastosowanie znajdują wspomniane już atrybuty ogólne name, value, readonly, disabled, accesskey oraz tabindex jak również size i maxlength.
Atrybut size ustala szerokość pola mierzony liczbą znaków. Natomiast wartość maxlength ogranicza liczbę znaków, jaką kontrolka pomieści.
Pole INPUT typu password służy do wprowadzania hasła. Napis wprowadzany do kontrolki nie jest widoczny na ekranie. Kontrolka taka ma postać:
<INPUT type="password" name="haslo">
Należy pamiętać, że hasło wprowadzone do formularza nie podlega żadnej ochronie. Jest ono przekazywane w zapytaniu HTTP jako zwykły, niezaszyfrowany tekst. Jedyną ochroną, jaką zapewnia pole typu password jest uniemożliwienie podejrzenia hasła na ekranie.
Dla pola tekstowego typu password znaczenie atrybutów jest identyczne, jak w przypadku zwykłego pola tekstowego typu text.
Rys. 2. Standardowe pole tekstowe oraz pole typu password.
Ustalanie szerokości kontrolek INPUT możemy zrealizować stosując atrybut size, jak również wykorzystując arkusze stylów. W formularzu z rysunku 2, kontroli INPUT posiadają szerokość 100 pikseli ustaloną stylem:
INPUT { width : 100px; }
Element INPUT typu checkbox stanowi pole wyboru, które możemy zaznaczyć lub odznaczyć. W najprostszej postaci pole wygląda następująco:
<INPUT type="checkbox" name="win95">
Po przesłaniu formularza zawierającego powyższe pole, w skrypcie dostępna będzie zmienna $_POST['win95'] o wartości on:
$_POST['win95'] === 'on'
Jeśli pole posiada atrybut value, np.:
<INPUT type="checkbox" name="dos" value="MSDOS">
to zmienna dostępna w skrypcie przyjmie wartość ustaloną atrybutem value. W powyższym przykładzie będzie to:
$_POST['dos'] === 'MSDOS'
Dodatkowo, atrybut checked może być wykorzystany do inicjalizacji pól wyboru. Pola nie posiadające atrybutu checked są domyślnie odznaczone, zaś pola z podanym atrybutem checked są zaznaczone. Dowolna liczba pól wyboru może być równocześnie zaznaczona.
<INPUT type="checkbox" name="win98" checked="checked">
Rys. 3. Pola wyboru.
Zwróćmy uwagę, że wszystkie pola wyboru posiadają własne wartości atrybutów name. Są one wówczas przekazywane jako niezależne zmienne do skryptu.
Jak już wspomnieliśmy, w języku php możliwe jest również przekazanie powiązanych ze sobą opcji wyboru w postaci tablicy. W tym celu należy wszystkim powiązanym ze sobą znaczeniowo polom wyboru nadać identyczną nazwę, zakończoną nawiasami kwadratowymi:
<INPUT type="checkbox" name="system[]" value="Linux"> <INPUT type="checkbox" name="system[]" value="FreeBSD"> ...
Każda z opcji musi posiadać atrybut value. W takim przypadku, po zatwierdzeniu formularza, w skrypcie w php w tablicy $_POST pod indeksem system (jest to wartość atrybutu name) dostępna będzie tablica zawierająca wartości atrybutów value wszystkich zaznaczonych pól wyboru o wartości atrybutu name="system[]".
Drugim rodzajem pól wyboru są pola wzajemnie się wykluczające. W odróżnieniu do pól wyboru typu checkbox, tylko jedno spośród kilku pól INPUT typu radio może być zaznaczone.
POLSKA: <INPUT type="radio" name="kraj" value="PL"> NIEMCY: <INPUT type="radio" name="kraj" value="DE">
Wszystkie powiązane ze sobą pola muszą posiadać identyczną wartość atrybutu name. W powyższym przykładzie wartością tą jest napis kraj. Ponadto każde pole wyboru musi posiadać wartość ustaloną atrybutem value. Po zatwierdzeniu formularza, tablica $_POST będzie zawierała element o indeksie równym atrybutowi name i wartości równej atrybutowi value wybranego pola, na przykład:
$_POST['kraj'] === 'PL'
Kontrolki możemy zainicjować stosując - podobnie jak w przypadku pól typu checkbox - atrybut checked. Tym razem jednak, zaznaczyć możemy co najwyżej jedno pole.
Dodajmy, że formularz może zawierać kilka niezależnych grup kontrolek radio. Na przykład wybór kraju oraz dyscypliny sportu. Oba wybory są niezależne. W ramach każdej kategorii zaznaczyć możemy jedynie jeden element. W takim przypadku, obie grupy kontrolek są odróżniane na podstawie atrybutu name. Kontrolki z każdej grupy współdzielą unikalną nazwę.
Rys. 4. Wykluczające się wzajemnie pola wyboru.
Kolejnym typem kontrolek INPUT są kontrolki ukryte. Kontrolki takie są niewidoczne i służą do przekazania dodatkowych zmiennych. Ponieważ nie są one widoczne, nie można zmieniać ich wartości za pomocą myszy czy klawiatury. Oto przykładowe kontrolki ukryte:
<INPUT type="hidden" name="cena" value="123456"> <INPUT type="hidden" name="valuta" value="EURO">
Możemy je wykorzystać na przykład do podpisywania formularza. Umieszczając w formularzu pole ukryte zawierające pewną, wygenerowaną przez skrypt, trudną do odgadnięcia, wartość możemy upewnić się, że dane przesłane po zatwierdzeniu skryptu pochodzą faktycznie z formularza.
Należy mieć świadomość, że kontrolki ukryte nie są w żaden sposób zaszyfrowane ani ukryte przed użytkownikiem. Zaglądając do źródła strony, ujrzymy wszystkie ukryte kontrolki zawarte w formularzu. Dane przekazywane w postaci kontrolek ukrytych warto zaszyfrować.
Ponieważ kontrolki te nie są w ogóle wyświetlane przez przeglądarkę, zatem w odniesieniu do nich nie ma sensu stosowanie dodatkowych atrybutów.
Kontrolka INPUT typu button jest przyciskiem. Przyciski takie, po naciśnięciu, nie powodują żadnej predefiniowanej akcji ze strony przeglądarki. Ani nie resetują zawartości, ani nie wysyłają formularza. W celu wykorzystania takiego przycisku, należy oprogramować obsługę zdarzeń.
<INPUT type="button" value="Pierwszy"> <INPUT type="button" value="Drugi"> <INPUT type="submit" value="Wyślij">
Pole INPUT typu file służy do przekazywania za pomocą formularza pliku na serwer. Kontrolka taka jest przedstawiana w formularzu w postaci przycisku z napisem Przeglądaj.... Po naciśnięciu przycisku, przeglądarka wyświetla okno dialogowe, które umożliwia wybór pliku. Po dokonaniu wyboru i zatwierdzeniu formularza, na serwer zostaje przekazany wybrany plik.
Kontrolka taka posiada dwa istotne atrybuty: type oraz name. Atrybut name ustala nazwę zmiennej przekazanej do skryptu:
<INPUT type="file" name="plik">
Formularz zawierający kontrolki typu file musi być przekazywany metodą POST. Ponadto należy ustalić sposób kodowania danych pochodzących z formularza jako enctype="multipart/form-data".
W jaki sposób odczytać zawartość plików przekazanych na serwer w języku php? W odróżnieniu do innych kontrolek, pliki przekazane na serwer nie są zawarte w tablicy $_POST, a w tablicy $_FILES. Tablica $_FILES jest tablicą wielowymiarową. Jeśli kontrolka INPUT posiada atrybut name="plik", wówczas informacje na temat pliku przekazanego na serwer są zawarte w następujących polach tablicy $_FILES:
$_FILES['plik']['name'] $_FILES['plik']['type'] $_FILES['plik']['tmp_name'] $_FILES['plik']['error'] $_FILES['plik']['size']
Tablica $_FILES zawiera informacje na temat przekazanego pliku, nie zawiera natomiast samego pliku. Plik jest zapisany na dysku pod nazwą $_FILES['plik']['tmp_name']. Jeśli chcemy przeczytać jego zawartość, to możemy do tego wykorzystać następującą instrukcję:
$rob = file_get_contents($_FILES['plik']['tmp_name']);
Należy pamiętać, że plik ten zostanie usunięty automatycznie po zakończeniu przetwarzania skryptu. Należy albo go przetworzyć, korzystając z powyższej instrukcji, albo przenieść do innego folderu stosując funkcję move_uploaded_file().
W formularzu warto umieścić (przed kontrolką typu file) ukryte pole ustalające wartość zmiennej MAX_FILE_SIZE. Wartość taka ogranicza wielkość pliku, jaki możemy przekazać za pomocą formularza. Nie jest to zabezpieczenie przed złośliwymi użytkownikami, gdyż łatwo je ominąć (na przykład przygotowując własny formularz; do zabezpieczenia przed złośliwymi użytkownikami należy stosować opcje konfiguracyjne php: file_uploads, upload_max_filesize oraz upload_tmp_dir). Jednak dzięki zawarciu w formularzu informacji o maksymalnym rozmiarze pliku, unikniemy sytuacji, w której użytkownik czeka dłuższy odcinek czasu tylko po to, by zobaczyć komunikat (pochodzący ze skryptu php) informujący o tym, że wybrany plik jest zbyt duży. Jeśli informacja o maksymalnym rozmiarze jest zawarta w formularzu, to przeglądarka nie wysyła na serwer zbyt dużych plików.
<INPUT type="hidden" name="MAX_FILE_SIZE" value="3000">
Podana wielkość jest mierzona w bajtach.
Ostatnim typem kontrolek INPUT jest typ image. Kontrolka taka służy do umieszczenia w formularzu obrazu. Po kliknięciu obrazu, formularz zostaje przesłany, zaś do skryptu przekazywane są współrzędne klikniętego piksela.
Obowiązkowymi atrybutami są type, name, src oraz alt. Atrybut src ustala adres URL wyświetlanego obrazu, natomiast alt zawiera tekst alternatywny. (Rola obydwu atrybutów jest analogiczna jak w przypadku elementu IMG.)
Oto kod przykładowej kontrolki tego typu:
<INPUT type="image" name="obraz" src="z.jpg" alt="Przykład kontrolki INPUT typu image.">
W wyniku kliknięcia obrazu, do skryptu zostaną przekazane zmienne obraz_x oraz obraz_y zawierające współrzędne klikniętego piksela obrazu:
$_POST['obraz_x'] === '83' $_POST['obraz_y'] === '178'
Nazwy zmiennych obraz_x oraz obraz_y powstają przez dodanie odpowiednich przyrostków do nazwy kontrolki ustalonej atrybutem name.
Rys. 5. Kontrolka INPUT typu image.
Kolejnym elementem służącym do tworzenia kontrolek formularzy jest element BUTTON. Element ten służy do tworzenia przycisków. Atrybut type, o poprawnych wartościach submit, reset oraz button, ustala rodzaj przycisku.
Przycisk wykonany z wykorzystaniem elementu BUTTON ma następujący kod:
<BUTTON type="submit" name="p1"> Wyślij </BUTTON>
Jego działanie jest identyczne jak w przypadku przycisku:
<INPUT type="submit" name="p1">
Podobnie, przycisk BUTTON typu reset odpowiada przyciskowi INPUT typu reset, zaś BUTTON typu button - przyciskowi INPUT typu button.
Jedyna różnica pomiędzy guzikami tworzonymi elementami BUTTON i INPUT polega na tym, że przyciski BUTTON posiadają znaczniki otwierający i zamykający. Dzięki temu mogą posiadać zawartość. Jako zawartość przycisku możemy podać element IMG. Podany obraz zostanie umieszczony na przycisku.
Kod:
<BUTTON name="wyslanie" type="submit"> <IMG src="otworz.png" alt="Wysyłanie formularza"> </BUTTON>
tworzy przycisk przedstawiony na rysunku 6.
Rys. 6. Przycisk z ikoną.
Elementy SELECT, OPTION oraz OPTGROUP służą do tworzenia list.
Wewnątrz elementu SELECT umieszczamy poszczególne elementy listy definiowane elementem OPTION. Dodatkowo, opcje listy mogą być pogrupowane elementami OPTGROUP. Poprawną zawartością elementu SELECT są wyłącznie elementy OPTION oraz OPTGROUP.
W najprostszym przypadku, lista składa się z elementu SELECT zawierającego kilka opcji OPTION:
<SELECT name="dzien"> <OPTION>Poniedziałek</OPTION> <OPTION>Wtorek</OPTION> <OPTION>Środa</OPTION> ... </SELECT>
Po wybraniu pierwszego elementu listy i zatwierdzeniu formularza, w skrypcie będzie dostępna zmienna:
$_POST['dzien'] === 'Poniedziałek'
Opcje OPTION mogą posiadać dodatkowo atrybuty value oraz selected. Atrybut value ustala wartość zmiennej przekazanej do skryptu. Po wybraniu z poniższej listy opcji Wtorek i zatwierdzeniu formularza:
<SELECT name="dzien"> <OPTION>Poniedziałek</OPTION> <OPTION value="2">Wtorek</OPTION> ... </SELECT>
do skryptu zostanie przekazana zmienna:
$_POST['dzien'] === '2'
Natomiast atrybut selected służy do wskazania elementu listy, który powinien być początkowo wybrany.
Domyślnie, listy wyboru są wyświetlane w postaci list rozwijanych, które umożliwiają wybranie tylko jednego elementu. Właściwości listy możemy zmienić stosując atrybuty size oraz multiple elementu SELECT.
Atrybut size ustala liczbę elementów listy, które będą widoczne na ekranie (wartością domyślną jest 1 - lista rozwijana). Lista:
<SELECT name="dzien" size="3"> <OPTION>Poniedziałek</OPTION> <OPTION>Wtorek</OPTION> <OPTION>Środa</OPTION> <OPTION>Czwartek</OPTION> ... </SELECT>
będzie wyświetlana w postaci prostokąta zawierającego trzy wiersze i wyposażonego w suwak.
Natomiast atrybut multiple, jest atrybutem logicznym, który umożliwia zaznaczanie na liście kilku elementów. Zwróćmy uwagę, że w przypadku stosowania list wielokrotnego wyboru wygodnym jest - podobnie jak w przypadku pól wyboru - stosowanie nazwy zakończonej nawiasami kwadratowymi:
<SELECT name="dzien[]" size="7" multiple="multiple">
Wówczas, tablica $_POST będzie zawierała element o indeksie dzien. Element ten będzie tablicą zawierającą wartości wszystkich elementów wybranych na liście wielokrotnego wyboru.
Rysunek 7 przedstawia trzy omówione listy wyboru.
Rys. 7. Listy wyboru.
Stosując element OPTGROUP mamy możliwość nadania liście struktury. Opcje ograniczone znacznikami OPTGROUP stanowią podmenu niższego poziomu. Atrybut label elementu OPTGROUP ustala etykietę grupy opcji:
<SELECT name="auto"> <OPTGROUP label="Fiat"> <OPTION value="fiatalabea">Alabea</OPTION> <OPTION value="fiatmultipla">Multipla</OPTION> ... </OPTGROUP> <OPTGROUP label="Ford"> <OPTION value="fordEscort">Escort</OPTION> <OPTION value="fordfiesta">Fiesta</OPTION> ... </OPTGROUP> ... </SELECT>
Etykieta taka jest wytłuszczona na liście i nie można jej zaznaczyć. Lista stosująca elementy OPTGROUP została zilustrowana na rysunku 8.
Rys. 8. Lista z opcjami pogrupowanymi elementami OPTGROUP.
Ostatnim rodzajem kontrolek dostępnych w języku HTML, które umożliwiają wprowadzanie danych, są pola tekstowe. Pole takie definiujemy elementem TEXTAREA. Atrybuty rows oraz cols ustalają wymiar pola tekstowego mierzony liczbą wierszy i kolumn tekstu.
Poniższe pole tekstowe liczy pięć wierszy testu. W każdym wierszu możemy umieścić 10 znaków:
<TEXTAREA name="list" rows="5" cols="10"> Kto? Gdzie? Kiedy? </TEXTAREA>
Po wprowadzeniu większej liczby wierszy tekstu, suwak pionowy kontrolki stanie się aktywny. Natomiast szerokość kontrolki nie podlega zmianie nawet po wprowadzeniu długiego tekstu. Suwak poziomy również się nie pojawia - zbyt długi tekst zostaje zawinięty.
Początkowa zawartość kontrolki jest umieszczana pomiędzy znacznikami TEXTAREA.
Dodatkowymi elementami, jakie możemy umieścić w formularzu są etykiety LABEL, elementy grupujące FIELDSET oraz podpisy grup LEGEND. Elementy te nie umożliwiają wprowadzania danych do formularza. Modyfikują jedynie wygląd oraz strukturę formularza, dzięki czemu formularz staje się bardziej czytelny.
Etykiety LABEL służą do podpisania kontrolek. Umieszczamy je w formularzu na dwa sposoby. Po pierwsze możemy podpisywaną kontrolkę umieścić wewnątrz etykiety:
<P> <LABEL> Imię: <INPUT name="imie"> </LABEL> </P>
W powyższym przykładzie tekst Imię jest podpisem pola INPUT (pamiętajmy, że element LABEL nie może występować bezpośrednio w formularzu; konieczne jest użycie elementu blokowego, na przykład akapitu).
Po drugie możemy wykorzystać atrybut for elementu LABEL. Atrybut ten zawiera identyfikator kontrolki, z którą związana jest etykieta:
<TR> <TD><LABEL for="fimie">Imię:</LABEL></TD> <TD><INPUT name="imie" id="fimie"></TD> </TR>
Drugą z podanych metod możemy wykorzystać także w przypadku stosowania tabel do ułożenia kontrolek formularza.
W odniesieniu do standardowych przeglądarek, Internet Explorer, FireFox, Opera czy Netscape, stosowanie etykiet LABEL nie niesie żadnych korzyści. Powyższe dwa przykłady wyglądałyby zupełnie identycznie bez zastosowania etykiet. Sytuacja zmienia się w przypadku nietypowych przeglądarek (na przykład przeglądarek przeznaczonych dla osób niewidomych), Przeglądarki takie, mogą wykorzystać powiązanie etykiet z kontrolkami do poinformowania użytkownika o roli kontrolki.
Etykiety, podobnie jak i inne kontrolki formularzy, mogą posiadać skrót klawiszowy. W przypadku przeniesienia kursora do etykiety (poprzez aktywację skrótu klawiszowego lub kliknięcie w etykietę; kliknięcie w etykietę działa poprawnie - w Internet Explorerze - jedynie wtedy, gdy stosujemy etykiety wykorzystujące atrybut for), kursor zostanie faktycznie umieszczony w kontrolce skojarzonej z etykietą.
Kontrolki dotyczące podobnej tematyki możemy zgrupować stosując element FIELDSET. Element ten należy do grupy elementów blokowych i może występować bezpośrednio pomiędzy znacznikami formularza. Kontrolki umieszczone wewnątrz elementu FIELDSET zostaną otoczone obramowaniem. Ramkę możemy wzbogacić o podpis stosując element LEGEND. Jedynymi atrybutami elementu FIELDSET są atrybuty grupy attrs, natomiast element LEGEND posiada ponadto atrybut accesskey.
Rysunek 9 przedstawia formularz zawierający dwie grupy kontrolek podpisane „Kto wygra mistrzostwa świata w piłce nożnej w 2006 roku?” oraz „Którzy polscy zawodnicy zostaną powołani do kadry?” Pierwsza z grup jest zdefiniowana następującym kodem HTML:
<FIELDSET> <LEGEND> Kto wygra mistrzostwa świata w piłce nożnej w 2006 roku? </LEGEND> <INPUT type="radio" name="wygrany" value="DE"> Niemcy<BR> <INPUT type="radio" name="wygrany" value="PL"> Polska<BR> <INPUT type="radio" name="wygrany" value="FR"> Francja<BR> <INPUT type="radio" name="wygrany" value="IT"> Włochy </FIELDSET>
Rys. 9. Pola wyboru pogrupowane elementami FIELDSET. Obie grupy podpisano stosując elementy LEGEND.
Dziesięć omówionych elementów języka HTML (patrz tabela 1) pozwala na tworzenie witryn WWW zawierających elektroniczne formularze. Formularze takie znajdziemy w Internecie na każdym niemal kroku, wystarczy wspomnieć strony wyszukiwarek czy aplikacje służących do odbierania poczty elektronicznej. Jeśli planujemy wzbogacenie witryny o elementy interaktywne wykonane z wykorzystaniem formularzy, wówczas znajomość opisanych elementów i ich atrybutów będzie nieodzowna.
Na zakończenie zwróćmy uwagę, że formularze stanowią niejako pomost łączący trzy rodzaje języków: język znaczników, język przetwarzania po stronie serwera (ang. server-side) i język przetwarzania po stronie klienta (ang. client-side). Sam formularz jest przygotowany w języku HTML, kod przetwarzający dane wprowadzone w formularzu piszemy w języku server-side (np. PHP czy Perl), natomiast obsługę zdarzeń dotyczących formularza i jego kontrolek - w językach client-side (np. JavaScript czy VB).
Wykorzystywanie formularzy w sposób pełny wymaga zatem znajomości aż trzech języków!