HTML & PHP Kontrolki formularzy 05 2005

CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
KONTROLKI
KONTROLKI
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 wyjaSnia 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- Login:
ment ten należy do grupy elementów blokowych. Wewnątrz, pomię-

dzy znacznikami umieszczamy zawartoSć
...
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.
Rys. 1 przedstawia dwa przykładowe formularze, które stosują do
Najwygodniejszym sposobem rozmieszczania kontrolek formularza jest rozłożenia kontrolek akapit oraz tabelę.
zastosowanie tabeli.
Zwróćmy uwagę na fakt, że kontrolki formularza są elementami
tekstowymi i nie mogą znajdować się bezpoSrednio w elemencie
FORM. Poprawną zawartoScią formularza jest co najmniej jeden ele-
Rys. 1. Kontrolki formularza rozmieszczone wewnątrz akapitu
ment blokowy z wykluczeniem samego formularza (formularzy nie
oraz tabeli
można zagnieżdżać). Zatem pomiędzy znacznikami umieszczamy tabele, akapity czy sekcje, zaS dopiero
wewnątrz elementów blokowych właSciwe kontrolki formularza. Kod: Atrybuty formularza
Element FORM ma oprócz standardowych atrybutów grupy coreattrs
PRZYKŁAD NIEPOPRAWNY (czyli m.in. id, class, title, style, lang oraz standardowych zdarzeń)
rza przyciskiem WySlij. Dane wprowadzone do formularza zostaną
przekazane do podanego skryptu.
jest niepoprawny. Należy go zapisać: Drugim ważnym atrybutem formularza jest atrybut method. Jego
wartoScią jest nazwa metody protokołu HTTP. Dopuszczalnymi warto-
dowanie application/x-www-form-urlencoded). DomySlnie wartoScią
tego atrybutu jest typ application/x-www-form-urlencoded. W przy-
lub stosując tabelę: padku przekazywania pliku na serwer, należy ustalić wartoSć tego
atrybutu na multipart/form-data.

Z atrybutu enctype korzystamy na dwa sposoby. JeSli formularz
służy do przekazywania pliku na serwer, wówczas należy nadać atry-
Przykłady i tabele z tego artykułu znajdują się
na dołączonej płycie CD w katalogu
94 INTERNET.maj.2005
Warsztat_formularze.
FORMULARZY
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML/PHP
butowi enctype wartoSć enctype= multipart/form-data . W przeciw- kontrolki). Nie możemy jednak zmieniać jej wartoSci. Po zatwierdze-
nym razie (czyli w przypadku zwykłego formularza zawierającego kil- niu formularza kontrolka taka jest przesyłana do skryptu przetwarzają-
ka kontrolek) atrybut enctype pomijamy. Przyjmie on wówczas war- cego formularz.
toSć domySlną. Kontrolki posiadające atrybut disabled są niedostępne. Nie może-
Atrybut accept nie jest wykorzystywany. Miał on umożliwiać my zmieniać wartoSci takich kontrolek ani uczynić ich aktywnymi. Co
wskazanie typów plików, jakie mogą być wysłane formularzem na więcej, po przesłaniu formularza wartoSci kontrolek posiadających
serwer. Jednak współczesne przeglądarki ignorują jego wartoSć. atrybut disabled nie są przesyłane do skryptu.
Wreszcie zdarzenia onsubmit oraz onreset umożliwiają wykonanie Jedynym sposobem odblokowania kontrolek readonly oraz disabled
skryptów po zatwierdzeniu oraz zresetowaniu formularza. jest odpowiednie oprogramowanie zdarzeń formularza lub kontrolek
w jednym z języków skryptowych, np. JavaScript. W przeciwnym ra-
Kontrolki formularza zie kontrolki takie będą przez cały czas niedostępne.
Formularz może zawierać kilka rodzajów kontrolek. Należą do nich: Atrybut accesskey ustala skrót klawiszowy dla danej kontrolki.
wiersze wprowadzania danych, wiersze wprowadzania haseł, przyci- W systemie Windows skrót aktywujemy przytrzymując lewy klawisz
ski, przyciski wyboru (ang. checkbox), wykluczające się przyciski wy- Alt. JeSli na przykład kontrolka INPUT posiada atrybut accesskey= K ,
boru (ang. radio buttons), listy rozwijane, listy wyboru, pola tekstowe, wówczas po naciSnięciu klawiszy Alt+K kursor zostanie umieszczony
pola ukryte oraz przyciski umożliwiające wybór pliku. Kontrolki te wewnątrz kontrolki. Niestety, żadna spoSród popularnych przeglądarek
umieszczamy wewnątrz formularza stosując elementy INPUT, nie wyróżnia skrótów klawiszowych (na przykład przez podkreSlenie od-
BUTTON, SELECT, OPTGROUP, OPTION i TEXTAREA. Dodatko- powiedniej litery w tekScie etykiety). JeSli chcemy poinformować użyt-
wo, elementy LABEL, FIELDSET i LEGEND umożliwiają pogrupo- kownika o dostępnych skrótach klawiszowych, to musimy wpisać w for-
wanie kontrolek oraz ustalenie etykiet. mularzu odpowiedni tekst. Dodatkowym problemem jest fakt, że przeglą-
darki posiadają predefiniowane skróty klawiszowe, przy czym każda
Atrybuty ogólne kontrolek formularza z nich może posiadać inne, specyficzne dla siebie skróty. Trudno jest
WiększoSć kontrolek zawartych w formularzu posiada atrybut name ustalić skróty klawiszowe, które nie są zdublowane przez żadną z popu-
(wyjątkami są przyciski zatwierdzające i resetujące formularz, opcje larnych przeglądarek. Zachowanie w przypadku zdublowania skrótu kla-
i grupy opcji OPTION oraz OPTGROUP, jak również elementy wiszowego może być różne w przypadku różnych przeglądarek.
FIELDSET, LEGEND i LABEL). Atrybut ten ustala nazwę kontrolki, Ostatni z atrybutów ogólnych, tabindex, umożliwia ustalenie kolej-
jaka zostanie przekazana do skryptu. JeSli wewnątrz następującej kon- noSci w jakiej kontrolki formularza będą aktywowane klawiszem tabu-
trolki INPUT: lacji. WartoScią atrybutu jest liczba całkowita ustalająca pozycję kon-
trolki na liScie.

Zdarzenia dotyczące kontrolek
wprowadzimy napis diabel@pieklo.com, wówczas do skryptu zostanie W odniesieniu do kontrolek formularza możemy oprogramować kilka
przekazana zmienna: zdarzeń występujących podczas wypełniania formularza. Zdarzeniami
tymi są onfocus (gdy kontrolka staje się aktywna, tj. gdy kursor zostaje
email=diabel@pieklo.com umieszczony wewnątrz kontrolki), onblur (gdy kursor opuszcza kon-
trolkę) onselect (gdy w polu tekstowym zostaje zaznaczony pewien
W języku PHP powyższa zmienna będzie dostępna w jednej tekst; dotyczy tylko pól tekstowych) oraz onchange (gdy kontrolka
z tablic $_POST lub $_GET, np.: zmienia wartoSć).
Zdarzenia takie możemy oprogramować w językach skryptowych,
$_POST[ email ] === diabel@pieklo.com na przykład JavaScript, VB czy tcl.
Warto zwrócić uwagę na pewne ułatwienia występujące w języku Elementy INPUT
PHP i dotyczące przetwarzania wielu pól formularza. JeSli wartoSć Element INPUT służy do umieszczania w formularzu kilku różnych
atrybutów name kilku kontrolek zakończymy nawiasami kwadrato- rodzajów kontrolek, m.in. wierszy wprowadzania danych, pól wyboru
wymi, np.: oraz wykluczających pól wyboru. Posiada on atrybut type, który decy-
duje o typie kontrolki. WartoScią domySlną atrybutu type jest text.
Kontrolka INPUT typu text służy do wprowadzenia jednej linii tekstu.
Lista atrybutów elementu INPUT jest doSć pokaxna. Pełne zesta-
wówczas dane pochodzące z tychże kontrolek formularza zostaną za- wienie jest zawarte w tabeli 4 (na CD). Atrybuty elementu INPUT ma-
warte w tablicy $_POST[ kolor ]. W ten sposób zamiast wielu osob- ją różne znaczenie w zależnoSci od typu kontrolki (czyli wartoSci atry-
nych zmiennych otrzymamy jedną tablicę zawierającą wiele wartoSci. butu type).
Jest to szczególnie wygodne w przypadku pól wyboru (kontrolki
INPUT typu checkbox) oraz list wielokrotnego wyboru (kontrolki Przyciski zatwierdzające i resetujące formularz
SELECT z atrybutem multiselect). Niemal każdy formularz posiada przycisk zatwierdzający. Przycisk
Kolejnym atrybutem, jaki stosujemy w odniesieniu do większoSci taki tworzymy stosując kontrolkę INPUT typu submit:
kontrolek, jest atrybut value. W zależnoSci od kontrolki, atrybut ten
ustala bieżącą wartoSć zmiennej lub etykietę kontrolki.
Również atrybuty readonly, disabled, accesskey oraz tabindex znajdu-
ją zastosowanie w odniesieniu do wielu kontrolek umieszczanych w for- Atrybut value ustala etykietę przycisku. Etykietą może być dowol-
mularzu. Atrybuty readonly oraz disabled są atrybutami logicznymi. ny napis, na przykład OK lub WySlij.
Atrybut readonly uniemożliwia modyfikację wartoSci kontrolki. Jeden formularz może mieć kilka przycisków zatwierdzających
Kontrolka taka jest widoczna i może stać się aktywna (tj. możemy, ko- wysłanie. Wówczas przyciski powinny posiadać atrybut name, umożli-
rzystając na przykład z klawisza tabulacji, umieScić kursor wewnątrz wiający stwierdzenie, który z nich został naciSnięty.
INTERNET.maj.2005 95
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
Pola wyboru
Element INPUT typu checkbox stanowi pole wyboru, które możemy
name= passwd > pująco:
Po naciSnię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 wartoSci równej atrybutowi Po przesłaniu formularza zawierającego powyższe pole w skrypcie
value naciSniętego przycisku. Na przykład po naciSnięciu przycisku dostępna będzie zmienna $_POST[ win95 ] o wartoSci on:
o etykiecie Wyloguj otrzymamy:
$_POST[ win95 ] === on
$_POST[ login ] === Wyloguj
JeSli 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 wartoSć ustaloną atrybutem
value. W powyższym przykładzie będzie to:
Wiersz wprowadzania danych $_POST[ dos ] === MSDOS
NajczęSciej stosowaną kontrolką formularzy jest wiersz wprowadzania
danych. Kontrolkę taką tworzymy stosując element INPUT typu text: Dodatkowo, atrybut checked może być wykorzystany do inicjaliza-
cji pól wyboru. Pola nie posiadające atrybutu checked są domySlnie
odznaczone, zaS pola z podanym atrybutem checked są zaznaczone.
Dowolna liczba pól wyboru może być równoczeSnie zaznaczona.
Ponieważ wartoSć text jest wartoScią domySlną, zatem powyższą
kontrolkę można w równoważny sposób zapisać jako:
Rys. 3. Pola wyboru

Zwróćmy uwagę, że wszystkie pola
W stosunku do wiersza wprowadzania danych zastosowanie znaj- wyboru posiadają własne wartoSci atry-
dują wspomniane już atrybuty ogólne: name, value, readonly, disabled, butów name. Są one wówczas przeka-
accesskey oraz tabindex, jak również size i maxlength. zywane jako niezależne zmienne do
Atrybut size ustala szerokoSć pola mierzony liczbą znaków. Natomiast skryptu.
wartoSć maxlength ogranicza liczbę znaków, jaką kontrolka pomieSci. Jak już wspomnieliSmy, w języku PHP możliwe jest również prze-
kazanie powiązanych ze sobą opcji wyboru w postaci tablicy. W tym
Pole hasła celu należy wszystkim powiązanym ze sobą znaczeniowo polom wy-
Pole INPUT typu password służy do wprowadzania hasła. Napis wpro- boru nadać identyczną nazwę, zakończoną nawiasami kwadratowymi:
wadzany do kontrolki nie jest widoczny na ekranie. Kontrolka taka ma
postać: value= Linux >
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- Każda z opcji musi posiadać atrybut value. W takim przypadku, po
nia pole typu password, jest uniemożliwienie podejrzenia hasła na zatwierdzeniu formularza, w skrypcie w PHP w tablicy $_POST pod
ekranie. indeksem system (jest to wartoSć atrybutu name) dostępna będzie ta-
Dla pola tekstowego typu password znaczenie atrybutów jest iden- blica zawierająca wartoSci atrybutów value wszystkich zaznaczonych
tyczne, jak w przypadku zwykłego pola tekstowego typu text. pól wyboru o wartoSci atrybutu name= system[] .
Rys. 2. Standardowe pole
Wykluczające pola wyboru
tekstowe oraz pole typu
Drugim rodzajem pól wyboru są pola wzajemnie się wykluczające.
password
W odróżnieniu od pól wyboru typu checkbox, tylko jedno spoSród kil-
ku pól INPUT typu radio może być zaznaczone.
Ustalanie szerokoSci kontrolek INPUT możemy zrealizować stosu-
jąc atrybut size, jak również wykorzystując arkusze stylów. W formu- POLSKA: larzu z rysunku 2 kontrolki INPUT mają szerokoSć 100 pikseli ustalo- value= PL >
ną stylem: NIEMCY: value= DE >
INPUT {
width : 100px; Wszystkie powiązane ze sobą pola muszą mieć identyczną wartoSć
} atrybutu name. W powyższym przykładzie wartoScią tą jest napis kraj.
96 INTERNET.maj.2005
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML/PHP
Ponadto każde pole wyboru musi mieć wartoSć ustaloną atrybutem
value. Po zatwierdzeniu formularza tablica $_POST będzie zawierała
element o indeksie równym atrybutowi name i wartoSci równej atrybu- Formularz zawierający kontrolki typu file musi być przekazywany
towi value wybranego pola, na przykład: metodą POST. Ponadto należy ustalić sposób kodowania danych po-
chodzących z formularza jako enctype= multipart/form-data .
$_POST[ kraj ] === PL W jaki sposób odczytać zawartoSć plików przekazanych na serwer
w języku PHP? W odróżnieniu do innych kontrolek pliki przekazane na
Kontrolki możemy zainicjować stosując podobnie jak w przypad- serwer nie są zawarte w tablicy $_POST, a w tablicy $_FILES. Tablica
ku pól typu checkbox atrybut checked. Tym razem jednak możemy $_FILES jest tablicą wielowymiarową. JeSli kontrolka INPUT posiada
zaznaczyć najwyżej jedno pole. atrybut name= plik , wówczas informacje na temat pliku przekazanego
Dodajmy, że formularz może zawierać kilka niezależnych grup na serwer są zawarte w następujących polach tablicy $_FILES:
kontrolek radio, na przykład wybór kraju oraz dyscypliny sportu. Oba
wybory są niezależne. W ramach każdej kategorii możemy zaznaczyć $_FILES[ plik ][ name ]
jedynie jeden element. W takim przypadku obie grupy kontrolek są $_FILES[ plik ][ type ]
odróżniane na podstawie atrybutu name. Kontrolki z każdej grupy $_FILES[ plik ][ tmp_name ]
współdzielą unikalną nazwę. $_FILES[ plik ][ error ]
$_FILES[ plik ][ size ]
Rys. 4 Wykluczające się wzajemnie
pola wyboru
Tablica $_FILES zawiera informacje na temat przekazanego pliku,
Kontrolki ukryte nie zawiera natomiast samego pliku. Plik jest zapisany na dysku pod
Kolejnym typem kontrolek INPUT są kontrolki nazwą $_FILES[ plik ][ tmp_name ]. JeSli chcemy przeczytać jego
ukryte. Kontrolki takie są niewidoczne i służą zawartoSć, to możemy do tego wykorzystać następującą instrukcję:
do przekazania dodatkowych zmiennych.
Ponieważ nie są one widoczne, nie można zmie- $rob = file_get_contents($_FILES[ plik ][ tmp_name ]);
niać ich wartoSci za pomocą myszy czy klawiatury. Oto przykładowe
kontrolki ukryte: 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 przenieSć do innego folderu, sto-
sując funkcję move_uploaded_file().
W formularzu warto umieScić (przed kontrolką typu file) ukryte po-
Możemy je wykorzystać na przykład do podpisywania formularza. le ustalające wartoSć zmiennej MAX_FILE_SIZE. WartoSć taka ogra-
Umieszczając w formularzu pole ukryte zawierające pewną, wygene- nicza wielkoSć pliku, jaki możemy przekazać za pomocą formularza.
rowaną przez skrypt, trudną do odgadnięcia wartoSć możemy upewnić Nie jest to zabezpieczenie przed złoSliwymi użytkownikami, gdyż
się, że dane przesłane po zatwierdzeniu skryptu pochodzą faktycznie łatwo je ominąć (na przykład przygotowując własny formularz; do
z formularza. zabezpieczenia przed złoSliwymi użytkownikami należy stosować
Należy mieć SwiadomoSć, że kontrolki ukryte nie są w żaden sposób opcje konfiguracyjne PHP: file_uploads, upload_max_filesize oraz
zaszyfrowane ani schowane przed użytkownikiem. Zaglądając do xró- upload_tmp_dir). Jednak dzięki zawarciu w formularzu informacji
dła strony ujrzymy wszystkie ukryte kontrolki zawarte w formularzu. o maksymalnym rozmiarze pliku, unikniemy sytuacji, w której użyt-
Dane przekazywane w postaci kontrolek ukrytych warto zaszyfrować. kownik czeka dłuższy czas tylko po to, by zobaczyć komunikat (pocho-
Ponieważ kontrolki te nie są w ogóle wySwietlane przez przeglą- dzący ze skryptu PHP) informujący o tym, że wybrany plik jest zbyt
darkę, zatem w odniesieniu do nich nie ma sensu stosowanie dodatko- duży. JeSli informacja o maksymalnym rozmiarze jest zawarta w for-
wych atrybutów. mularzu, to przeglądarka nie wysyła na serwer zbyt dużych plików.
Przyciski Kontrolka INPUT typu button jest przyciskiem. Przyciski takie po value= 3000 >
naciSnięciu nie powodują żadnej predefiniowanej akcji ze strony prze-
glądarki ani nie resetują zawartoSci, ani nie wysyłają formularza. Podana wielkoSć jest mierzona w bajtach.
W celu wykorzystania takiego przycisku, należy oprogramować obsłu-
gę zdarzeń. 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, zaS do skryptu przekazywane są współrzędne klikniętego piksela.
Obowiązkowymi atrybutami są type, name, src oraz alt. Atrybut src
ustala adres URL wySwietlanego obrazu, natomiast alt zawiera tekst
Kontrolka wyboru pliku alternatywny. (Rola obydwu atrybutów jest analogiczna jak w przypadku
Pole INPUT typu file służy do przekazywania za pomocą formularza elementu IMG.)
pliku na serwer. Kontrolka taka jest przedstawiana w formularzu w po- Oto kod przykładowej kontrolki tego typu:
staci przycisku z napisem Przeglądaj... Po naciSnięciu przycisku prze-
glądarka wySwietla okno dialogowe, które umożliwia wybór pliku. Po dokonaniu wyboru i zatwierdzeniu formularza na serwer zostaje prze- alt= Przykład kontrolki INPUT typu image. >
kazany wybrany plik.
Kontrolka taka posiada dwa istotne atrybuty: type oraz name. Atry- W wyniku kliknięcia obrazu do skryptu zostaną przekazane zmienne
but name ustala nazwę zmiennej przekazanej do skryptu: obraz_x oraz obraz_y zawierające współrzędne klikniętego piksela obrazu:
INTERNET.maj.2005 97
CMYK

NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
$_POST[ obraz_x ] === 83 Opcje OPTION mogą posiadać dodatkowo atrybuty value oraz selec-
$_POST[ obraz_y ] === 178 ted. Atrybut value ustala wartoSć 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.
Element BUTTON
Kolejnym elementem służącym do skryptu zostanie przekazana zmienna:
do tworzenia kontrolek formula-
rzy jest element BUTTON. $_POST[ dzien ] === 2
Element ten służy do tworzenia
przycisków. Atrybut type, o poprawnych wartoSciach submit, reset Natomiast atrybut selected służy do wskazania elementu listy, któ-
oraz button, ustala rodzaj przycisku. Przycisk wykonany z wykorzysta- ry powinien być początkowo wybrany.
niem elementu BUTTON ma następujący kod: DomySlnie, listy wyboru są wySwietlane w postaci list rozwijanych,
które umożliwiają wybranie tylko jednego elementu. WłaSciwoSci listy
możemy zmienić stosując atrybuty size oraz multiple elementu
SELECT. Atrybut size ustala liczbę elementów listy, które będą widocz-
Jego działanie jest identyczne jak w przypadku przycisku: ne na ekranie (wartoScią domySlną jest 1 lista rozwijana). Lista:

zawartoSć. Jako zawartoSć przycisku możemy podać element IMG.
Podany obraz zostanie umieszczony na przycisku. będzie wySwietlana w postaci prostokąta zawierającego trzy wiersze
Kod: i wyposażonego w suwak.
Natomiast atrybut multiple jest atrybutem logicznym, który umożli-
podobnie jak w przypadku pól wyboru stosowanie nazwy zakoń-
czonej nawiasami kwadratowymi:
tworzy przycisk przedstawiony na rys. 6.

Rys. 7. Listy wyboru

Stosując element OPTGROUP
... mamy możliwoSć nadania liScie
struktury. Opcje ograniczone
znacznikami OPTGROUP stano-
Po wybraniu pierwszego elementu listy i zatwierdzeniu formularza, wią podmenu niższego poziomu.
w skrypcie będzie dostępna zmienna: Atrybut label elementu OPT-
GROUP ustala etykietę grupy
$_POST[ dzien ] === Poniedziałek opcji:
98 INTERNET.maj.2005
CMYK

WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML/PHP

...

...

Drugą z podanych metod możemy wykorzystać także w przypadku
Etykieta taka jest wytłuszczona na liScie i nie można jej zaznaczyć. stosowania tabel do ułożenia kontrolek formularza.
Lista stosująca elementy OPTGROUP została zilustrowana na rysunku 8. W odniesieniu do standardowych przeglądarek: Internet Explorer,
FireFox, Opera czy Netscape, stosowanie etykiet LABEL nie niesie
Rys. 8. Lista z opcjami
żadnych korzySci. Powyższe dwa przykłady wyglądałyby zupełnie
pogrupowanymi elementami
identycznie bez zastosowania etykiet. Sytuacja zmienia się w przypad-
OPTGROUP
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
Pole tekstowe o roli kontrolki.
Ostatnim rodzajem kontrolek dostępnych Etykiety, podobnie jak i inne kontrolki formularzy, mogą posiadać
w języku HTML, które umożliwiają skrót klawiszowy. W przypadku przeniesienia kursora do etykiety (po-
wprowadzanie danych, są pola tekstowe. przez aktywację skrótu klawiszowego lub kliknięcie etykiety; kliknię-
Pole takie definiujemy elementem cie etykiety działa poprawnie w Internet Explorerze jedynie wtedy,
TEXTAREA. Atrybuty rows oraz cols gdy stosujemy etykiety wykorzystujące atrybut for), kursor zostanie
ustalają wymiar pola tekstowego mierzo- faktycznie umieszczony w kontrolce skojarzonej z etykietą.
ny liczbą wierszy i kolumn tekstu. Kontrolki dotyczące podobnej tematyki możemy zgrupować stosu-
Poniższe pole tekstowe liczy pięć jąc element FIELDSET. Element ten należy do grupy elementów
wierszy tekstu. W każdym wierszu mo- blokowych i może występować bezpoSrednio pomiędzy znacznikami
żemy umieScić 10 znaków: formularza. Kontrolki umieszczone wewnątrz elementu FIELDSET
zostaną otoczone obramowaniem. Ramkę możemy wzbogacić o pod-
lek podpisane Kto wygra mistrzostwa Swiata w piłce nożnej w 2006
roku? oraz Którzy polscy zawodnicy zostaną powołani do kadry?
Po wprowadzeniu większej liczby wierszy tekstu suwak pionowy Pierwsza z grup jest zdefiniowana następującym kodem HTML:
kontrolki stanie się aktywny. Natomiast szerokoSć 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 zawartoSć kontrolki jest umieszczana pomiędzy znacz- Kto wygra mistrzostwa Swiata w piłce nożnej w 2006 roku?
nikami TEXTAREA.
Niemcy

Grupowanie i podpisywanie kontrolek formularza Polska

Dodatkowymi elementami, jakie możemy umieScić w formularzu, są Francja

etykiety LABEL, elementy grupujące FIELDSET oraz podpisy grup Włochy
LEGEND. Elementy te nie umożliwiają wprowadzania danych do for-

mularza. Modyfikują jedynie wygląd oraz strukturę formularza, dzię-
Rys. 9. Pola wyboru
ki czemu formularz staje się bardziej czytelny. Etykiety LABEL służą
pogrupowane elementami
do podpisania kontrolek. Umieszczamy je w formularzu na dwa spo-
FIELDSET. Obie grupy
soby. Po pierwsze możemy podpisywaną kontrolkę umieScić
podpisano stosując elementy
wewnątrz etykiety:
LEGEND

Imię:

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

autora pod adresem http://www.gajdaw.pl.

INTERNET.maj.2005 99

Wyszukiwarka

Podobne podstrony:
HTML & PHP Jak działają formularze , WAP Statystyki przez WAP, czyli jak połączyć PHP z językiem
rozporzadzenie MT BiGM w sprawie formularza listy kontrolnej i formularza protokolu kontroli2
User Interface Service 2200SRM1131 (05 2005) US EN
Steer Axle 1600SRM1133 (05 2005) US EN
Pisemny egzamin na pilota wycieczek 11 05 2005
Cylinder Repair 2100SRM1139 (05 2005) US EN
XHTML Najwyższy czas na XHTML 05 2005
Electrical System Mazda1 2200SRM1143 (05 2005) US EN
Cooling 0700SRM1123 (05 2005) US EN
html blokowanie pol formularzy
HTML zaawansowane możliwości tabel 05 2006
Calibrations 8000SRM1134 (05 2005) US EN
Hydraulic Gear Pump 1900SRM1136 (05 2005) US EN
LP Fuel System Mazda 0900SRM1125 (05 2005) US EN
NF 2005 05 balet słoni

więcej podobnych podstron

Imię: