Kurs XHTML - część siódma

Formularze

Dość często zachodzi potrzeba wysłania jakiejś informacji przez czytelnika do skryptu lub autora strony. Najlepszym rozwiązaniem tego problemu są formularze.

Struktura i działanie formularzy

Formularze definuje się przy pomocy znacznika <form>. Tylko pomiędzy nim, a znacznikiem zamykającym </form> mogą wystąpić elementy takie jak input, select czy textarea. Te elementy są elementami, z których buduje się formularze. Każdy z nich powinien posiadać jakiś identyfikator, który jednoznacznie odróżniałby ten element od innych.

Formularze wysyła się metodą POST lub metodą GET. Różnice pomiędzy tymi dwiema metodami są dość znaczne. Metoda POST wysyła wszystkie dane z formularza przy pomocy nagłówków HTTP, zaś metoda GET przesyła informacje do serwera doklejając je do adresu. Każdy na pewno dobrze zna metodę GET ponieważ jej działanie jest widoczne dla użytkownika, a adres jest w postaci podobnej do przykładu: http://www.serwer.pl/skrypt.php?imie=Jan&nazwisko=Kowalski. Metodą POST można przesyłać (teoretycznie) nieograniczoną ilość informacji, natomiast metoda GET nadaje się tylko do przesyłania małej ilości informacji, gdyż długość adresów jest ograniczona. Dodatkowym plusem metody POST jest możliwość wysyłania plików na serwer. Do wysyłania służy specjalny typ elementu input - submit i należy zawsze pamiętać, aby w każdym formularzu znalazł się element wysyłający.

Definicja formularza

Jak już wspomniałem, formularz definuje się przy pomocy znacznika <form>. Należy ustawić kilka jego parametrów, w szczególności action oraz method, np.:

<form action="skrypt.php" method="post">

<p>...</p>
</form>

Wcisnięcie przycisku wysyłającego taki formularz (w przykładzie brak tego przycisku) spowoduje wysłanie jego zawartości do skryptu skrypt.php przy pomocy metody POST.

Przydatnym parametrem jest enctype, którego ustawienie powoduje zmianę typu wysyłanych informacji. W szczególności jest on pomocny, gdy formularz ma być wysłany przy pomocy programu pocztowego na adres e-mail, np.:

<form action="mailto:adres@test.com" method="post" enctype="text/plain">
<p>...</p>
</form>

Taki formularz zostanie wysłany pocztą elektroniczną przy pomocy programu pocztowego. Zawartość takiego listu będzie (wystarczająco) czytelna dla odbiorcy.

Element input i jego typy

Element input jest najczęściej używanym elementem formularzy, służy w większości przypadków do wprowadzania tekstu, ale może też służyć jako kontener na informację niejawną, ważną dla działania skryptu, ale zupełnie bezużyteczną dla czytelnika.

Najważniejsze atrybuty elementu input to:

type
Definiuje typ elementu. Może przyjmować wartości:
text
Jednolinijkowe pole tekstowe
password
Jednolinijkowe pole służące do wprowadzania haseł
submit
Przycisk wysyłający formularz
reset
Czyści zawartość formularza i przywraca wartości domyślne
file
Pozwala na wybranie pliku do wysłania na serwer
radio
Radiobutton - przycisk z grupy, z której wybrany może być tylko jeden
checkbox
Przycisk z grupy, z której może zostać wybrana dowolna ilośc przycisków
hidden
Element ukryty, niewidoczny dla czytelnika
button
Przycisk nie mający domyślnej akcji, należy go oprogramować przy pomocy skryptów wykonywanych po stronie klienta
image
Przycisk wysyłający formularz stworzony przy pomocy obrazka
id
Identyfikator pola
name
Nazwa pola. Ponieważ na rynku jest wciąż wysoki udział starych przeglądarek, ten parametr powinien być używany równolegle z parametrem id, ale w niektórych przypadkach jego użycie jest konieczne, ponieważ parametr id musi być unikalny, a name już nie.
value
Domyślna wartość pola
maxlength
Maksymalna długość zawartości pola
size
Długość wizualna pola
alt
Tekst alternatywny
src
Adres obrazka, użyteczny tylko dla typu image
disabled
Ustawienie tego parametru spowoduje, że element będzie nieaktywny

Dla przykładu, stwórzmy formularz, który będzie posiadał pole tekstowe, pole do wpisania hasła, kilka radiobuttonów, kilka checkboksów, jedno pole ukryte, możliwość wysłania i wyczyszczenia formularza, czyli coś takiego:

Login:
Hasło:
Magazyn @t jest:
Wspaniały
Kapitalny
Idealny
Chcę zamówić:
7 ton sypkiego piasku wysokiej jakości
Tonę cementu budowlanego o zapachu alpejskiej mięty
Ferrari z bagażnikiem pełnym groszku

Kod tego przykładu:

<form action="." method="get">
<p>Login: <input type="text" maxlength="20" name="login" id="login" /><br />

Hasło: <input type="password" name="haslo" id="haslo" /><br />
Magazyn @t jest:<br />
<input type="radio" name="opinia" value="wspaniały" checked="checked" />Wspaniały<br />

<input type="radio" name="opinia" value="kapitalny" />Kapitalny<br />
<input type="radio" name="opinia" value="idealny" />Idealny<br />

Chcę zamówić:<br />
<input type="checkbox" name="kupno" value="piasek" checked="checked" />7 ton sypkiego piasku wysokiej jakości<br />

<input type="checkbox" name="kupno" value="cement" checked="checked" />Tonę cementu budowlanego o zapachu alpejskiej mięty<br />
<input type="checkbox" name="kupno" value="groszek" />Ferrari z bagażnikiem pełnym groszku<br />

<input type="hidden" name="referencja" id="referencja" value="Użytkownik przyszedł ze strony http://www.at.w.pl/" />
<input type="reset" value="Wyczyść" /><input type="submit" value="Wyślij" />

</p>
</form>

Jak widać, formularz jest wysyłany do pliku o nazwie ., czyli do katalogu, w którym się aktualnie znajdujemy. Dane są wysyłane metodą GET (kliknięcie w przycisk wysyłający pozwoli podejrzeć jak to się odbywa). Oczywiście nie polecam tej metody do przesyłania haseł.
Elementy w formularzu, nie mogą być umieszczone ot tak sobie. Muszą się zawierać w jakimś elemencie blokowym, na przykład w akapicie.
Na samym początku umiejscowiony jest zwykły, domyślny element input typu text jego nazwa i identyfikator to login. W kolejnej linii umieszczony jest element o nazwie haslo i typie password.
Kolejnymi elementami są pola typu radiobutton, czyli przyciski jednokrotnego wyboru. Dzięki temu, że mają taką samą zawartość parametru name w jednej chwili zaznaczony może być tylko jeden z nich. W pierwszym tego typu przycisku użyłem jeszcze parametru checked o wartości takiej samej jak jego nazwa. Spowodowało to, że pierwszy z tych przycisków jest domyślnie wybrany.
Następnie można znaleźć grupę elementów input typu checkbox, czyli pola wielokrotnego wyboru. Również posiadają tę samą wartość parametru name, ponieważ dotyczą tego samego tematu (w tym przypadku pytania o zamówienie). Tutaj także można używać parametru checked
Poniżej znajdują się jeszcze trzy elementy, jeden element ukryty, element czyszczący oraz element wysyłający formularz.

Pole tekstowe - textarea

Wpisywanie większej ilości tekstu w jednolinijkowe pole w wielu przypadkach mija się z celem. Czasami tekst, który należy wpisać jest dość rozbudowany i wymaga odrobiny formatowania przy pomocy nowych linii. Element input nie jest w stanie zapewnić miejsca na takie teksty. Dlatego powstał element textarea. Element textarea posiada następujące parametry:

name
Nazwa pola
id
Identyfikator pola
cols
Ilość kolumn, parametr ten jest wymagany
rows
Ilość wierszy, parametr ten jest wymagany
disabled
Parametr, którego ustawienie spowoduje wyłączenie elementu
readonly
Ustawienie tego parametru spowoduje brak możliwości edycji zawartości pola

Pomiędzy znacznikiem otwierającym <textarea>, a znacznikiem zamykającym </textarea> można wpisać jakiś tekst. Tekst ten pojawi się w polu tekstowym. Przykłady:

Proste pole tekstowe:

<form action="."><p>

<textarea name="tekst1" rows="10" cols="10">Wpisz coś</textarea>
</p></form>

Pola tekstowe: wyłączone i tylko do odczytu

<form action=".">
<p><textarea name="tekst2" rows="3" cols="20" disabled="disabled">Wyłączone pole tekstowe</textarea></p>

<p><textarea name="tekst3" rows="3" cols="20" readonly="readonly">Pole tekstowe tylko do odczytu</textarea></p>
</form>

Wybór opcji: elementy select i option

Czasami zdarza się, że musimy stworzyć listę, z której można wybrać jeden lub więcej elementów. Do tego służą elementy select oraz option. Element select definiuje strukturę listy wyboru. W nim znajdują się elementy option, które stanowią możliwości wyboru. Parametry elementu select to:

name
Nazwa pola wyboru
id
Identyfikator
size
Ilość widocznych linii
multiple
Ustawienie tego parametru powoduje możliwość zaznaczania więcej niż jednej opcji na raz
disabled
Wyłączenie elementu

Parametry elementu option to:

value
Wartość przypisana tej pozycji
label
Krótki opis opcji
disabled
Wyłączenie opcji
selected
Ustawienie parametru powoduje zaznaczenie opcji

Przykład:

<form action=".">
<p><select name="wybor" size="3">

<option value="1" label="Opcja zaznaczona" selected="selected">Pierwsza opcja</option>
<option value="2">Druga opcja</option>
<option value="3" disabled="disabled">Opcja trzecia</option>

<option value="4">Opcja czwarta</option>
</select>
<select name="wybor2" multiple="multiple">
<option value="1" selected="selected">Pierwsza opcja</option>

<option value="2">Druga opcja</option>
<option value="3" selected="selected">Trzecia opcja</option>
</select>
</p>

</form>