HTML & PHP - Kontrolki formularzy 05-2005.pdf - HTML - christina22

C M Y K

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

HTML/PHP

K O N T R O LK I

FORMULARZY

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

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.

<TR>

<TD>Login:</TD>

</TR>

...

</TABLE>

</FORM>

Najwygodniejszym sposobem rozmieszczania kontrolek formularza jest

zastosowanie tabeli.

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

roz³o¿enia kontrolek akapit oraz tabelê.

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:

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-

PRZYK£AD NIEPOPRAWNY

Has³o: <INPUT type=”password” name=”haslo”><BR>

</FORM>

jest niepoprawny. Nale¿y go zapisaæ:

<P>

Has³o: <INPUT type=”password” name=”haslo”><BR>

</P>

</FORM>

lub stosuj¹c tabelê:

<TABLE>

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

na dołączonej płycie CD w katalogu

Warsztat_formularze.

INTERNET.maj.2005

KONTROLKI

C M Y K

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

HTML/PHP

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

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:

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.

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

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

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

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.

INTERNET.maj.2005

C M Y K

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

HTML/PHP

<INPUT type=”submit” value=”Zmieñ has³o” ©

name=”passwd”>

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

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’

$_POST[’login’] === ’Wyloguj’

Jeœli pole posiada atrybut value, np.:

Przycisk do resetowania formularza posiada typ reset. Podobnie jak

w przypadku przycisku wysy³aj¹cego formularz, atrybut value stanowi

etykietê przycisku:

to zmienna dostêpna w skrypcie przyjmie wartoœæ ustalon¹ atrybutem

value. W powy¿szym przyk³adzie bêdzie to:

Wiersz wprowadzania danych

Najczêœciej stosowan¹ kontrolk¹ formularzy jest wiersz wprowadzania

danych. Kontrolkê tak¹ tworzymy stosuj¹c element INPUT typu text:

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

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

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

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:

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

<INPUT type=”checkbox” name=”system[]” ©

value=”Linux”>

<INPUT type=”checkbox” name=”system[]” ©

value=”FreeBSD”>

...

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

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.

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:

POLSKA: <INPUT type=”radio” name=”kraj” ©

value=”PL”>

NIEMCY: <INPUT type=”radio” name=”kraj” ©

value=”DE”>

INPUT {

width : 100px;

Wszystkie powi¹zane ze sob¹ pola musz¹ mieæ identyczn¹ wartoœæ

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

}

INTERNET.maj.2005

C M Y K

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

HTML/PHP

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:

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:

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

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

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

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:

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:

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:

INTERNET.maj.2005

C M Y K

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

HTML/PHP

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

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

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:

Nazwy zmiennych obraz_x oraz obraz_y powstaj¹ przez dodanie od-

powiednich przyrostków do nazwy kontrolki ustalonej atrybutem name.

<OPTION>Poniedzia³ek</OPTION>

<OPTION value=”2”>Wtorek</OPTION>

...

</SELECT>

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:

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:

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

Jego dzia³anie jest identyczne jak w przypadku przycisku:

<OPTION>Poniedzia³ek</OPTION>

<OPTION>Wtorek</OPTION>

<OPTION>Œroda</OPTION>

<OPTION>Czwartek</OPTION>

...

</SELECT>

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:

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:

</BUTTON>

tworzy przycisk przedstawiony na rys. 6.

Rys. 6.

Przycisk z ikon¹

multiple=”multiple”>

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:

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.

<OPTION>Poniedzia³ek</OPTION>

<OPTION>Wtorek</OPTION>

<OPTION>Œroda</OPTION>

...

</SELECT>

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:

Po wybraniu pierwszego elementu listy i zatwierdzeniu formularza,

w skrypcie bêdzie dostêpna zmienna:

$_POST[’dzien’] === ’Poniedzia³ek’

INTERNET.maj.2005

HTML & PHP - Kontrolki formularzy 05-2005.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: