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:
Znacznik <FORM> i jego atrybuty
Znacznik <INPUT> i jego atrybuty
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>:
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.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:
_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.
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
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).
Rys. 11.1. Z menu palety obiektów wybierz kategorię Form i kliknij ikonę Insert Form |
|
Rys. 11.2. Postać inspektora Property dla znacznika <FORM> |
|
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
Rys. 11.3. Znacznik <FORM> został zaznaczony |
|
Rys. 11.4. Quick Tag Editor w akcji |
|
Kliknij w polu tekstowym Form Name inspektora Property i nadaj formularzowi nazwę. Wpisz custInfo i naciśnij Enter.
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.
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).
Rys. 11.5. Znacznik <INPUT> został zagnieżdżony w elemencie FORM |
|
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.
Rys. 11.6. Formularz z jednym polem wprowadzania danych |
|
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).
Rys. 11.7. Umieszczanie tekstu w formularzu |
|
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:
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).
W inspektorze Property wybierz w sekcji Type pole opcji Password. W polu tekstowym TextField podaj nazwę pola - na przykład Password.
Umieść obok nowego pola tekstowego opisowy tekst informujący o konieczności podania hasła.
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.
Rys. 11.8. Formularz z polem hasła |
|
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:
Default - atrybut WRAP nie jest wstawiany do znacznika <TEXTAREA>.
Off - wyłącza zawijanie tekstu.
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.
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.
Rys. 11.9. Wielowierszowe pole tekstowe |
|
Wartości Virtual i Physical atrybutu WRAP nie są obsługiwane przez wszystkie przeglądarki. Jeśli zależy Ci na kompatybilności dokumentu, a chcesz korzystać z zawijania tekstu, przypisz atrybutowi WRAP wartość HARD. Wymusza to zawijanie tekstu tak na ekranie użytkownika, jak i przy przetwarzaniu danych na serwerze. Zarówno Netscape Navigator (od wersji 2) jak i Internet Explorer (od wersji 4) rozpoznają takie ustawienie. Odpowiednich zmian atrybutu WRAP możesz dokonać korzystając z edytora Quick Tag Editor.
Spróbuj wstawić wielowierszowe pole tekstowe zaraz za linią poziomą. Nazwij je Comments (lub Uwagi) i korzystając z edytora Quick Tag Editor przypisz atrybutowi WRAP wartość HARD. Dołącz jakiś opisowy tekst. Rysunek 11.9 prezentuje formularz, do którego dodano wielowierszowe pole tekstowe.
Pola wyboru
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. Rysunek 11.10 prezentuje pola wyboru w formularzu.
Rys. 11.10. Pola wyboru |
|
Wstawmy więc w naszym formularzu parę pól wyboru. Aby zdefiniować pole wyboru, umieść punkt wstawiania w obszarze formularza i kliknij w kategorii Forms palety obiektów ikonę Insert Check Box. W inspektorze Property wpisz nazwę pola wyboru oraz podaj jego wartość. Nazwę wpisz w polu tekstowym CheckBox, a wartość w polu Checked Value. Przy przesyłaniu formularza nazwa i wartość są zwracane jako para nazwa=wartość.
Przyciski opcji
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. Rysunek 11.11 prezentuje formularz zawierający przyciski opcji.
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>
W tym fragmencie kodu zdefiniowano dwie grupy przycisków. Pierwsza grupa to rbset_one, a druga rbset_two. W każdym z zestawów możliwe jest zaznaczenie tylko jednego przycisku. Dlatego jeśli w pierwszym zestawie zaznaczona zostanie opcja option2, a z drugiego opcja option3, do serwera przesłana zostanie taka informacja:
rbset_one=option2
rbset_two=option3
Wstawmy więc w Twoim formularzu parę przycisków opcji. Pierwszy zestaw opcji będzie umożliwiał wskazanie przepustowości łącza, a drugi pozwoli wybrać stosowany system operacyjny.
Zacznij od kliknięcia ikony Insert Radio Button na palecie obiektów. Powtórz tę operację trzykrotnie. W dokumencie powinny pojawić się cztery przyciski opcji ułożone poziomo. Umieść punkt wstawiania między pierwszym i drugim przyciskiem, a następnie wpisz tekst 56k. Spójrz na rysunek 11.11 i dodaj pozostały tekst.
Zaznacz kolejno przyciski opcji i zdefiniuj ich nazwy wpisując je w polu RadioButton inspektora Property.
Rys. 11.11. Pierwszy zestaw przycisków opcji |
|
Wpisz tekst w polu Checked Value. Umieść tu tekst, który będzie zwracany w przypadku wybrania tej opcji. W tym ćwiczeniu będą to następujące wartości: Dial-up, Cable, DSL i Other.
Możesz jedną z opcji domyślnie zaznaczyć. W tym celu wybierz w sekcji Initial State inspektora Property opcję Checked (lub opcję Unchecked, jeśli opcja nie będzie zaznaczona).
Rozpocznij nowy wiersz i wstaw trzy nowe przyciski opcji. W polu Checked Value przypisz im kolejno nazwy systemów operacyjnych. Wartościami sprawdzanymi przez skrypt będą: Windows, Mac i Other.
Umieść obok przycisków etykiety, tak jak pokazano na rysunku 11.12.
Rys. 11.12. Przyciski opcji już w dokumencie |
|
Menu rozwijane
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. Rysunek 11.13 pokazuje przykład takiego menu.
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.
Ćwiczenie 11.2. Wstawianie do formularza menu rozwijanego
Wstawmy w Twoim formularzu menu rozwijane:
Aby wstawić menu rozwijane, umieść punkt wstawiania w tym miejscu formularza, w którym chcesz umieścić menu. W naszym formularzu wstawimy je na samym końcu.
Kliknij na palecie obiektów ikonę Insert List/Menu. Spowoduje to wstawienie do kodu źródłowego pary znaczników <SELECT></SELECT>.
Korzystając z inspektora Property zdefiniuj nazwę elementu SELECT oraz jego typ, wybierając w sekcji Type opcję Menu. Nazwij swoje menu rozwijane browserSelect. Aby wpisać etykietę oraz zdefiniować atrybut VALUE, kliknij w inspektorze Property przycisk List Values. Etykietą jest tekst, który widzi użytkownik, natomiast wartość atrybutu VALUE to rzeczywista informacja, którą formularz wiąże z daną etykietą. Wyświetlone zostanie okno, w którym możesz dodać etykiety i wartości. Aby wprowadzić te informacje, wpisz etykietę pierwszego znacznika <OPTION>, naciśnij klawisz Tab i wpisz odpowiadającą tej opcji wartość atrybutu VALUE. Aby dodać kolejną definicję, naciśnij ponownie klawisz Tab, wpisz etykietę drugiej opcji, naciśnij Tab i podaj wartość opcji. Powtórz te kroki dla wszystkich pozostałych opcji. W naszym przykładzie pierwszą etykietą będzie tekst Internet Explorer, a odpowiada jej wartość iE. Kolejna para to Netscape Navigator i wartość nN. Ostatnią z par będzie etykieta Other i wartość other). Po zdefiniowaniu wszystkich pozycji menu rozwijanego, naciśnij OK.
Po skonfigurowaniu pozycji menu, możesz wskazać domyślnie wybraną pozycję. Zaznacz ją na liście Initially Selected inspektora Property. Niech to będzie w naszym przypadku pozycja Intrnet Explorer. Ostatnim elementem procedury definiowania menu jest dodanie opisowego tekstu, który pojawi się obok menu rozwijanego i będzie informować o funkcjach menu. Na rysunku 11.13 przedstawione jest ukończone menu rozwijane.
Rys. 11.13. Do formularza wstawiono menu rozwijane |
|
Listy przewijane
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. Rysunek 11.14 wizualizuje różnice między menu rozwijanym a listą przewijaną.
Ćwiczenie 11.3. Tworzenie listy przewijanej
Procedura wstawiania listy przewijanej jest podobna do wcześniejszej procedury wstawiania menu rozwijanego.
Kliknij ikonę Insert List/Menu na palecie obiektów. W inspektorze Property wybierz w sekcji Type opcję List.
Naciśnij przycisk List Values i wpisz w oknie dialogowym List Values pary etykieta-wartość (podobnie jak przy tworzeniu menu rozwijanego). Naciśnij OK, aby powrócić do inspektora Property.
W polu Height podaj wysokość pola listy (jednostką jest liczba wierszy) i zdecyduj, czy dopuszczasz możliwość zaznaczenia kilku opcji (jeśli tak, zaznacz pole Selections: Allow Multiple).
Rys. 11.14. Menu rozwijane i lista przewijana |
|
Umieść listę przewijaną obok menu rozwijanego i nadaj jej nazwę verNum. Wpisz następujące etykiety i wartości:
2.0 i 2
3.0 i 3
4.0 i 4
4.6 i 4.6
5.0 i 5
5.5 i 5.5
Pole danych typu Hidden
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.
Pole danych typu File
Pole danych typu FILE (File Field) umożliwia dołączanie do formularza pliku. W zasadzie tego typu metoda przesyłania danych wyszła już z użycia, do czego przyczynił się rozwój innych technik, głównie związanych z aplikacjami e-mail.
Wysyłanie i czyszczenie formularza
Przygotowany formularz trzeba jeszcze uczynić użytecznym. Konieczne jest więc zdefiniowanie przycisków, które umożliwią jego wysyłanie i czyszczenie. Są to przyciski Submit i Reset. Pierwszy służy do wysyłania danych pod adres określony w atrybucie ACTION znacznika <FORM>. Z kolei przycisk Reset czyści po prostu pola formularza.
Aby do formularza wstawić przycisk:
Wskaż miejsce wstawienia przycisku umieszczając w nim punkt wstawiania i kliknij ikonę Insert Button na palecie obiektów.
Wybierz w sekcji Action inspektora Property funkcję przycisku: Submit Form (przesyłanie formularza) lub Reset Form (czyszczenie formularza). Podaj nazwę przycisku, a w polu Label wpisz jego etykietę (jest to napis, który będzie wyświetlany na przycisku).
Aby zdefiniować do końca swój formularz, umieść na nim oba przyciski: Submit i Reset. Rysunek 11.15 prezentuje formularz z przyciskami.
Rys. 11.15. Przyciski Submit i Reset |
|
W rozdziale 19. znajdziesz informacje o zaawansowanych zastosowaniach formularzy, w tym na temat weryfikacji danych typu klient-serwer, menu odnośników i inne.
Podsumowanie
W tym rozdziale omówiliśmy formularze - znacznik <FORM> oraz jego atrybuty, a także sposoby definiowania formularzy w programie Dreamweaver.
2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)
2 G:\DREAM_trans\rozdz11.doc