Tematy: Uwagi ogólne | Ogólne ramy formularza | Grupy pól formularza | Pole tekstowe | Pole hasła | Pole opcji | Pole wyboru | Lista wyboru | Obszar tekstowy | Wysyłanie | Przycisk | Formularze w Operze

Formularze

O rozdziale: Tworząc strony internetowe, przekazujesz informacje swoim czytelnikom. A czy możliwa jest sytuacja odwrotna, gdy to właśnie Ty uzyskujesz informacje od gości swojej strony? Owszem, temu właśnie służą formularze - technikę ich tworzenia prezentujemy w niniejszym rozdziale.

Uwagi ogólne

Formularze to jedne z najciekawszych elementów stron internetowych. Pozwalają one autorom stron uzyskiwać informację od czytelników, zaś tym ostatnim, na przykład, wypełniać ankiety czy zamawiać jakieś towary i usługi. Przykładem formularza jest strona z ankietą w niniejszym kursie, za pomocą której Czytelnicy tego kursu zechcieli uprzejmie wysłać kilka cennych informacji o sobie i swoich narzędziach pracy. Jeszcze raz bardzo im dziękuję za poświęcony czas.

Warto zauważyć, że formularze nie należą bynajmniej do najprostszych i najbardziej potrzebnych na co dzień elementów. Są one w zasadzie stosowane przez nieco bardziej zaawansowanych autorów stron WWW. Na dodatek tematyka tworzenia formularzy wkracza już na ogół w zagadnienia pracy skryptów na serwerze, co jest już "wyższą szkołą jazdy".

Jednak stosunkowo niezbyt skomplikowany formularz można wykonać domowymi środkami, a kontakt z czytelnikami strony zapewnić sobie za pomocą poczty elektronicznej, tak jak ma to miejsce w przypadku wspomnianej ankiety. Tego rodzaju formularz będzie zapewne najczęściej stosowany przez znakomitą większość osób zainteresowanych zebraniem jakiejś informacji. Tutaj pokażemy właśnie w praktyczny i możliwie prosty sposób zasady konstruowania takiego formularza.

Na rynku programów shareware'owych i freeware'owych istnieje wiele narzędzi, które wspomagają tworzenie formularzy. Jeśli zamierzamy tworzyć dokumenty internetowe zawierające formularze, warto zaopatrzyć się w edytor, który zawiera kreator formularza lub przynajmniej okienka dialogowe do budowania poszczególnych elementów - w praktyce wszystkie zaawansowane edytory takie wspomaganie oferują. Istnieją też programy wyspecjalizowane. Chodzi generalnie o to, aby program nie zmuszał do wprowadania wszystkich kodów ręcznie.

Ogólne ramy formularza

Elementy formularza są tworzone w pewnych ogólnych ramach, między nimi umieszczamy wszystkie pozostałe elementy. Ramy te tworzymy za pomocą polecenia:

<form> </form>.

Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Nas interesuje w tym miejscu wysyłanie informacji za pomocą poczty elektronicznej, w związku z czym w definicji formularza powinniśmy umieścić specjalne polecenie action=jakaśtamakcja. Należy również określić sposób komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje, czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - post lub get. Wygląda to więc ostatecznie następująco (zakładamy, że czytelnik strony ma wysłać informacje za pomocą poczty elektronicznej):

<form action="mailto:autor_strony@jego_domena" method="post">
zawartość formularza
</form>

Jeśli dodasz jeszcze temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka.

<form action="mailto:autor_strony@jego_domena?subject=Temat ankiety" method="post">
zawartość formularza
</form>

I jeszcze jeden istotny parametr:

Gdyby ktoś wysłał tak skonstruowany formularz , dane dotarłyby nie w liście, a w załączniku, i to mniej więcej w takiej postaci:

Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40&
zaj%EAcie=emerytura&Miejscowo%9C%E6=50-100&komputer=PC+Pentium&system=on&
Przegl%B9darka+WWW=Netscape+Navigator&
Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij

Problem polega na tym, że znaki z formularza są w dość osobliwy sposób konwertowane i docierają częściowo w postaci "krzaków". Jeśli nie chcemy, aby odpowiedź przychodziła w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, powinniśmy zastosować parametr enctype="text/plain".

<form enctype="text/plain" action="mailtorwimmer@wimmer.pl?subject=Temat ankiety" method="post">

A oto, co zobaczymy w otrzymanym liście:

Imię i nazwisko=Jan Kowalski
Płeć=mężczyzna
Wiek=31-40
zajęcie=praca
Miejscowość=powyżej 1000
komputer=PC Pentium
system operacyjny=Windows 95
Przeglądarka WWW=Internet Explorer
Przeglądarka WWW=Netscape Navigator
Ocena=bdb
Opinia=Genialne
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ

Informacje o FORM

Grupy pól formularza

Formularz zawiera różnego typu pola, które są wypełniane informacjami - np. imię i nazwisko, zamawiany towar, dalsze informacje o sobie, komentarz itd. Pola te są podzielone na kilka podstawowych grup:

Na przykład (wykorzystujemy tu dodatkowo obramowanie pól formularza fieldset i opis legend, które prezentowaliśmy w rozdziale o elementach blokowych, sformatowane dodatkowo za pomocą stylów):

Formularz - przykład input

Wpisz swoje imię i nazwisko:

lub

Formularz - przykład input

Ile masz lat?

Mniej niż 20 21-40 41-60 więcej niż 60

Na przykład:

Formularz - przykład select

Jakiej przeglądarki WWW używasz?

Na przykład:

Formularz - przykład textarea

Wpisz swoje uwagi:

Niżej rozpatrzymy szczegółowo konstrukcję elementów wchodzących w skład formularza.

Pole tekstowe

Jak wspomnieliśmy wyżej, input służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji.

Pole tekstowe tworzymy za pomocą definicji:

<input type="text" name="nazwa_pola" value="wartość początkowa" size="rozmiar pola w znakach" maxlength="maksymalny rozmiar pola">

Na przykład:

<input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="40">

A łącznie z informacją wprowadzającą:

<p>Podaj swoje nazwisko: <input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="40"></p>

Pamiętaj, aby wszelkie zdania w formularzu, pola, zestawy opcji itd. obejmować jakimiś pojemnikami, np. znacznikami akapitu <p> czy bloku <div> - jest to konieczne do zwalidowania kodu strony przez sieciowy walidator World Wide Web Consortium.

Formularz - przykład pola tekstowego

Podaj swoje nazwisko:

Type="text" to typ pola, w tym wypadku tekstowego. Name to nazwa pola, w naszym przykładzie "nazwisko".

Naturalnie podanie wartości początkowej value nie jest konieczne, wystarczy zostawić pusty cudzysłów - wartość początkowa ma jedynie sugerować użytkownikowi charakter wprowadzanych danych. Size to wielkość widocznego pola w znakach (gdy zawartość pola będzie dłuższa, będzie ono "przewijane" w prawo), natomiast maxlength to maksymalna liczba znaków, jaką można wprowadzić.

Przykład bardziej rozbudowanego zestawu pól tekstowych, w których wykorzystujemy dodatkowo formatowanie za pomocą stylów, m.in. pozycjonowanie pól tekstowych za pomocą position: absolute; left: 150px; , aby pola do wprowadzania danych były ustawione w tej samej odległości od lewego marginesu pojemnika, a background-color: cornsilk; do nadania koloru tła polom tekstowym.

<div style="position:relative">
<form enctype="text/plain" action="mailto:wimmer@helion.pl?subject=Temat ankiety" method="post">
<fieldset>
<legend>Formularz - przykład <strong>pola tekstowego</strong></legend>
<p><strong>Imię</strong>: <input type="text" name="Imie" value="Jan" size="30" maxlength="40" style="position: absolute; left: 150px; background-color: cornsilk; font-style: italic; color: gray "></p>
<p><strong>Nazwisko</strong>: <input type="text" name="Nazwisko" value="Kowalski" size="30" maxlength="40" style="position: absolute; left:150px; background-color: cornsilk; font-style: italic; color: gray "></p>
<p><strong>Zawód</strong>: <input type="text" name="Zawod" value="inżynier" size="30" maxlength="40" style="position: absolute; left:150px; background-color: cornsilk; font-style: italic; color: gray "></p>
</fieldset>
</form>
</div>
Formularz - przykład pola tekstowego

Imię:

Nazwisko:

Zawód:

Pole hasła

Pole hasła jest bardzo podobne do pola tekstowego. Jest stosowane do podawania hasła, np. przy przechodzeniu do jakiejś strony. Zaletą pola tego typu jest jedynie ukrycie wpisywanych danych przed postronnym okiem - nie zapewnia ono szyfrowania danych czy zabezpieczenia transmisji. Stosowany jest tutaj type="password".

<p>Podaj hasło: <input type="password" name="haslo" value="" size="20" maxlength="20"></p>

Gdy spróbujesz wpisać do poniższego pola jakiś tekst, zostanie on wyświetlony za pomocą gwiazdek.

Formularz - przykład pola hasła

Podaj hasło:

Pole opcji

Pole opcji (przełącznika) jest polem, w którym czytelnik strony wybiera jedną z dostępnych możliwości

W polu stosowany jest type="radio", który wprowadza tzw. przycisk radiowy. Czytelnik będzie wybierał tylko jedną z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Typ ten stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne. Trudno być na przykład jednocześnie kobietą i mężczyzną (proszę się powstrzymać od żartobliwych spekulacji medyczno-psychologicznych!).

<p><input type="radio" name="plec" value="kobieta" checked="checked"> Kobieta</p>
<p><input type="radio" name="plec" value="mezczyzna"> Mężczyzna</p>

Nazwą pola name jest "plec", wartość value przybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwości checked="checked", pole to będzie domyślnie zaznaczone.

Formularz - przykład pola opcji

Podaj swoją płeć

Kobieta
Mężczyzna

Pole wyboru

Pole wyboru umożliwia dokonanie wyboru kilku możliwości jednocześnie, np. zaznaczenie kilku języków, którymi się włada, czy kilku używanych przeglądarek internetowych.

W polu stosowany jest type="checkbox", który wprowadza pole w postaci kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Jeśli zdefiniujemy kilka pól, czytelnik strony będzie mógł zaznaczyć parę z nich lub wszystkie, zależnie od treści.

<p><input type="checkbox" name="jezyk" value="angielski"> angielski</p>
<p><input type="checkbox" name="jezyk" value="francuski"> francuski</p>
...

Name jest nazwą pola - w tym wypadku jest to język. Każde kolejne pole zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych (tę samą zmienną). Value zmienia się, zależnie od języka. W kolejnych wierszach musimy wpisać różne języki. Za poleceniem input wpisujemy jeszcze raz nazwę języka, aby była widoczna dla czytelnika.

Formularz - przykład pola wyboru

Czy znasz któryś z języków kongresowych?

angielski
francuski
niemiecki
hiszpański
rosyjski
chiński
arabski

Informacje o INPUT

Lista wyboru

Lista wyboru select służy do tworzenia rozwijanych menu, zawierających kilka opcji. Czytelnik strony może wybrać jedną z nich lub kilka. Składnia jest następująca:

<div>
<select name="nazwa_listy" size="liczba wyświetlanych pozycji">
<option> pierwsza pozycja
<option> druga pozycja
<option> trzecia pozycja
...
</select>
</div>

Na przykład:

<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="owoce" size="3">
<option> Truskawki
<option> Maliny
<option> Poziomki
<option> Wiśnie
<option> Śliwki
</select>
</div>

Zauważ, że gdy nie podamy liczby wyświetanych pozycji (size=x), uzyskamy rozwijaną listę, gdy ją podamy, otrzymamy daną liczbę widocznych pozycji.

W efekcie uzyskamy:

Formularz - przykład listy wyboru

Wybierz produkt:

Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, a nie jednej, powinniśmy podać:

<select name="owoce" size="3" multiple="multiple">

Czytelnik strony może zaznaczać wtedy kilka pozycji, trzymając wciśnięty klawisz Ctrl. Rezygnacja z wyboru także wymaga przyciśnięcia Ctrl.

Formularz - przykład listy wyboru

Wybierz produkt:

Jeśli chcemy zaznaczyć domyślnie jedną z pozycji, musimy użyć przy niej parametru selected (czyli <option selected="selected"> pozycja).

Formularz - przykład listy wyboru

Wybierz produkt:

Informacje o SELECT

Listę opcji możemy dodatkowo grupować, wykorzystując polecenie optgroup.

<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="owoce" size="8">
<optgroup label="Owoce miękkie">
<option> Truskawki
<option> Maliny
<option> Poziomki
</optgroup>
<optgroup label="Owoce twarde">
<option> Jabłka
<option> Gruszki
</optgroup>
</select>
</div>
Formularz - przykład listy wyboru z grupowaniem opcji

Wybierz produkt:

Zauważmy jeszcze przy okazji, że przeglądarki nieco odmiennie wyświetlają listy wyboru z grupowaniem opcji - w IE7 i Firefoksie tytuły bloków opcji są pogrubione i pochylone, a w Operze białe na czarnym tle. Nawiasem mówiąc, sposób wyświetlania możemy samodzielnie zmienić, nadając poleceniu optgroup odpowiednie style, np. czerwony kolor czy niebieskie tło.

Informacje o OPTGROUP

Obszar tekstowy

Obszar tekstowy to miejsce, w którym czytelnik strony wysyłający formularz może wpisać swoje dodatkowe uwagi, o objętości do 1024 znaków.

Obszar jest wprowadzany za pomocą polecenia:

<textarea name="nazwa" rows="x" cols="y"> </textarea>

Parametr rows wyznacza liczbę kolumn pola, a parametr cols - liczbę wierszy.

Przykład kodu:

<fieldset>
<legend>Formularz - przykład <strong>obszaru tekstowego</strong></legend>
<form action="mailto:wimmer@helion.pl" method="post">
<p><strong>Wpisz swoje uwagi:</strong></p>
<p><textarea name="uwagi" rows="8" cols="50" style="color: gray; font-style: italic; ">
tutaj jest miejsce na twoje swobodne uwagi (do 1024 znaków)
</textarea></p>
</form>
</fieldset>
Formularz - przykład obszaru tekstowego

Wpisz swoje uwagi:

Zwróc uwagę na tekst między znacznikami textarea - informuje on czytelnika, że w tym miejscu może wpisać swoje uwagi.

Informacje o TEXTAREA

Wysyłanie danych

Po zbudowaniu formularza trzeba jeszcze zatroszczyć się o kod, który pozwoli wysłać informacje podane przez czytelnika strony do jej autora. Służy do tego polecenie input z atrybutem type="submit". Gdy czytelnik kliknie ten przycisk, wszystkie podane przez niego informacje (ciągle zakładamy, że posługujemy się tu funkcją poczty elektronicznej), jak zaznaczone opcje, wypełnione pola tekstowe czy wybrane pozycje na liście zostaną przesłane w liście do autora.

<input type="submit" value="Wyślij do nas informacje">

Atrybut value="treść_na_przycisku" spowoduje wyświetlenie informacji na przycisku, która mówi czytelnikowi, co ma zrobć, aby przesłać formularz. Kliknięcie na przycisku uruchomi z kolei domyślny program obsługujący pocztę elektroniczną i zapoczątkuje proces przesyłania poczty do osoby, która została zdefiniowana w action="mailto:autor_strony@jego_domena".

Można też dać czytelnikowi możliwość wycofania się z wprowadzonych danych - zresetowania całego formularza.

Atrybut type="reset" spowoduje usunięcie wszystkich danych wpisanych do formularza (właściwie zresetowanie do wartości domyślnych). Czasem rozmyślimy się, więc zawsze warto mieć możliwość zrezygnowania i rozpoczęcia wszystkiego od nowa.

<input type="reset" value="Usuń wszystkie informacje">

Przykładowy formularz, łączący obszar tekstowy i przyciski wysyłania i resetowania zawartości.

Uwagi od czytelników

Wypełnij poniższe pola

Podaj swoją płeć

Kobieta
Mężczyzna

Gdy wpiszesz coś do obszaru tekstowego i klikniesz przycisk Wyślij, zostanie uruchomiony program pocztowy (uwaga: adres jest fikcyjny). Gdy klikniesz przycisk Usuń, zawartość obszaru tekstowego zostanie przywrócona do pierwotnej postaci.

Przycisk

Nowym elementem HTML 4 jest polecenie button, które jest podobne do klasycznego input, ale pozwala wprowadzić do "klikalnego" przycisku znacznie więcej elementów.

<button>treść przycisku</button>

Przycisk z tekstem

Funkcjonalność przycisku można rozbudowywać o skrypty.

Informacje o BUTTON

Formularze w Operze

Wersje Opery starsze niż 9.x mają problem z wysyłaniem danych formularza - wysyłają pusty list. W 9.x problem ten najwyraźniej zniknął, ale ponieważ wiele osób posługuje się starszymi wersjami programu, można zastosować specjalny skrypt (JavaScript), który ominie ten problem. W części nagłówkowej dokumentu jest wstawiany kod skryptu, natomiast w definicji formularza odwołanie do niego.

Ze względu na prawa autorskie nie przytaczamy tu treści, natomiast odsyłamy do jego autora, Sławomira Kokłowskiego, gdzie znajdziesz wyjaśnienie problemu.