Strona główna
Spis poleceń HTML | Wstęp | Etykieta webmastera | HTML dla bardzo początkujących | Struktura dokumentu | Czcionki | Elementy blokowe | Odsyłacze | Wykazy | Grafika i multimedia | Tabele | Style | Ramki | Pływające ramki | Formularze | Znaki specjalne | Kolory | Ankieta
Księga gości | Wprowadzenie do JavaScript | Przydatne skrypty | Response-O-Matic | Liczniki wizyt | Kilka słów o narzędziach | Leksykon webmastera | Wprowadzenie do FrontPage Express | Jak publikować w języku Esperanto? | Tworzenie stron z ActiveX | Tworzenie stron z HTML Help Java Applet | Narzędzia ICQ | Zasoby webmasterskie

# Formularze

Uwagi ogólne | Typy pól formularza | Ogólne ramy formularza | INPUT | BUTTON | SELECT | TEXTAREA | Plik w załączniku

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

Na stronie http://webmaster.helion.pl/kurshtml/agm/index.htmznajdziesz 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?

- 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 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 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 "klikalnego" przycisku znacznie więcej elementów. Polecenie jest interpretowane tylko przez Internet Explorera 4 lub 5.

<BUTTON>Treść przycisku</BUTTON>

Przycisk
z tekstem

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:

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:prwimmer@poczta.onet.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
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
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.