Formularze na stronie www
Formularze są złem koniecznym współczesnego świata. Czasami człowiek ma wrażenie, że wszystko się kręci wokół nich. Gdy się rodzimy, trzeba wypełnić formularz. Gdy umieramy, także ktoś wypełnia niezbędny formularz. Niestety Internet nie pozwala od nich uciec. Formularze internetowe nie są już tak nudnymi dokumentami, do jakich przywykłeś. Są interaktywne, a użytkownik może je przesłać, poprosić o dodatkowe informacje czy nawet nawigować z ich pomocą po Twoich stronach. Takie formularze ułatwiają życie. To są dobre formularze.
Umieszczając na swoich stronach internetowych formularze, nawiązujesz kontakt z czytelnikiem tych stron. Wypełniając i wysyłając formularz użytkownik może poprosić o dodatkowe informacje, wyrazić opinię o witrynie czy nawet dokonać zakupów. Ty z kolei, wykorzystując pewne elementy formularza, możesz projektować strony o rozszerzonych możliwościach.
Formularz ma dostarczyć szereg informacji od użytkownika. Źródłem informacji są wypełnione przez użytkownika pola opcji lub pola tekstowe. Po wypełnieniu, formularz jest przesyłany do serwera, gdzie niewielki skrypt obrabia jego zawartość, a rezultaty przekazuje do bazy danych. Zazwyczaj na tym etapie użytkownik otrzymuje potwierdzenie przesłania formularza. Wyobraźmy sobie formularz, w którym użytkownik jest proszony o podanie swojego nazwiska, adresu e-mail i numeru telefonu. Dane te powinien wpisać w trzy pola tekstowe. Wypełniony formularz jest wysyłany naciśnięciem przycisku Submit. Gdy użytkownik naciśnie ten przycisk, klient wysyła do serwera łańcuch informacji z formularza.
Kod HTML tworzący formularz nie jest skomplikowany i bardzo łatwo można go sobie przyswoić. Aby w pełni wykorzystać możliwości formularzy i zrozumieć ich działanie musisz koniecznie przynajmniej się z nim zaznajomić. Formularz definiowany jest przez element FORM, który składa się z otwierającego znacznika <FORM> i zamykającego znacznika </FORM>. W elemencie FORM zagnieżdżane są znaczniki <INPUT> i <SELECT>, a ich zadaniem jest utworzyć rzeczywiste elementy formularza. W tym miejscu należy wspomnieć, że formularz może zawierać wiele elementów INPUT. A oto podstawowa struktura formularza:
<FORM>
<INPUT>
<INPUT>
<INPUT> </FORM>
Znaczniki formularza można zagnieżdżać w obrębie innych znaczników HTML i odwrotnie ? znaczniki te można umieszczać w elemencie FORM. Znaczniki nie powinny się jednak nakładać, a elementy FORM nie powinny być w sobie zagnieżdżane. Wróćmy do początku i zajmijmy się atrybutami. Znacznik <FORM> ma siedem możliwych atrybutów. Te, z których będziesz korzystał, mają wpływ na funkcjonalność formularzy. Poprzez odpowiednie wartości możesz określić dokładnie zachowanie formularza w relacji z klientem. Możesz zdefiniować nazwę formularza, zdecydować gdzie i jak mają zostać przesłane dane, a nawet wskazać obiekt, do którego rezultat ma być wysłany (okno lub ramka). Oto lista atrybutów znacznika <FORM>:
NAME=??
ACTION=??
METHOD=??
TARGET=??
ENCTYPE=??
ACCEPT=??
ACCEPT-CHARSET=??
Oto przykładowa definicja, w której wykorzystano wszystkie atrybuty znacznika <FORM>: <FORM NAME=?clientinfo? ACTION=?http://www.cod.com.pl/cgi-bin/mailform.pl? METHOD=?Post? TARGET=?_blank? ENCTYPE=?multipart/form-data?>
Definiując nazwy formularza i jego elementów pamiętaj o paru rzeczach. Przede wszystkim nie stosuj w nazwach spacji i znaków specjalnych. Po drugie, nie stosuj słów zarezerwowanych (są to słowa stosowane przez języki skryptowe, które mogą wprowadzić w błąd interpreter skryptu, jeśli zostaną zastosowane jako nazwa obiektu. Ostatnia uwaga. Ponieważ tworzysz obiekty, które mogą być rozpoznawane przez języki skryptowe (takie jak JavaScript), warto nadawać im intuicyjne nazwy, aby ułatwić sobie późniejsze odwoływanie się do tych obiektów w skryptach.
Atrybut ACTION skierowuje formularz pod adres, pod którym dostępny jest skrypt CGI o nazwie mailform (jest to skrypt napisany w języku Pearl). CGI ? Common Gate Interface ? to skrypty stosowane do przetwarzania danych z formularzy. Zazwyczaj rezydują w katalogu cgi-bin lub cgi_bin.
Atrybut METHOD może przyjmować dwie wartości: Get i Post. W przypadku metody Get dane formularza są wysyłane pod adres URL określony w atrybucie ACTION. Metoda ta nakłada jednak ograniczenia na liczbę znaków. Nie jest ponadto bezpieczna. Jeśli więc formularze dotyczą e-komercji lub zawierają inne dane, których nie należy ujawniać, przy ich wysyłaniu powinna być stosowana metoda Post. W tym przypadku cała zawartość formularza jest wysyłana jako treść wiadomości, co znosi ograniczenie liczby znaków. Należy jednak wspomnieć, że metoda Get jest domyślną metodą w większości przeglądarek, jest to także najpowszechniej obsługiwany format. Wybór metody zależy w dużym stopniu od tego, z jakiej aplikacji lub skryptu CGI będziesz korzystać przy przetwarzaniu formularzy.
Atrybut TARGET stosowany jest do wskazania celu (ramki lub okna), w którym ma zostać wyświetlony dokument zwrócony z serwera. Do wyboru masz cztery predefiniowane cele czy też nazwy zarezerwowane, które określają żądane miejsce. Oto one:
_blank ? rezultat zostanie wyświetlony w nowym oknie, które pojawi się przed
bieżącym oknem przeglądarki.
_parent ? skierowuje dokument do nadrzędnego układu ramek zawierającego dokument bieżący.
_self ? spowoduje zastąpienie dokumentu bieżącego.
_top ? zastępuje zawartość bieżącego okna, także wówczas, gdy prezentowało ono układ ramek.
Jeśli cel nie zostanie zdefiniowany, przyjmowany jest cel domyślny _self.
Pole tekstowe hasła stanowi pewną odmianę jednowierszowego pola tekstowego. Zwykłe pole tekstowe oddaje dokładnie na ekranie tekst wprowadzony w nie z klawiatury. Czasami jednak nie jest to pożądane. Aby wpisywane w pole tekstowe litery zastępowane były na ekranie znakami domyślnymi, zastąp w znaczniku <INPUT> wartość TEXT atrybutu TYPE wartością PASSWORD. W systemach Windows stosowanym znakiem domyślnym jest gwiazdka (*); na komputerach pracujących pod kontrolą systemu Macintosh jest to kropka (.). Pamiętaj jednak, zastosowanie wartości PASSWORD atrybutu TYPE nie spowoduje kodowania danych. Jest to tylko wizualne zabezpieczenie przesyłanych danych.
Wielowierszowe pola tekstowe umożliwiają użytkownikowi wprowadzenie dłuższych i bardziej szczegółowych tekstów. Pola takie zaopatrzone są w poziome i pionowe paski przewijania i prezentują jednocześnie kilka wierszy tekstu (patrz rysunek 11.9). Aby przekształcić jednowierszowe pole tekstowe w pole wielowierszowe, zaznacz pole tekstowe i w sekcji Type inspektora Property wybierz pole opcji Multiline. Zwróć uwagę, że po zmianie typu pola, zmienia się także znacznik je definiujący. Znacznik <INPUT> zostaje bowiem zastąpiony znacznikiem <TEXTAREA>.
Bardziej strukturalnym podejściem do kwestii zbierania informacji jest rozwiązanie umożliwiające użytkownikowi wybieranie opcji z listy. Mając do dyspozycji pola wyboru użytkownik swobodnie wybiera (lub zaznacza) dowolną kombinację z oferowanych przez Ciebie możliwości.
W ten sam sposób jak pole tekstowe można wstawić przycisk opcji. Różnica między tymi obiektami polega na sposobie dokonywania wyboru. W przypadku korzystania z przycisków opcji, użytkownik może wybrać tylko jedną z możliwości. Oto parę istotnych uwag dotyczących przycisków opcji. Przede wszystkim pamiętaj, że przyciski opcji umożliwiają wybranie tylko jednej możliwości z całej ich grupy. Po drugie, grupa przycisków opcji jest identyfikowana poprzez ten sam atrybut NAME (aby zgrupować przyciski opcji, nadaj im tę samą nazwę). I ostatnia uwaga ? do identyfikacji poszczególnych przycisków grupy stosowana jest atrybut value. Przy przesyłaniu formularza, przesyłana jest wspólna nazwa przycisków oraz wartość przycisku zaznaczonego. Oto przykład kodu:
<FORM>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option1?>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option2?>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option3?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option1?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option2?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option3?>
</FORM>
Menu rozwijane umożliwia użytkownikowi wybranie opcji z listy możliwości. Jego niewątpliwą zaletą jest oszczędność miejsca na ekranie. Ponadto jest ono bardzo intuicyjnym elementem strony, bowiem użytkownicy nieustannie spotkając z nim w różnych miejscach wiedzą do czego służy. Menu rozwijane tworzone jest za pomocą dwóch par znaczników. Są to: <SELECT></SELECT> i <OPTION></OPTION>. Przedstawiony poniżej fragment kodu pokazuje sposób zagnieżdżania tych znaczników w kodzie.
<FORM>
<SELECT>
<OPTION VALUE=?value1?> etykieta_1 </OPTION>
<OPTION VALUE=?value2?> etykieta_2 </OPTION>
<OPTION VALUE=?value3?> etykieta_3 </OPTION>
</SELECT>
</FORM>
Pamiętaj o definiowaniu nazw elementów. Zacznij więc od zdefiniowania nazwy elementu SELECT, a następnie w elemencie OPTION podaj etykietę opcji (jest ona umieszczana między znacznikami <OPTION> </OPTION>). Wreszcie określ wartość atrybutu value znacznika <OPTION>. Przy przesyłaniu formularza, wraz z wartością atrybutu VALUE znacznika <OPTION> odpowiadającego zaznaczonej opcji, do serwera przesyłana jest nazwa elementu SELECT. Etykietę stanowi tekst pojawiający się jako pozycja listy rozwijanej.
Lista przewijana przypomina menu rozwijane, aczkolwiek między oboma obiektami istnieją niewielkie różnice. Rozwijanie zastąpione jest tu przewijaniem. Menu prezentuje jedną pozycję, a na liście rozwijanej jednocześnie można wyświetlić kilka lub wiele pozycji. Można też tak skonfigurować ustawienia, aby umożliwić użytkownikowi wybranie kilku pozycji naraz.
Pole danych typu HIDDEN (Hidden Field) znajduje swoje zastosowanie, gdy z formularza do serwera przesyłane są informacje, które nie zostały wprowadzone przez użytkownika lub mają być ukryte przed użytkownikiem.
Zasada funkcjonowania tego pola jest taka sama jak innych pól definiowanych za pomocą znacznika <INPUT>, podobnie też przebiega procedura wstawiania takiego pola w dokumencie. Ustaw punkt wstawiania w miejscu, w którym pole ma się pojawić i kliknij ikonę Hidden Field na palecie obiektów. Następnie zdefiniuj w polu HiddenField inspektora Property nazwę pola oraz atrybut VALUE. W widoku projektu pole typu HIDDEN jest reprezentowane przez żółty znacznik.