Rozdział 11. Formularze

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.

W tym rozdziale zajmiemy się następującymi kwestiami dotyczącymi formularzy:

q       Znacznik <FORM> i jego atrybuty

q       Znacznik <INPUT> i jego atrybuty

q       Tworzenie formularza przy wykorzystaniu palety obiektów programu Dreamweaver

Formularze HTML

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. Zacznijmy jednak od rzeczy najprostszych – od analizy kodu źródłowego, jaki kryje się za formularzem.

Podstawy

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. W naszym przykładowym formularzu wyglądałby on mniej więcej w ten sposób:

name=Blaine%20Tait&email=rblainet@home.com&phone=9057062895

Łańcuch ten jest przekazywany do skryptu, a ten dołącza informacje do bazy danych. Może na przykład przekształcić te dane do formatu z polami rozdzielonymi przecinkiem:

firstname=Blaine,

lastname=Tait,

email=rblainet@home.com,

phone=9057062895

Skrypt może także zwrócić do użytkownika potwierdzenie otrzymania danych lub przekazać mu podziękowanie za poświęcenie swojego czasu na wypełnienie formularza.

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

Początek ramki

Podpowiedź

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.

Koniec ramki

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

q       NAME=””

q       ACTION=””

q       METHOD=””

q       TARGET=””

q       ENCTYPE=””

q       ACCEPT=””

q       ACCEPT-CHARSET=””

Oto przykładowa definicja, w której wykorzystano wszystkie atrybuty znacznika <FORM>:

<FORM NAME=”clientinfo” ACTION=”http://www.me.com/cgi-bin/mailform.pl” METHOD=”Post” TARGET=”_blank” ENCTYPE=”multipart/form-data”>

Początek ramki

Podpowiedź

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 (patrz rozdział 19., “Tworzenie skryptów JavaScript w programie Dreamweaver”).

Koniec ramki

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. Więcej na temat języka Pearl i skryptów CGI znajdziesz w rozdziale 23., Skrypty i języki oparte o znaczniki”.

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:

q       _blank – rezultat zostanie wyświetlony w nowym oknie, które pojawi się przed bieżącym oknem przeglądarki.

q       _parent – skierowuje dokument do nadrzędnego układu ramek zawierającego dokument bieżący.

q       _self – spowoduje zastąpienie dokumentu bieżącego.

q       _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.

Początek ramki

Uwaga

W rozdziale 9., „Definiowanie układu strony za pomocą ramek” znajdziesz dodatkowe informacje na temat nazw ramek i kierowania połączeń do ramek. Z kolei rozdział 19. omawia kwestie związane ze stosowaniem nazw okien.

Koniec ramki

Atrybut ENCTYPE określa typ pliku i jego format. Poprawny format plików dostarczanych za pośrednictwem metod Get i Post jest zdefiniowany domyślnie. Jednak pewne zaawansowane zastosowania formularzy wymagają określenia tej wartości.

Obiekty formularza na palecie obiektów

Dotychczas skupialiśmy się na kodzie HTML, który tworzy formularz – jest bowiem niezwykle ważne, abyś znał jego podstawy. Tematem tej książki jest jednak tworzenie stron WWW, a nie ręczne pisanie kodu HTML. Tak więc zobaczmy jak z tworzeniem formularzy radzi sobie Dreamweaver.

Ćwiczenie 11.1. Tworzenie formularzy

1. Otwórz nowy dokument i wyświetl go w widoku kodu i projektu. Z menu palety obiektów wybierz kategorię Forms i kliknij ikonę Insert Form (patrz rysunek 11.1). Po naciśnięciu ikony, w dokumencie pojawia się formularz reprezentowany w widoku projektu obrysem rysowanym czerwoną przerywaną linią. Jeśli na Twoim monitorze obrys nie jest wyświetlany, rozwiń menu View i umieść znacznik obok pozycji Invisible Elements w menu podrzędnym Visual Aids. Inspektor Property zmieni się odpowiednio, wyświetlając atrybuty znacznika <FORM>. Pojawią się w nim atrybuty NAME, METHOD i ACTION (patrz rysunek 11.2).

Początek ramki

Quick Tag Editor

Aby zdefiniować pozostałe atrybuty znacznika <FORM>, musisz skorzystać z edytora Quick Tag Editor. Rysunki 11.3 i 11.4 pokazują kolejne etapy tego procesu. Zaznacz najpierw znacznik <FORM>, a następnie kliknij przycisk Quick Tag Editor w inspektorze Property. W oknie Tag Editor, które się pojawi, wpisz atrybut i jego wartość i naciśnij Enter. Zmiany zostaną wstawione do znacznika <FORM>.

Koniec ramki

2. Kliknij w polu tekstowym Form Name inspektora Property i nadaj formularzowi nazwę. Wpisz custInfo i naciśnij Enter.
3. Teraz zdefiniuj atrybut ACTION. Dla celów tego ćwiczenia zastosujemy fikcyjny adres URL. Umieść punkt wstawiania w polu ACTION i wpisz ../cgi-bin/mailform.pl. Naciśnij klawisz Enter.

Ostatnim krokiem jest zdefiniowanie metody formularza. Wybierz z listy rozwijanej Method inspektora Property pozycję Post. Rysunek 11.4 pokazuje także przykład kodu źródłowego generowanego przez Dreamweaver.

Ponieważ sam formularz został już zdefiniowany, przystąpimy teraz do określenia jego pól.

Pola tekstowe formularza

Zaczniemy od tych obiektów formularza, które są najpowszechniej stosowane – od pól tekstowych.

1. Sprawdź w widoku projektu, czy punkt wstawiania jest umieszczony w czerwonym obrysie formularza. Następnie kliknij w kategorii Forms palety obiektów ikonę Insert Text Field (lub wybierz w menu Insert pozycję Form Objects, a potem pozycję Text Field z menu podrzędnego). W Twoim formularzu pojawi się pole tekstowe i znajdzie to swoje odzwierciedlenie także w kodzie źródłowym. Analizując wstawiony fragment kodu zwróć uwagę, że znacznik <INPUT> nie ma znacznika zamykającego (patrz rysunek 11.5).

2. Korzystając z inspektora Property zdefiniuj nazwę pola tekstowego. Tak jak w przypadku innych obiektów, stosowana nazwa powinna być opisowa i określać wykorzystanie obiektu. W tym przypadku, użytkownik będzie wpisywał w tym polu tekstowym swoje imię, zastosuj więc nazwę fName. Umieść punkt wstawiania w polu TextField, wpisz nazwę i naciśnij klawisz Enter.
   Teraz zdefiniuj rozmiar i maksymalną długość pola tekstowego. Rozmiar to szerokość pola podawana w znakach. Definiuje się ją w polu Char Width. Maksymalna długość to maksymalna liczba znaków, jaką możesz wpisać w polu tekstowym. Jeśli maksymalna długość pola tekstowego przekracza rozmiar pola, tekst będzie w utworzonym polu przewijany. Maksymalną liczbę znaków podajesz w polu Max Chars.
   Kolejny krok w konfiguracji pola tekstowego to podanie wartości początkowej, czyli tekstu, który będzie wyświetlany w polu zanim użytkownik wprowadzi własny tekst. Wpisz tekst początkowy w polu Init Val (na przykład wpisz tu tekst imię) i naciśnij Enter. Powinieneś uzyskać efekt podobny do tego z rysunku 11.6.

3. Powtórz wcześniejsze operacje, aby w formularzu dodać kolejne pola tekstowe – umożliwiające wpisanie nazwiska i adresu e-mail. Obok każdego z pól umieść tekst, który dokładnie wyjaśni użytkownikowi co ma wpisać w danym polu. Aby dołączyć taką instrukcję, umieść punkt wstawiania poza polem i wpisz tekst opisu. Zwróć uwagę, w jaki sposób tekst jest wstawiany w kodzie (patrz rysunek 11.7).

Hasłowe pola tekstowe

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.

Aby umieścić w formularzu pole hasła, utwórz jednowierszowe pole tekstowe, zaznacz je i kliknij w inspektorze Property pole opcji Password. Oto poszczególne kroki całej procedury:

1. Dodaj pole hasła w formularzu. Zacznij od umieszczenia punktu wstawiania za ostatnim z pól tekstowych, a następnie kliknij ikonę Insert Text Field na palecie obiektów (w kategorii Forms).
2. W inspektorze Property wybierz w sekcji Type pole opcji Password. W polu tekstowym TextField podaj nazwę pola – na przykład Password.
3. Umieść obok nowego pola tekstowego opisowy tekst informujący o konieczności podania hasła.
4. W polu tekstowym Init Val podaj tekst password (lub hasło). Oddziel tę część formularza od reszty linią poziomą. Efekt końcowy prezentuje rysunek 11.8.

Wielowierszowe pola tekstowe

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

Domyślnie, tekst wpisany przez użytkownika w wielowierszowe pole tekstowe nie jest łamany. Dreamweaver udostępnia cztery opcje określające sposób zawijania tekstu. Wszystkie dostępne są na liście Wrap inspektora Property:

q       Default – atrybut WRAP nie jest wstawiany do znacznika <TEXTAREA>.

q       Off – wyłącza zawijanie tekstu.

q       Virtual – włącza zawijanie tekstu w polu tekstowym, jeśli dane wejściowe przekraczają rozmiar pola. Jednak w procesie przetwarzania danych na serwerze zawijanie nie jest uwzględniane.

q       Physical – włącza zawijanie tekstu w polu tekstowym, powoduje także uwzględnienie zawijania przy przetwarzaniu danych na serwerze. Zawijanie realizowane jest poprzez zastosowanie twardych łamań wiersza.

Wartości Virtual i ...