HTML: formularze 07-2006.pdf

HTML

HTML: formularze

Czêsto strony internetowe to nie tylko za-

wartoœæ statyczna, jak tekst i obrazki, ale

tak¿e formularze wysyłaj¹ce pewne dane

do skryptów (np. formularze umo¿liwiaj¹ce

zarejestrowanie siê na wszelkiego rodzaju

stronach). Dane te mog¹ byæ nastêpnie

przetwarzane, przechowywane, b¹dŸ mog¹

posłu¿yæ do wysłania wiadomoœci e-mail.

CZEGO SIÊ DOWIESZ Z TEGO ARTYKU£U:

nauczysz siê tworzyæ formularze do pobiera-

nia wszelkiego rodzaju informacji od u¿ytko-

wników

WYMAGANA WIEDZA:

podstawowa umiejêtnoœæ pos³ugiwania siê

komputerem oraz systemem Windows

materia³ zawarty w poprzedniej czêœci kursu

Marcin Staniszczak

tami tworzonymi w takich jêzykach jak PHP czy Perl, to jednak

warto zapoznaæ siê z ich budow¹, nawet gdy nie zna siê ¿adnego jêzyka

skryptowego. Wiele gotowych skryptów mo¿na bowiem odnaleŸæ w inter-

necie, a znajomoœæ sposobu budowy formularzy mo¿e w znacznym stopniu

ułatwiæ dostosowanie ich wygl¹du do własnych potrzeb.

Nie da siê jednak w ten sposób przesłaæ plików, natomiast treœæ takiego

e-maila bêdzie mało czytelna i bêdzie miała postaæ:

nazwa_kontrolki=wartoœæ_wpisana_przez_uzytkownika&

nazwa_kontrolki2= wartoœæ_wpisana_przez_u¿ytkownika&...

GET i POST

Szablon formularza

Opis ka¿dego formularza musi byæ umieszczony w znaczniku <form>...

</form>. Teoretycznie wszystkie znaczniki opisuj¹ce poszczególne kontrolki

formularza bêd¹ wyœwietlane równie¿ wówczas, gdy umieœcimy je poza tym

blokiem, jednak nie bêdzie mo¿na w prosty sposób wysłaæ ich zawartoœci do

skryptu. Umieszczenie kontrolek poza formularzem mo¿e byæ jednak przydat-

ne, gdy zawartoœæ kontrolki nie bêdzie wysłana do skryptu na serwerze, ale

ma byæ obsłu¿ona przez skrypt JavaScript umieszczony na stronie.

Znacznik <form> mo¿e przyjmowaæ nastêpuj¹ce parametry:

Dane z formularzy mog¹ byæ przekazywane jedn¹ z dwóch me-

tod – get lub post . Metoda get powoduje przesłanie zawartoœci

formularza w adresie URL. Adres taki wygl¹da wówczas podob-

nie do tego (zob. te¿ rys. 1):

http://www.twojastrona.com?imie=Jan&nazwisko=Kowalski;

ulica=Piastowska

action – to nazwa skryptu do którego maj¹ zostaæ wysłane wyniki dzia-

łania (nazwa skryptu mo¿e byæ ka¿dym poprawnym adresem URL prowa-

dz¹cym do skryptu, który potrafi obsłu¿yæ dane z naszego formularza),

Metoda post powoduje ukrycie danych przesyłanych z formula-

rza przed u¿ytkownikiem – dane te zostaj¹ przesłane w nagłów-

ku (nie musimy wiedzieæ czym jest nagłówek http, aby korzystaæ

z formularzy czy HTML-a, mo¿na jednak zapoznaæ siê z infor-

macjami zawartymi na stronie http://pl.wikipedia.org/wiki/HTTP).

Mo¿e siê wydawaæ, ¿e zawsze lepiej przesyłaæ dane metod¹

post , bo po co zaœmiecaæ adres URL? Trzeba jednak pamiêtaæ,

¿e metoda post uniemo¿liwia skopiowanie adresu z przesyłan¹

treœci¹ – dlatego właœnie, na przykład, Google przesyła zapyta-

nie metod¹ get (dziêki temu adres prowadz¹cy do wyników wy-

szukiwania mo¿na swobodnie skopiowaæ i wysłaæ do znajomego

czy te¿ dodaæ do ulubionych).

method – okreœla sposób przesyłania danych; przyjmuje wartoœci

post oraz get (opis czym ró¿ni¹ siê te metody znajduje siê w ramce

GET i POST),

target – na razie nie skorzystamy z tego parametru, gdy¿ dotyczy on

ramek, jednak ju¿ wkrótce zapoznamy siê z metod¹ budowy strony

opartej na ramkach. Nale¿y pamiêtaæ, ¿e przyjmuje on nazwê ramki,

w której ma zostaæ wyœwietlona strona zwrócona po przetworzeniu

formularza lub jedna z wartoœci _parent, _self lub _top.

Najczêœciej znacznik form przyjmuje postaæ:

</form>

Zawartoœæ formularza mo¿e zostaæ wysłana tak¿e bezpoœrednio na nasz

adres e-mail. Nale¿y wówczas w polu action (zamiast adresu skryptu) wpi-

saæ adres w postaci:

mailto:twój_adres@email.pl?subject=temat_emaila

czyli znacznik form mo¿e wygl¹daæ nastêpuj¹co:

<form action=”mailto:jankowalski@republika.pl?subject=

Rys. 1. For-

mularz wy-

słany meto-

d¹ GET– na

przykładzie

Google

moja ankieta” method=”post”>

</form>

INTERNET.lipiec.2006

www.mi.com.pl

M imo ¿e z formularzy najczêœciej korzystamy w poł¹czeniu ze skryp-

HTML

Kontrolki formularza

Aby formularz mógł spełniaæ swoje zadanie, nale¿y umieœciæ w nim kontrolki. Do

umieszczenia wiêkszoœci kontrolek wykorzystuje siê znacznik <input ... />.

Oto najwa¿niejsze przyjmowane przez niego parametry:

submit – tworzy przycisk wysyłaj¹cy formularz do skryptu okreœlone-

go w parametrze action znacznika form,

reset – tworzy przycisk czyszcz¹cy formularz, który wymazuje

wszystkie wpisane przez u¿ytkownika dane (jeœli pola miały zdefinio-

wane wartoœci w parametrze value, to te wartoœci zostan¹ ponownie

przypisane tym polom),

type – okreœla typ wyœwietlanej kontrolki (parametr ten zostanie

dokładniej opisany w dalszej czêœci artykułu),

name – nazwa, pod któr¹ wysyłana bêdzie wartoœæ danej kontrolki

(ka¿da kontrolka powinna mieæ unikaln¹ nazwê),

file – tworzy pole słu¿¹ce do wybrania pliku z dysku i wysłania go do

skryptu,

value – wartoœæ jak¹ pocz¹tkowo przyjmuje kontrolka (parametr ten

nie jest wymagany),

image – umieszcza obrazek działaj¹cy jak przycisk,

button – tworzy kontrolkê przycisku,

checked – okreœla czy przycisk opcji (patrz dalej) ma byæ zaznaczony

(jedyn¹ dozwolon¹ wartoœci¹ tego parametru jest checked),

hidden – tworzy ukryt¹ kontrolkê – jest ona niewidoczna na stronie

i słu¿y najczêœciej do przekazywania wartoœci podanej w parametrze value

(jedyn¹ dozwolon¹ wartoœci¹ tego parametru jest hidden).

Najczêœciej formularz zawiera kontrolki słu¿¹ce do wprowadzania danych

i dodatkowo kontrolkê typu submit do ich wysyłania:

<p>

<input type=”text” name=”imie” alt=”Imie u¿ytkownika”

disabled – okreœla czy kontrolka ma byæ wł¹czona,

size – okreœla w pikselach wielkoœæ kontrolki (w przypadku pól tek-

stowych oraz pól haseł wielkoœæ jest wyra¿ana w znakach),

maxlength – okreœla maksymaln¹ liczbê znaków jakie mo¿na wpisaæ

w polu,

tabindex – okreœla kolejnoœæ przechodzenia pomiêdzy kontrolkami

umieszczonymi na stronie, za pomoc¹ klawisza Tab.

Typ kontrolek ustala siê za pomoc¹ parametru type. Parametr ten mo¿e

przyj¹æ jedn¹ z nastêpuj¹cych wartoœci:

<input type=”text” name=”nazwisko” alt=”Imie

text – jednolinijkowe pole słu¿¹ce do wprowadzania tekstu,

uzytkownika” />

</p>

</form>

Przycisk submit ma nadan¹ wartoœæ (parametr value). Wartoœæ ta zo-

stanie wyœwietlona na przycisku jako jego opis. Na rys. 2 mo¿na przyjrzeæ

siê bli¿ej wygl¹dowi poszczególnych kontrolek wraz z opisem. Kontrolki zo-

stały umieszczone w akapicie. Pamiêtajmy, ¿e poprawnie utworzony formu-

password – pole u¿ywane do wprowadzania hasła (tekst jest masko-

wany, najczêœciej zamiast tekstu wyœwietlane s¹ gwiazdki),

checkbox – pole wielokrotnego wyboru; mo¿na jednoczeœnie zazna-

czyæ wiele elementów tego typu,

radio – pole jednokrotnego wyboru; mo¿na jednoczeœnie zaznaczyæ

jeden element tego typu,

Rys. 2. Wygl¹d poszczególnych kontrolek mo¿liwych do uzyska-

nia za pomoc¹ znacznika <input ... />

Rys. 3. Pole textarea – zobacz jak ustawia siê domyœln¹ zawartoœæ

Rys. 4. Listy – ró¿nica pomiêdzy listami rozwijanymi a przewijanymi

INTERNET.lipiec.2006

www.mi.com.pl

HTML

larz ma kontrolki umieszczone w akapicie, kontenerze (div lub span) b¹dŸ

w znaczniku fieldset (mo¿na je tak¿e umieszczaæ w nagłówkach h1-h6, znacz-

nikach preczy address, jednak taka koniecznoœæ zachodzi o wiele rzadziej).

Mimo ¿e input pozwala stworzyæ wiele ró¿norodnych kontrolek, to nie-

stety kilku nam ci¹gle brakuje. Do stworzenia du¿ych, wielolinijkowych pól

tekstowych słu¿y znacznik <textarea>...</textarea>. Pozwala on wpi-

saæ wiêksz¹ iloœæ tekstu (jest na przykład u¿ywany do wprowadzania pos-

tów na wszelkiego rodzaju forach internetowych). Znacznik ten przyjmuje

nastêpuj¹ce parametry:

name – to samo znaczenie co w przypadku znacznika <input/>,

Znacznik ten przyjmuje parametry disable oraz value, które maj¹ typowe

znaczenie, oraz dodatkowo parametr selected, okreœlaj¹cy czy dana opcja

jest zaznaczona. Sam¹ treœæ opcji, która ma zostaæ wyœwietlona, podajemy

pomiêdzy znacznikiem otwieraj¹cym a zamykaj¹cym.

Zdefiniowanie parametru size na wiêcej ni¿ 1 lub parametru multiple na

wartoœæ multiple (to jest jedyna poprawna wartoœæ tego parametru), po-

woduje utworzenie listy przewijanej. W celu zaznaczenia wielu pozycji na

liœcie wielokrotnego wyboru, nale¿y klikaæ je przytrzymuj¹c na klawiaturze

jednoczeœnie klawisz Ctrl. W ka¿dym innym przypadku utworzona zostanie

lista rozwijana (ró¿nicê mo¿na zaobserwowaæ na rys. 4). A oto przykład

prostej listy:

<option value=”Fiat Punto”>Fiat Punto</option>

<option value=”Opel Corsa”>Opel Corsa</option>

<option value=”Kawasaki Z750”>Kawasaki Z750</option>

</select>

Na zakoñczenie omawiania list warto wspomnieæ, ¿e ich elementy mo¿na

grupowaæ. Do grupowania elementów listy u¿ywa siê znacznika <optgro-

up>..</optgroup>. Znacznik ten przyjmuje najczêœciej parametr value, bê-

d¹cy nazw¹ grupy. U¿ycie znacznika optgroup sprowadza siê do umieszczenia

pomiêdzy znacznikiem otwieraj¹cym a zamykaj¹cym znaczników option, które

maj¹ nale¿eæ do tworzonej grupy. Poni¿ej znajduje siê przykład z pojazdami,

które pogrupowaliœmy tym razem na samochody oraz motocykle:

<option value=”Fiat Punto”>Fiat Punto</option>

<option value=”Opel Corsa”>Opel Corsa</option>

</optgroup>

<option value=”Kawasaki Z750”>Kawasaki Z750</option>

</optgroup>

</select>

Na rys. 5 znajduje siê przykład w jaki sposób przegl¹darki internetowe

wyœwietlaj¹ grupy list rozwijanych oraz przewijanych.

rows – wysokoœæ okreœlona liczb¹ wierszy,

cols – szerokoœæ okreœlona liczb¹ kolumn,

disabled – okreœla czy kontrolka ma byæ wł¹czona (jedyn¹ dozwolon¹

wartoœci¹ tego parametru jest disabled),

readonly – zawartoœæ pola jest tylko do odczytu (nie mo¿e byæ mo-

dyfikowana przez u¿ytkownika); jedyn¹ dozwolon¹ wartoœci¹ tego pa-

rametru jest readonly.

Brakuje parametru value? Znacznik ten, w przeciwieñstwie do znacznika

<input/>, nie wystêpuje w krótkiej postaci. Domyœln¹ wartoœæ stworzo-

nego w ten sposób pola tekstowego powinniœmy umieszczaæ pomiêdzy jego

znacznikiem otwieraj¹cym a zamykaj¹cym (zobacz rys. 3):

Najgłupszy nawet muł wie,

Jak powolne s¹ ¿ółwie.

¯eby ¿ółwiowi dopiec,

Szydził zeñ pewien chłopiec:

– Pan chodzi wprost pokracznie.

Niech siê pan wprawiaæ zacznie!

...

</textarea>

Wa¿nymi elementami formularzy s¹ listy (rys. 4). Pola przedstawione

na tym rysunku ró¿ni¹ siê miêdzy sob¹ zarówno wygl¹dem, jak i zasad¹

działania, jednak konstrukcja obu niewiele siê ró¿ni od strony HTML-a. Listy

tworzy siê za pomoc¹ znacznika <select>...</select>. Przyjmuje on

nastêpuj¹ce parametry:

name – ma to samo znaczenie co w przypadku znacznika <input/>,

size – wielkoœæ okreœlona w iloœciach wierszy; podanie tego paramet-

ry oznacza, ¿e chcemy utworzyæ listê przewijan¹,

multiple – oznacza, ¿e lista przewijana ma byæ wielokrotnego wyboru

(jedyn¹ dozwolon¹ wartoœci¹ tego parametru jest multiple),

Upiêkszanie

Poza typowymi kontrolkami formularz warto wyposa¿yæ w etykiety opisuj¹-

ce znaczenie poszczególnych kontrolek i elementy grupuj¹ce.

Do tworzenia etykiet słu¿y znacznik <label>...</label>. Pozwala on

podpisaæ kontrolki oraz poł¹czyæ etykietê z konkretn¹ kontrolk¹ – poł¹czenie

disabled – oznacza, ¿e chcemy wył¹czyæ kontrolkê (jedyn¹ dozwolon¹

wartoœci¹ tego parametru jest disabled).

Do pełnej funkcjonalnoœci list potrzebujemy jeszcze elementów w niej

wyœwietlanych. Ka¿dy element to osobny znacznik <option>...</option>.

Rys. 5. Listy – grupy na listach rozwijanych oraz przewijanych

Rys. 6. Etykiety oraz elementy grupuj¹ce

INTERNET.lipiec.2006

www.mi.com.pl

HTML

<legend>Twoje dane</legend>

<label for=”imie_”>Imie</label> <input name=

”imie” id=”imie_” type=”text”/><br/>

<label for=”nazwisko_”>Nazwisko</label> <input

name=”nazwisko” id=”nazwisko_” type=”test”/><br/>

</fieldset>

<legend>Twoje zdjêcie</legend>

<label for=”zdjecie_”>Zdjêcie</label> <input

name=”zdjecie” id=”zdjecie_” type=”file”/><br/>

<label for=”podpis_”>Podpis</label> <input

name=”podpis” id=”podpis_” type=”test”/><br/>

</fieldset>

</form>

Znacznik fieldset mo¿e w formularzu zast¹piæ znacznik akapitu (p). Na

rys. 6 mo¿na zobaczyæ jak s¹ wyœwietlane etykiety oraz elementy grupuj¹-

ce przez przegl¹darkê Opera.

umo¿liwia wybór kontrolki poprzez klikniêcie na etykiecie. Najwa¿niejszym

i najczêœciej u¿ywanym parametrem etykiety jest for. Okreœla on identyfika-

tor kontrolki, z którym etykieta ma zostaæ skojarzona. Jako ¿e parametr for

odnosi siê do identyfikatora kontrolki, przed jego u¿yciem musimy zadekla-

rowaæ odpowiedni identyfikator. Słu¿y do tego parametr id (który mo¿emy

przypisaæ dowolnemu znacznikowi, co czêsto jest wykorzystywane w poł¹-

czeniu z arkuszami stylów lub skryptami utworzonymi w jêzyku JavaScript).

A oto przykład dodania etykiet do prostego formularza:

<p>

Style

Poszczególne elementy formularza – zarówno kontrolki, jak i etykiety czy

elementy grupuj¹ce – mo¿na dowolnie formatowaæ z u¿yciem stylów. War-

to poeksperymentowaæ zwłaszcza z elementami grupuj¹cymi. Standardo-

wo wygl¹daj¹ one mało atrakcyjnie, głównie za spraw¹ tego, ¿e s¹ auto-

matycznie rozci¹gane na cał¹ szerokoœæ okna przegl¹darki oraz pozosta-

wiaj¹ zbyt mały margines wewnêtrzny pomiêdzy swoim obramowaniem

a elementami w nich umieszczonymi.

Proponujê poeksperymentowaæ ze stylami width oraz padding i margin.

Przyjmuj¹ one jako parametr cyfrê okreœlaj¹c¹ odpowiednio szerokoœæ ele-

mentu, szerokoœæ wypełnienia oraz margines.

<label for=”imie_”>Imie</label> <input name=

”imie” id=”imie_” type=”text”/><br/>

<label for=”nazwisko_”>Nazwisko</label> <input

name=”nazwisko” id=”nazwisko_” type=”test”/><br/>

</p>

</form>

Formularze mo¿na wzbogaciæ tak¿e o elementy grupuj¹ce. Element gru-

puj¹cy powoduje otoczenie zgrupowanych kontrolek ramk¹. Ramkê mo¿na

dodatkowo wzbogaciæ o etykietê. Do grupowania kontrolek u¿ywamy

znacznika <fieldset>...<fieldset>. Znacznik ten nie potrzebuje ¿adnych

parametrów. Wystarczy, ¿e pomiêdzy znacznikiem otwieraj¹cym a zamyka-

j¹cym umieœcimy kontrolki, które chcemy zgrupowaæ:

<label for=”imie_”>Imie</label> <input

name=”imie” id=”imie_” type=”text”/><br/>

<label for=”nazwisko_”>Nazwisko</label> <input

name=”nazwisko” id=”nazwisko_” type=”test”/><br/>

</fieldset>

<label for=”zdjecie_”>Zdjêcie</label> <input

name=”zdjecie” id=”zdjecie_” type=”file”/><br/>

<label for=”podpis_”>Podpis</label> <input

name=”podpis” id=”podpis_” type=”test”/><br/>

</fieldset>

</form>

Pierwszy blok fieldset zawiera dane u¿ytkownika, drugi słu¿y do pobrania

jego zdjêcia oraz ustalenia podpisu pod zdjêciem. Mo¿emy co prawda zało-

¿yæ, ¿e u¿ytkownik domyœli siê do czego słu¿¹ oba bloki, jednak warto do-

daæ do nich odpowiednie podpisy. U¿yjemy w tym celu znacznika <le-

gend>...</legend>. Działa on podobnie do znacznika label, jednak ustala

podpis nie do kontrolki, a do elementu grupuj¹cego:

INTERNET.lipiec.2006

www.mi.com.pl

REKLAMA

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: