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. Istniej▒ te┐ programy wyspecjalizowane w tworzeniu formularzy, jak np. WebForms. Chodzi jednak 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:
Mniej ni┐ 20 21-40 41-60 wiΩcej ni┐ 60
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:pawel.wimmer@lupus.waw.pl". 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µ
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 jan.kowalski@firma.com.pl.
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>
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: Truskawki Maliny Poziomki Wi╢nie ªliwki
Gdyby╢my chcieli zapewniµ mo┐liwo╢µ wybrania kilku pozycji, powinni╢my podaµ <SELECT NAME="nazwa_listy" MULTIPLE>
Truskawki Maliny Poziomki Wi╢nie ªliwki
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:
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.
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:pawel.wimmer@lupus.waw.pl" 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.