HTML: formularze 07-2006.pdf
(
299 KB
)
Pobierz
makieta.qxd
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:
l
nauczysz siê tworzyæ formularze do pobiera-
nia wszelkiego rodzaju informacji od u¿ytko-
wników
WYMAGANA WIEDZA:
l
podstawowa umiejêtnoœæ pos³ugiwania siê
komputerem oraz systemem Windows
l
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:
4
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).
4
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 action=”skrypt.php” method=”post”>
<!--elementy formularza -->
</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”>
<!--elementy formularza -->
</form>
94
INTERNET.lipiec.2006
www.mi.com.pl
M
imo ¿e z formularzy najczêœciej korzystamy w poł¹czeniu ze skryp-
4
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:
4
4
submit
– tworzy przycisk wysyłaj¹cy formularz do skryptu okreœlone-
go w parametrze action znacznika form,
4
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),
4
name
– nazwa, pod któr¹ wysyłana bêdzie wartoœæ danej kontrolki
(ka¿da kontrolka powinna mieæ unikaln¹ nazwê),
4
file
– tworzy pole słu¿¹ce do wybrania pliku z dysku i wysłania go do
skryptu,
4
value
– wartoœæ jak¹ pocz¹tkowo przyjmuje kontrolka (parametr ten
nie jest wymagany),
4
image
– umieszcza obrazek działaj¹cy jak przycisk,
4
button
– tworzy kontrolkê przycisku,
4
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:
<form action=”skryp.php” method=”post”>
<p>
<input type=”text” name=”imie” alt=”Imie u¿ytkownika”
4
disabled
– okreœla czy kontrolka ma byæ wł¹czona,
4
size
– okreœla w pikselach wielkoœæ kontrolki (w przypadku pól tek-
stowych oraz pól haseł wielkoœæ jest wyra¿ana w znakach),
4
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:
4
Ã
/>
<input type=”text” name=”nazwisko” alt=”Imie
Ã
text
– jednolinijkowe pole słu¿¹ce do wprowadzania tekstu,
uzytkownika” />
<input type=”Submit” value=”Dodaj” />
</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-
4
password
– pole u¿ywane do wprowadzania hasła (tekst jest masko-
wany, najczêœciej zamiast tekstu wyœwietlane s¹ gwiazdki),
4
checkbox
– pole wielokrotnego wyboru; mo¿na jednoczeœnie zazna-
czyæ wiele elementów tego typu,
4
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 ... />
2
Rys. 3.
Pole textarea – zobacz jak ustawia siê domyœln¹ zawartoœæ
3
4
Rys. 4.
Listy – ró¿nica pomiêdzy listami rozwijanymi a przewijanymi
INTERNET.lipiec.2006
www.mi.com.pl
95
4
4
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:
4
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:
<select name=”pojazdy”>
<option value=”Fiat 126p”>Fiat 126p</option>
<option value=”Fiat Punto”>Fiat Punto</option>
<option value=”Opel Corsa”>Opel Corsa</option>
<option value=”Kawasaki Z750”>Kawasaki Z750</option>
<option value=”HONDA CBR 125R”>51-70</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:
<select name=”pojazdy”>
<optgroup label=”Samochody”>
<option value=”Fiat 126p”>Fiat 126p</option>
<option value=”Fiat Punto”>Fiat Punto</option>
<option value=”Opel Corsa”>Opel Corsa</option>
</optgroup>
<optgroup label=”Motocykle”>
<option value=”Kawasaki Z750”>Kawasaki Z750</option>
<option value=”HONDA CBR 125R”>51-70</option>
</optgroup>
</select>
Na rys. 5 znajduje siê przykład w jaki sposób przegl¹darki internetowe
wyœwietlaj¹ grupy list rozwijanych oraz przewijanych.
4
rows
– wysokoœæ okreœlona liczb¹ wierszy,
4
cols
– szerokoœæ okreœlona liczb¹ kolumn,
4
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):
<textarea name=”tresc” cols=”80” rows=”10”>
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:
4
name
– ma to samo znaczenie co w przypadku znacznika <input/>,
4
size
– wielkoœæ okreœlona w iloœciach wierszy; podanie tego paramet-
ry oznacza, ¿e chcemy utworzyæ listê przewijan¹,
4
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
5
6
96
INTERNET.lipiec.2006
www.mi.com.pl
4
4
HTML
<form action=”index.php” method=”post”>
<fieldset>
<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>
<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:
<form action=”index.php” method=”post”>
<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æ:
<form action=”index.php” method=”post”>
<fieldset>
<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>
<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
97
n
REKLAMA
Plik z chomika:
tomekrostalsk
Inne pliki z tego folderu:
Dariusz Majgier -xhtmlcss.zip
(1196 KB)
Kurs HTML.zip
(1185 KB)
Kurs języka HTML - poradnik webmastera (HELION).rar
(1790 KB)
kurs.HTML. - PODSTAWY TWORZENIA STRON WWW.rar
(243 KB)
Pełny.kurs.HTML.4.01.XHTML.1.0.i.CSS.2.z.przykładami..zip
(939 KB)
Inne foldery tego chomika:
▶ FILMY 2011
▶ FILMY 2012
• Katalog elementów SMD
• Poradniki itp (1234)
• Schematy spawarek
Zgłoś jeśli
naruszono regulamin