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

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.

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ê+i+nazwisko=Jan+Kowalski&P³eæ=mê¿czyzna&Wiek=31-40&
zajêcie=emerytura&Miejscowoœæ=50-100&komputer=PC+Pentium&system=on&
Przegl¹darka+WWW=Netscape+Navigator&
Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wyœlij

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="mailto:wimmer@wimmer.pl?subject=Temat ankiety" method="post">

A oto, co zobaczymy w otrzymanym liście:

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:

• input, z dodatkowymi parametrami type, name i value, służy do tworzenia pól, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję.

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

lub

• select służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje.

Na przykład:

• textarea jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika.

Na przykład:

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.

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.

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.

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

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.

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.

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.

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:

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:

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.

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

Informacje o SELECT

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

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ę wierszy pola, a parametr cols - liczbę kolumn.

Przykład kodu:

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.

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 w jednej linii z tekstem

Wyślij do mnie ten formularz

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

Informacje o BUTTON