Formularze

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".
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, 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. Na
szczęście udział IE3 jest już szczątkowy, więc chyba nie jest to konieczne.
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>
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">
....
</FORM>
Jest jeszcze inne praktyczne zastosowanie tematu w definiowaniu akcji w formularzu. Darmowy program Aureate Group Mail
(http://www.infacta.com) to świetna aplikacja do grupowego wysyłania listów elektronicznych. Zawiera ona specjalną wtyczkę Subscriber, która
potrafi budować bazę danych odbiorców przesyłek na podstawie wystawionej w Internecie ankiety-formularza. Jeśli podamy w ankiecie określony
temat, a jednocześnie uwrażliwimy Subscribera na ten temat (konkretny ciąg znaków w temacie), będzie on automatycznie wstawiać osoby
zamawiające do bazy. Bazę zaś możemy wykorzystać do przesyłania biuletynów, powiadomień i rozmaitych innych rzeczy. To doskonałe rozwiązanie,
które warto polecać zwłaszcza osobom indywidualnym i małym firmom.
Uwaga: Aureate Group Mail w wersji do 3.0.611 współpracuje z wtyczką Subscriber, natomiast nowsza wersja 3.2 już nie - autorzy udostępniają
wtyczki jedynie dla komercyjnych wersji Plus i Pro. Na szczęście starsze wersje AGM i wtyczek można pobrać z serwisu Strefa zrzutu w portalu
Republika.pl: http://fabryka.republika.pl/strefa/.
Szerszy opis Aureate Group Mail znajdziesz pod adresem http://www.pckurier.pl/inetools/agm.html, a nas stronie poradników w PCkurierze
znajdziesz napisany specjalnie poradnik, opisujący w praktyczny sposób technikę posługiwania się Aureate Group Mail. W Webmasterze znajduje się
artykuł o wtyczce Subscriber, opisujący nieco nowszą jej wersję.
W formularzu ankiety w kursie jest tutaj zawarty mój redakcyjny adres poczty elektronicznej, dzięki czemu wypełniana przez Państwa ankieta trafia
niezawodnie na moje biurko. Od lat rozpoczynam swój redakcyjny dzień właśnie od czytania sporej ilości poczty.
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.
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?
Netscape Navigator
Microsoft Internet Explorer
NCSA Mosaic
ƒ TEXTAREA jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika.
Na przykład:
Wpisz swoje uwagi:
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 medycznopsychologicznych!).
<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">
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 [email protected].
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">
Usuń w szystkie informacje
BUTTON
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. Polecenie jest interpretowane tylko przez Internet Explorera 4 lub 5.
<BUTTON>Treść przycisku</BUTTON>
Treść przycisku
Przyciskw 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:
Truskaw ki
Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, powinniśmy podać <SELECT NAME="nazwa_listy" MULTIPLE>
Truskaw ki
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).
Truskaw ki
Możemy też zmienić wysokość okienka (długość listy), używając parametru SIZE. Na przykład:
<SELECT SIZE=10>
Truskaw ki
Maliny
Poziomki
Wiśnie
Śliw ki
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:
Ach, jaki genialny!
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.
Wysyłanie plików
Specyfikacja HTML przewiduje jeszcze polecenie przesyłania plików, aczkolwiek jest ono w tej chwili źle interpretowane.
Polecenie ma przykładową postać:
<input name="pliczek" type="file">
Wyślij ten plik
W poleceniu definiującym akcję powinno być podane <FORM ENCTYPE="multipart/form-data" ACTION=... >
Niestety, tylko Netscape potrafi wysłać tekstowy załącznik (z polskimi literami są tu jednak kłopoty) w formularzu opracowanym według metody
mailto:. Pliki binarne są przetwarzane na "sieczkę". Nie obsługuje tego także mailer Response-O-Matic, który obsługuje ankietę w naszym kursie.
Internet Explorer, nawet w najnowszej wersji, nie dołącza plików w ogóle.
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, np.
mailto:Formatter i IndaloPost. 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:[email protected]?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
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
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 Interet
Explorer 4 beta 2 lub nowszy. Alternatywne rozwiązanie stanowi Response-O-Matic, opisany tutaj. Jest on oparty na skryptach CGI.