Formularze

Uwagi ogólne

Formularze to jeden z najciekawszych i najważniejszych 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ż w zagadnienia pracy skryptów na serwerze, co jest już "wyższą szkołą jazdy". Przykładem zaawansowanego systemu formularzowo-wyszukiwawczego jest interaktywny spis firm ogłaszających się w PCkurierze, który mogą Państwo zobaczyć na głównej stronie Lupusa. System ten został przygotowany przez naszego usługodawcę internetowego, firmę Polbox On-line Service.

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 (ReVol WebWorker czy WebEdit). Istnieją też programy wyspecjalizowane, jak np. WebForms. Chodzi generalnie o to, aby program nie zmuszał do wprowadania wszystkich kodów ręcznie.

Uwaga: gdy stosujemy standard kodowania ISO-8859-2, kilka polskich znaków może być błędnie interpretowanych w elementach formularzy (Internet Explorer 3). Jeśli autor formularza uzna to za rażące, może zrezygnować ze stosowania w nich polskich liter.

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

Wpisz swoje imię i nazwisko:


lub

Ile masz lat?

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

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

Na przykład:

Jakiej przeglądarki WWW używasz?

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

Na przykład:

Wpisz swoje uwagi:

Ogólne ramy formularza

Elementy formularza są tworzone w pewnych ogólnych ramach, zakreślonych przez polecenie <FORM></FORM>. Między nimi umieszczamy wszystkie pozostałe elementy.

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">
....
</FORM>

W formularzu ankiety w kursie ACTION="mailto:[e-mail]". Jest tutaj zawarty mój redakcyjny adres poczty elektronicznej, dzięki czemu wypełniana przez Państwa ankieta trafia (prawie, ze względu na wadę Internet Explorera) niezawodnie na moje biurko. Od kilkunastu miesięcy rozpoczynam swój redakcyjny dzień od czytania sporej ilości poczty - mam nadzieję, że nie zapomniałem nikomu podziękować.

Nawiasem mówiąc, istnieją specjalne skrypty, które generują odpowiedź autora strony automatycznie, co stanowi (nieco sztampowe) potwierdzenie odbioru, wsparte zazwyczaj jakimś grzecznym komentarzem. Zwalnia to od "ręcznego" wysyłania podziękowań, co ma sens w przypadku dużej ilości poczty.

INPUT

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.

INPUT ma następującą składnię:

<INPUT TYPE="typ" NAME="nazwa" VALUE="wartosc">. Można jeszcze podać MAXLENGTH=n, ograniczające długość wpisywanej informacji do n znaków.

Rozpatrzmy po kolei składniki tego polecenia:

Parametr TYPE określa rodzaj pola.

Jeśli nie wpiszemy TYPE, pole będzie domyślnie polem tekstowym. Gdybyśmy pytali o imię i nazwisko, możemy wpisać: <INPUT NAME="nazwisko">. NAME jest nazwą pola, które je identyfikuje. W przypadku imienia i nazwiska nie musimy wpisywać wartości pola, czyli VALUE, gdyż wprowadziłoby to do formularza jakieś dane, gdy to my sami oczekujemy ich od czytelnika.

Podaj swoje imię i nazwisko:

TYPE="checkbox" pozwala wprowadzić 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. Na przykład w ten sposób moglibyśmy się dowiedzieć, jakimi językami kongresowymi włada.

<INPUT TYPE="checkbox" NAME="jezyk" VALUE="angielski"> angielski
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="francuski"> francuski
...

NAME jest nazwą pola - w tym wypadku jest to język. Każdy kolejny INPUT zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych (tę samą zmienną). VALUE zmienia się, zależnie od języka. Wartość ta zostanie przesłana do autora. W kolejnych wierszach musimy wpisać różne języki. Za poleceniem INPUT wpisujemy jeszcze raz nazwę języka, aby była widoczna dla czytelnika.

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


angielski

francuski

niemiecki

hiszpański

rosyjski

chiński

arabski

TYPE="radio" pozwala wprowadzić przełącznik (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!).

<INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta
<INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna

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

Podaj swoją płeć

Kobieta

Mężczyzna

TYPE="submit" służy do wysłania informacji do autora strony (ciągle zakładamy, że posługujemy się funkcją poczty elektronicznej).

<INPUT TYPE="submit" VALUE="Wyślij do nas informacje">

VALUE="jakaśtamtreść" spowoduje wyświetlenie informacji na przycisku. 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. Proszę wypróbować działanie przycisku, ale zrezygnować potem z wysyłania, gdyż chyba nie ma w Polsce adresu [e-mail].

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

BUTTON

Nowym elementem HTML 4 jest polecenie BUTTON, które jest podobne do klasycznego INPUT, ale pozwala wprowadzić do "klikalngo" przycisku znacznie więcej elementów. Polecenie jest interpretowane przez Internet Explorer 4.

<BUTTON>Treść przycisku</BUTTON>

Treść przycisku

Przycisk w jednej linii z tekstem

pierwsza komórka	druga komórka
trzecia komórka	czwarta komórka

Wyślij do mnie ten formularz

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

SELECT

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

<SELECT NAME="nazwa_listy">
<OPTION> pierwsza pozycja
<OPTION> druga pozycja
<OPTION> trzecia pozycja
...
</SELECT>

w praktyce wygląda to następująco:

Wybierz produkt:

Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, powinniśmy podać <SELECT NAME="nazwa_listy" MULTIPLE>

Domyślnie program wyświetla cztery pozycje z listy, pozwalając ją przewijać. Wybieranie kilku pozycji wymaga trzymania naciśniętego klawisza 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> pozycja).

Możemy też zmienić wysokość okienka (długość listy), używając parametru SIZE. Na przykład:

<SELECT SIZE=10>

TEXTAREA

TEXTAREA jest poleceniem, które pozwala wprowadzić pole dla komentarza czytelnika. Jest to wygodne, gdyż jest w stanie przewidzieć wszystkie możliwości. Można więc zostawić miejsce, które wypełni czytelnik, jeśli uzna, że warto o czymś jeszcze napisać. A często autor wręcz prosi o dodatkowe uwagi.

<TEXTAREA NAME=nazwa> </TEXTAREA> wprowadza standardowe pole o 40 kolumnach i 4 wierszach.

Wpisz swoje uwagi:

Jeśli chcesz, aby pole miało inną wielkość, możesz podać dodatkowe wartości ROWS=x COLS=y. Na przykład:

<TEXTAREA NAME="komentarz" ROWS=10 COLS=50> </TEXTAREA>

Gdybyś podał jakiś tekst między otwierającym i zamykającym znacznikiem TEXTAREA, tekst ten ukazałby się w okienku. Można w ten sposób zasugerować coś czytelnikowi (ale to czasem naprawdę już nieco bezczelność...)

Wpisz swój komentarz na temat tego kursu:

Navigator 2.0 wprowadził interpretację zawijania tekstu (akceptuje to również Internet Explorer 3). Polecenie WRAP=off (domyślne) wyłącza zawijanie. WRAP=physical powoduje zawijanie tekstu w okienku i wysyłanie także tekstu zawiniętego. WRAP=virtual powoduje zawijanie tekstu w okienku, ale wysyłanie długich linii (akapitów) bez zawijania.

I na zakończenie pewna istotna uwaga:

Jeśli ktoś jest ciekaw, jak wygląda przesłany formularz, niech się przyjrzy temu oto dziwolągowi:

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". Wprawdzie da się to odczytać, ale z małymi kłopotami. istnieją jednak programy, które pozwalają odczytać przesyłkę i zaprezentować ją w bardziej ludzkiej formie. Polecałbym szczególnie mail:Formatter i IndaloPost. Proszę zajrzeć do 32-bit Shareware Collection at Windows95.com lub Tucows. A tutaj możesz pobrać maleńki polski programik Formater poczty dla DOS - tylko 9 KB.

Jeśli wolimy, aby odpowiedź przychodziła nie w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, możemy zastosować parametr enctype="text/plain", np:

<form enctype="text/plain" action="mailto:[e-mail]" 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
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
submit=Wyślij do nas informacje

Uwaga: Microsoft Internet Explorer 3 (a także IE4 beta 1) nie dołącza formularza do listu. Potrafi to zrobić Netscape Navigator, a także (wreszcie!!!) Interet Explorer 4 Preview 2. Alternatywne rozwiązanie stanowi polski TopNet Mailer, który jest opisany na stronie TopNet Mailer, a także Response-O-Matic, opisany tutaj.

---