HTML

M

imo że z formularzy najczęściej korzystamy w połączeniu ze skryp-

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.

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

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

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

4

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ó[e-mail]?subject=temat_emaila

czyli znacznik form może wyglądać następująco:

<form action=”mailto:[e-mail]?subject=

Ã

moja ankieta” method=”post”>

<!--elementy formularza -->

</form>

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

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.

Marcin Staniszczak

W

EB

M

AS

TE

RI

N

G

HTML:

formularze

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

94

INTERNET.lipiec.2006

www.mi.com.pl

GET i POST

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

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

Rys. 1.

For-

mularz wy-

słany meto-

dą

GET – na

przykładzie

Google

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

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

value – wartość jaką początkowo przyjmuje kontrolka (parametr ten

nie jest wymagany),

4

checked – określa czy przycisk opcji (patrz dalej) ma być zaznaczony

(jedyną dozwoloną wartością tego parametru jest

checked

),

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,

4

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

text – jednolinijkowe pole służące do wprowadzania tekstu,

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,

W

EB

M

AS

TE

RIN

G

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ść

2

3

4

95

INTERNET.lipiec.2006

www.mi.com.pl

Rys. 4.

Listy – różnica pomiędzy listami rozwijanymi a przewijanymi

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

4

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

skryptu,

4

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

4

button – tworzy kontrolkę przycisku,

4

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”

Ã

/>

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

Ã

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-

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

pre

czy

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/>,

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

),

4

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

4

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

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.

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

W

EB

M

AS

TE

RI

N

G

Rys. 5.

Listy – grupy na listach rozwijanych oraz przewijanych

Rys. 6.

Etykiety oraz elementy grupujące

6

5

INTERNET.lipiec.2006

www.mi.com.pl

96

HTML

W

EB

M

AS

TE

RIN

G

97

INTERNET.lipiec.2006

www.mi.com.pl

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>

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

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

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.

n

REKLAMA