Warsztat_HTML-PHP

Elementy języka HTML dotyczące formularzy

Formularz w jêzyku HTML definiujemy stosuj¹c element FORM. Ele-
ment 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 ele-
ment 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ê:

Najwygodniejszym sposobem rozmieszczania kontrolek formularza jest
zastosowanie tabeli.

<TR>
<TD>Login:</TD>
<TD><INPUT name=”login”><BR></TD>
</TR>
...
</TABLE>
</FORM>

Rys. 1 przedstawia dwa przyk³adowe formularze, które stosuj¹ do

roz³o¿enia kontrolek akapit oraz tabelê.

Rys. 1. Kontrolki formularza rozmieszczone wewn¹trz akapitu
oraz tabeli

Atrybuty formularza

Element FORM ma – 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 formula-
rza 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 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 ko-
dowanie application/x-www-form-urlencoded). Domyœlnie wartoœci¹
tego atrybutu jest typ application/x-www-form-urlencoded. W przy-
padku 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æ atry-

HTML/PHP

INTERNET.maj.2005

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

Przykłady i tabele z tego artykułu znajdują się

na dołączonej płycie CD w katalogu

Warsztat_formularze.

Formularze na stronach WWW zawieraj¹ ró¿ne kontrolki s³u¿¹ce 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.

W³odzimierz Gajda

KONTROLKI

FORMULARZY

KONTROLKI

butowi enctype wartoœæ enctype=”multipart/form-data”. W przeciw-
nym razie (czyli w przypadku zwyk³ego formularza zawieraj¹cego kil-
ka kontrolek) atrybut enctype pomijamy. Przyjmie on wówczas war-
toœæ 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 wspó³czesne przegl¹darki ignoruj¹ jego wartoœæ.

Wreszcie zdarzenia onsubmit oraz onreset umo¿liwiaj¹ wykonanie

skryptów po zatwierdzeniu oraz zresetowaniu formularza.

Kontrolki formularza

Formularz mo¿e zawieraæ kilka rodzajów kontrolek. Nale¿¹ do nich:
wiersze wprowadzania danych, wiersze wprowadzania hase³, przyci-
ski, przyciski wyboru (ang. checkbox), wykluczaj¹ce siê przyciski wy-
boru (ang. radio buttons), listy rozwijane, listy wyboru, pola tekstowe,
pola ukryte oraz przyciski umo¿liwiaj¹ce wybór pliku. Kontrolki te
umieszczamy wewn¹trz formularza stosuj¹c elementy INPUT,
BUTTON, SELECT, OPTGROUP, OPTION i TEXTAREA. Dodatko-
wo, elementy LABEL, FIELDSET i LEGEND umo¿liwiaj¹ pogrupo-
wanie kontrolek oraz ustalenie etykiet.

Atrybuty ogólne kontrolek formularza

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 kon-
trolki INPUT:

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 kwadrato-
wymi, np.:

wówczas dane pochodz¹ce z tych¿e kontrolek formularza zostan¹ za-
warte w tablicy $_POST[’kolor’]. W ten sposób zamiast wielu osob-
nych 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 znajdu-

j¹ zastosowanie w odniesieniu do wielu kontrolek umieszczanych w for-
mularzu. Atrybuty readonly oraz disabled s¹ atrybutami logicznymi.

Atrybut readonly uniemo¿liwia modyfikacjê wartoœci kontrolki.

Kontrolka taka jest widoczna i mo¿e staæ siê aktywna (tj. mo¿emy, ko-
rzystaj¹c na przyk³ad z klawisza tabulacji, umieœciæ kursor wewn¹trz

kontrolki). Nie mo¿emy jednak zmieniaæ jej wartoœci. Po zatwierdze-
niu formularza kontrolka taka jest przesy³ana do skryptu przetwarzaj¹-
cego formularz.

Kontrolki posiadaj¹ce atrybut disabled s¹ niedostêpne. Nie mo¿e-

my 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 ra-
zie 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 od-
powiedniej litery w tekœcie etykiety). Jeœli chcemy poinformowaæ u¿yt-
kownika o dostêpnych skrótach klawiszowych, to musimy wpisaæ w for-
mularzu 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 popu-
larnych przegl¹darek. Zachowanie w przypadku zdublowania skrótu kla-
wiszowego mo¿e byæ ró¿ne w przypadku ró¿nych przegl¹darek.

Ostatni z atrybutów ogólnych, tabindex, umo¿liwia ustalenie kolej-

noœci w jakiej kontrolki formularza bêd¹ aktywowane klawiszem tabu-
lacji. Wartoœci¹ atrybutu jest liczba ca³kowita ustalaj¹ca pozycjê kon-
trolki na liœcie.

Zdarzenia dotyczące kontrolek

W odniesieniu do kontrolek formularza mo¿emy oprogramowaæ kilka
zdarzeñ wystêpuj¹cych podczas wype³niania formularza. Zdarzeniami
tymi s¹ onfocus (gdy kontrolka staje siê aktywna, tj. gdy kursor zostaje
umieszczony wewn¹trz kontrolki), onblur (gdy kursor opuszcza kon-
trolkê) onselect (gdy w polu tekstowym zostaje zaznaczony pewien
tekst; dotyczy tylko pól tekstowych) oraz onchange (gdy kontrolka
zmienia wartoœæ).

Zdarzenia takie mo¿emy oprogramowaæ w jêzykach skryptowych,

na przyk³ad JavaScript, VB czy tcl.

Elementy INPUT

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 decy-
duje o typie kontrolki. Wartoœci¹ domyœln¹ atrybutu type jest text.
Kontrolka INPUT typu text s³u¿y do wprowadzenia jednej linii tekstu.

Lista atrybutów elementu INPUT jest doœæ pokaŸna. Pe³ne zesta-

wienie jest zawarte w tabeli 4 (na CD). Atrybuty elementu INPUT ma-
j¹ ró¿ne znaczenie w zale¿noœci od typu kontrolki (czyli wartoœci atry-
butu type).

Przyciski zatwierdzające i resetujące formularz

Niemal ka¿dy formularz posiada przycisk zatwierdzaj¹cy. Przycisk
taki tworzymy stosuj¹c kontrolkê INPUT typu submit:

Atrybut value ustala etykietê przycisku. Etykiet¹ mo¿e byæ dowol-

ny napis, na przyk³ad OK lub Wyœlij.

Jeden formularz mo¿e mieæ kilka przycisków zatwierdzaj¹cych

wys³anie. Wówczas przyciski powinny posiadaæ atrybut name, umo¿li-
wiaj¹cy stwierdzenie, który z nich zosta³ naciœniêty.

HTML/PHP

INTERNET.maj.2005

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

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

Wiersz wprowadzania danych

Najczêœciej stosowan¹ kontrolk¹ formularzy jest wiersz wprowadzania
danych. Kontrolkê tak¹ tworzymy stosuj¹c element INPUT typu text:

Poniewa¿ wartoœæ text jest wartoœci¹ domyœln¹, zatem powy¿sz¹

kontrolkê mo¿na w równowa¿ny sposób zapisaæ jako:

W stosunku do wiersza wprowadzania danych zastosowanie znaj-

duj¹ 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 hasła

Pole INPUT typu password s³u¿y do wprowadzania has³a. Napis wpro-
wadzany do kontrolki nie jest widoczny na ekranie. Kontrolka taka ma
postaæ:

Nale¿y pamiêtaæ, ¿e has³o wprowadzone do formularza nie pod-

lega ¿adnej ochronie. Jest ono przekazywane w zapytaniu HTTP
jako zwyk³y, niezaszyfrowany tekst. Jedyn¹ ochron¹, jak¹ zapew-
nia pole typu password, jest uniemo¿liwienie podejrzenia has³a na
ekranie.

Dla pola tekstowego typu password znaczenie atrybutów jest iden-

tyczne, 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æ stosu-

j¹c atrybut size, jak równie¿ wykorzystuj¹c arkusze stylów. W formu-
larzu z rysunku 2 kontrolki INPUT maj¹ szerokoœæ 100 pikseli ustalo-
n¹ stylem:

INPUT {

width : 100px;

}

Pola wyboru

Element INPUT typu checkbox stanowi pole wyboru, które mo¿emy
zaznaczyæ lub odznaczyæ. W najprostszej postaci pole wygl¹da nastê-
puj¹co:

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

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

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

Rys. 3. Pola wyboru

Zwróæmy uwagê, ¿e wszystkie pola
wyboru posiadaj¹ w³asne wartoœci atry-
butów name. S¹ one wówczas przeka-
zywane jako niezale¿ne zmienne do
skryptu.

Jak ju¿ wspomnieliœmy, w jêzyku PHP mo¿liwe jest równie¿ prze-

kazanie powi¹zanych ze sob¹ opcji wyboru w postaci tablicy. W tym
celu nale¿y wszystkim powi¹zanym ze sob¹ znaczeniowo polom wy-
boru 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 ta-
blica zawieraj¹ca wartoœci atrybutów value wszystkich zaznaczonych
pól wyboru o wartoœci atrybutu name=”system[]”.

Wykluczające pola wyboru

Drugim rodzajem pól wyboru s¹ pola wzajemnie siê wykluczaj¹ce.
W odró¿nieniu od pól wyboru typu checkbox, tylko jedno spoœród kil-
ku 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¹ mieæ identyczn¹ wartoœæ

atrybutu name. W powy¿szym przyk³adzie wartoœci¹ t¹ jest napis kraj.

HTML/PHP

INTERNET.maj.2005

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

Ponadto ka¿de pole wyboru musi mieæ 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 atrybu-
towi value wybranego pola, na przyk³ad:

$_POST[’kraj’] === ’PL’

Kontrolki mo¿emy zainicjowaæ stosuj¹c – podobnie jak w przypad-

ku pól typu checkbox – atrybut checked. Tym razem jednak mo¿emy
zaznaczyæ 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 mo¿emy zaznaczyæ
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

Kontrolki ukryte

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

niaæ ich wartoœci za pomoc¹ myszy czy klawiatury. Oto przyk³adowe
kontrolki ukryte:

Mo¿emy je wykorzystaæ na przyk³ad do podpisywania formularza.

Umieszczaj¹c w formularzu pole ukryte zawieraj¹ce pewn¹, wygene-
rowan¹ 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 schowane 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 dodatko-
wych atrybutów.

Przyciski

Kontrolka INPUT typu button jest przyciskiem. Przyciski takie po
naciœniêciu nie powoduj¹ ¿adnej predefiniowanej akcji ze strony prze-
gl¹darki – ani nie resetuj¹ zawartoœci, ani nie wysy³aj¹ formularza.
W celu wykorzystania takiego przycisku, nale¿y oprogramowaæ obs³u-
gê zdarzeñ.

Kontrolka wyboru pliku

Pole INPUT typu file s³u¿y do przekazywania za pomoc¹ formularza
pliku na serwer. Kontrolka taka jest przedstawiana w formularzu w po-
staci przycisku z napisem Przegl¹daj... Po naciœniêciu przycisku prze-
gl¹darka wyœwietla okno dialogowe, które umo¿liwia wybór pliku. Po
dokonaniu wyboru i zatwierdzeniu formularza na serwer zostaje prze-
kazany wybrany plik.

Kontrolka taka posiada dwa istotne atrybuty: type oraz name. Atry-

but name ustala nazwê zmiennej przekazanej do skryptu:

Formularz zawieraj¹cy kontrolki typu file musi byæ przekazywany

metod¹ POST. Ponadto nale¿y ustaliæ sposób kodowania danych po-
chodz¹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æ, ko-
rzystaj¹c z powy¿szej instrukcji, albo przenieœæ do innego folderu, sto-
suj¹c funkcjê move_uploaded_file().

W formularzu warto umieœciæ (przed kontrolk¹ typu file) ukryte po-

le ustalaj¹ce wartoœæ zmiennej MAX_FILE_SIZE. Wartoœæ taka ogra-
nicza 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¿yt-
kownik czeka d³u¿szy czas tylko po to, by zobaczyæ komunikat (pocho-
dz¹cy ze skryptu PHP) informuj¹cy o tym, ¿e wybrany plik jest zbyt
du¿y. Jeœli informacja o maksymalnym rozmiarze jest zawarta w for-
mularzu, 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.

Obraz

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:

HTML/PHP

INTERNET.maj.2005

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

$_POST[’obraz_x’] === ’83’
$_POST[’obraz_y’] === ’178’

Nazwy zmiennych obraz_x oraz obraz_y powstaj¹ przez dodanie od-

powiednich przyrostków do nazwy kontrolki ustalonej atrybutem name.

Rys. 5. Kontrolka INPUT
typu image

Element BUTTON

Kolejnym elementem s³u¿¹cym
do tworzenia kontrolek formula-
rzy 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 wykorzysta-
niem elementu BUTTON ma nastêpuj¹cy kod:

<BUTTON type=”submit” name=”p1”>Wyœlij</BUTTON>

Jego dzia³anie jest identyczne jak w przypadku przycisku:

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>

tworzy przycisk przedstawiony na rys. 6.

Rys. 6.
Przycisk z ikon¹

Listy

Elementy SELECT, OPTION oraz OPTGROUP s³u¿¹ do tworzenia
list. Wewn¹trz elementu SELECT umieszczamy poszczególne elemen-
ty listy definiowane elementem OPTION. Dodatkowo, opcje listy mog¹
byæ pogrupowane elementami OPTGROUP. Poprawn¹ zawartoœci¹ ele-
mentu 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 selec-

ted. 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¹ widocz-
ne 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¿li-

wia 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 ele-
mentów wybranych na liœcie wielokrotnego wyboru.

Rys. 7. Listy wyboru

Stosuj¹c element OPTGROUP

mamy mo¿liwoœæ nadania liœcie
struktury. Opcje ograniczone
znacznikami OPTGROUP stano-
wi¹ podmenu ni¿szego poziomu.
Atrybut label elementu OPT-
GROUP ustala etykietê grupy
opcji:

HTML/PHP

INTERNET.maj.2005

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

NA CD

<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

Pole tekstowe

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 mierzo-
ny liczb¹ wierszy i kolumn tekstu.

Poni¿sze pole tekstowe liczy piêæ

wierszy tekstu. 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 podle-
ga 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 znacz-

nikami TEXTAREA.

Grupowanie i podpisywanie kontrolek formularza

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 for-
mularza. 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 spo-
soby. Po pierwsze mo¿emy podpisywan¹ kontrolkê umieœciæ
wewn¹trz etykiety:

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:

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 przypad-
ku nietypowych przegl¹darek (na przyk³ad przegl¹darek przeznaczo-
nych 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 (po-
przez aktywacjê skrótu klawiszowego lub klikniêcie etykiety; klikniê-
cie etykiety 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æ stosu-

j¹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 pod-
pis, stosuj¹c element LEGEND. Jedynymi atrybutami elementu
FIELDSET s¹ atrybuty grupy attrs, natomiast element LEGEND po-
siada ponadto atrybut accesskey.

Rysunek 9 przedstawia formularz zawieraj¹cy dwie grupy kontro-

lek 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

Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem

http://www.gajdaw.pl.

HTML/PHP

INTERNET.maj.2005

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD