Rozdział 17.
Projektowanie formularzy
W tym miejscu wiesz już niemal wszystko, co jest konieczne do tworzenia
funkcjonalnych, atrakcyjnych i w pewnym stopniu interaktywnych stron WWW. Jeśli
się jednak nad tym głębiej zastanowisz, to okaże się, że przepływ informacji
w tworzonych stronach jest jednokierunkowy. Dokumenty HTML, obrazy, dz
więki oraz
obraz wideo, przekazywał tylko w jedną stronę  do osób przeglądających Twoje strony
WWW przy użyciu przeglądarek.
Ten rozdział dotyczy tworzenia formularzy HTML służących do pobierania informacji
od osób odwiedzających witryny WWW. Formularze umożliwiają zbieranie niemal
wszystkich rodzajów informacji i przekazywanie ich na serwer w celu
natychmiastowego przetworzenia przez skrypt CGI lub póz
niejszej analizy
przeprowadzanej przy użyciu innych aplikacji. Jeśli spędzasz wiele czasu na
przeglądaniu zasobów WWW, to bez wątpienia napotkałeś wiele różnych formularzy.
Istnieje ich bardzo wiele: proste formularze służące do przeszukiwania, formularze
umożliwiające zalogowanie się na witrynie, kupowanie produktów za pośrednictwem
Internetu itd. Wszystkie mają jedną cechę wspólną  akceptują informacje podawane
przez osobę oglądającą stronę WWW.
Jeśli zwracasz uwagę na zagadnienia zgodności, to możesz być spokojny. Formularze
były obecne niemal od samego początku istnienia języka HTML i są dobrze
obsługiwane przez wszystkie najpopularniejszej przeglądarki. W tym rozdziale nie
zapomnę wskazać wszelkich, dotyczących problemów, zgodności przeglądarek.
Niech formularze Cię nie przerażają! Choć wiele z nich może wyglądać na
skomplikowane, to w rzeczywistości stworzenie odpowiedniego kodu jest bardzo
proste. Najtrudniejszym zadaniem jest określenie wyglądu formularzy. W tym rozdziale
zostaną przedstawione następujące zagadnienia, które pozwolą Ci na tworzenie
wszelkich możliwych formularzy HTML, w tym:
w jaki sposób formularze HTML współpracują ze skryptami na serwerze w celu
zapewnienia interaktywności,
tworzenie prostego formularza, aby poznać zasady ich konstrukcji,
przedstawienie wszelkich dostępnych form elementów kontrolnych formularzy,
których można używać w celu tworzenia przycisków opcji, pól wyboru, itp.,
zastosowanie bardziej zaawansowanych elementów kontrolnych formularzy, które
478 Część 6. Mapy odsyłaczy i formularze
zadziwią Twych przyjaciół i współpracowników,
planowanie formularzy w celu dopasowania przesyłanych danych ze skryptem
obsługującym je na serwerze.
Forma i funkcja formularzy
Przede wszystkim powinieneś zrozumieć kilka spraw dotyczących formularzy. Na
początek, formularz jest częścią strony WWW tworzonej przy wykorzystaniu
elementów HTML. Każdy formularz składa się z elementu FORM zawierającego
specjalne elementy kontrolne, takie jak przyciski, pola tekstowe, pola wyboru, przycisk
Submit oraz listy. Te elementy kontrolne stanowią interfejs użytkownika formularza
(czyli te elementy formularza, które użytkownik może zobaczyć na stronie WWW).
Użytkownicy, wypełniając formularz, prowadzą interakcję z tworzącymi go elementami
kontrolnymi. Dodatkowo można także korzystać z wielu innych elementów formularzy,
stosując je do tworzenia opisów, wyświetlania dodatkowych informacji, określania
struktury, itp. Te elementy nie są częścią samego formularza, jednak mogą poprawić
jego wygląd i przydatność.
Formularz HTML pozwala na pobranie informacji od osoby odwiedzającej witrynę.
Zgromadzone informacje można przesłać do skryptu umieszczonego na serwerze, w celu ich
przetworzenia lub zapisania.
Gdy użytkownik wypełnia formularz HTML, wpisuje informacje lub wybiera opcje,
posługując się elementami kontrolnymi formularza. Ostatnim krokiem jest przesłanie
formularza. Podczas przesyłania formularza wykonywanych jest kilka czynności. W
pierwszej kolejności przeglądarka określa elementy kontrolne formularza zawierające
jakieś informacje i tworzy zbiór danych, który będzie te informacje zawierał. Następnie
dane z formularza są kodowane i przesyłane na serwer w celu przetworzenia.
Niezwykle ważne jest zrozumienie implikacji tego ostatniego kroku, gdyż to właśnie
dane są najważniejsze. W końcu, były one głównym powodem utworzenia formularza.
Gdy użytkownik kliknie przycisk Submit, cały proces przestaje być wyłącznie procesem
HTML i zostaje uzależniony do skryptów (nazywanych skryptami CGI  Common
Gateway Interface) przechowywanych i wykonywanych na serwerze WWW. Innymi
słowy, aby formularz był użyteczny będziesz musiał zawczasu posiadać na serwerze
odpowiedni skrypt, który pobierze i zapisze dane lub przetworzy je w inny sposób.
Istnieje jednak kilka ważnych wyjątków od tej reguły. Formularz może skierować
użytkownika na inną stronę, w zależności od wprowadzonych informacji lub przesłać
pod wskazany adres wiadomość poczty elektronicznej zawierającej dane wpisane w
formularzu. Ten drugi wyjątek jest bardzo przydatny i stanowi prosty sposób testowania
formularzy. Zamiast stosowania skryptów możesz poinstruować formularz, aby przesłał
dane pocztą elektroniczną pod Twój adres. Ostatnim wyjątkiem jest wykorzystanie
formularzy w Dynamicznym HTML-u, gdzie czasami służą do przechwytywania
zdarzeń generowanych przez użytkowników, takich jak kliknięcie myszką. Formularze
w dynamicznych stronach HTML mogą być wykorzystywane do gromadzenia
informacji, jednak służą także do tworzenia przycisków, których kliknięcie powoduje
wykonanie pewnych czynności.
Rozdział 17. Projektowanie formularzy 479
Ćwiczenie 17.1: Tworzenie prostego formularza
pobierającego nazwę użytkownika i hasło
W porządku, zabierzmy się do pracy i stwórzmy prosty formularz ilustrujący pojęcia
przedstawione w poprzedniej części rozdziału.
Stworzyłam w tym celu stronę WWW, na której najpierw należy podać imię oraz hasło
umożliwiające przejście do dalszej części witryny. Stronę tę przedstawiłam na rysunku 17.1.
Pracę rozpocznij od uruchomienia swego ulubionego edytora HTML (w moim przy-
padku jest to Notatnik) i stworzenia szkieletu strony. Rozpocznij od podania standar-
dowych informacji nagłówka strony, następnie dodaj do niej znacznik i, w koń-
cu, zamykające znaczniki i . W ten sposób powstanie szablon strony,
którą będziesz tworzył w dalszej części ćwiczenia. Jeśli dysponujesz takim gotowym
szablonem, to otwórz go w swoim ulubionym edytorze HTML.
Staram się używać pośredniej (Transitional) wersji języka HTML, zwróć zatem uwagę na
postać deklaracji . Dzięki temu będę mogła korzystać z przestarzałych
znaczników HTML bez obawy przed błędami weryfikacji poprawności kodu.
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">







Następnie dodaj tytuł strony, aby osoby odwiedzające ją wiedziały, jakie jest jej prze-
znaczenie:

Wewnątrz elementu BODY umieść element FORM. Ja od razu zapisałam zarówno znacz-
nik otwierający, jak i zamykający, umieszczając pomiędzy nimi pusty wiersz; dzięki
temu, póz
niej, nie zapomnę zamknąć elementu FORM.

method="post">

Zanim przejdziesz do dalszej pracy powinieneś dowiedzieć się czegoś więcej na temat
elementu FORM oraz atrybutów otwierających znacznik

. Oczywiście,
otwiera element i oznacza, że chcesz stworzyć formularz HTML. Wymagany atrybut
ACTION określa URL (włącznie z nazwą pliku) skryptu przechowywanego na serwerze,
który będzie używany do przetwarzania danych przesyłanych z formularza. Jest nie-
zwykle ważne, aby skrypt o podanej nazwie faktycznie był dostępny na serwerze, w
miejscu określonym przez podany URL.
480 Część 6. Mapy odsyłaczy i formularze
Zanim udostępnisz formularz, powinieneś skontaktować się ze swym dostawcą usługi,
internetowych i zapytać czy możesz korzystać z udostępnianych skryptów lub czy wolno Ci
stosować własne skrypty. Będziesz także musiał określić URL wskazujący na katalog, w
którym skrypty są przechowywane na serwerze. Niektórzy dostawcy usług internetowych
bardzo rygorystycznie sprawdzają skrypty ze względów bezpieczeństwa i nie pozwalają
użytkownikom na tworzenie i umieszczanie na serwerze nowych. Jeśli tak jest w Twoim
przypadku, a na swojej witrynie musisz wykorzystać formularz, to powinieneś zastanowić się
nad poszukiwaniem nowego dostawcy.
Kolejnym atrybutem znacznika jest METHOD. Atrybut ten może przyjmować
dwie wartości: post oraz get, które określają sposób w jaki dane z formularza są prze-
kazywane na serwer. Metoda post powoduje przesłanie danych z formularza na serwer
w nagłówkach żądania HTTP. Natomiast metoda get powoduje dodanie danych do
URL-a podanego w atrybucie ACTION i w większości przypadków jest wykorzystywana
przy przeszukiwaniu zasobów WWW.
Teraz dodasz do formularza kilka elementów kontrolnych i informacji, które ułatwią
użytkownikom wypełnianie formularza. Rozpocznij od dodania wewnątrz elementu
FORM opisu informacji, jakie mają być wprowadzone przez użytkownika, a następnie
dodaj pole tekstowe. Przedstawiony poniżej kod wymaga podania imienia użytkownika
w wyświetlonym polu tekstowym. Na razie nie przejmuj się rozmieszczeniem elemen-
tów, w dalszej części ćwiczenia umieścisz je w tabeli.
method="post">
Podaj swoje imię:

Następnie dodaj kolejny pomocny fragment tekstu i pole służące do podawania hasła:

method="post">
Podaj swoje imię:
Podaj swoje hasło:

Zauważ, iż oba te elementy kontrolne są częścią elementu INPUT. Atrybut TYPE okre-
śla, jaki typ elementu kontrolnego zostanie utworzony. W tym przypadku utworzone
zostanie pole tekstowe oraz pole hasła. Każdy typ elementu kontrolnego (pole tekstowe,
przyciski, pola wyboru) wygląda inaczej na stronie, wykorzystuje inny sposób podawa-
nia informacji (na przykład, wpisanie tekstu lub kliknięcie myszką) oraz jest przesyłany
w innym celu. Każdy z nich zostaje opatrzony nazwą, która odróżnia ten element oraz
jego zawartość od pozostałych elementów kontrolnych formularza. Nazwy określane
przy użyciu atrybutu NAME mogą być dowolne, o ile tylko będą unikalne. (Zazwyczaj
nazwy wszystkich elementów formularzy muszą być unikalne, choć istnieją pewne
wyjątki od tej reguły, które opiszę w dalszej części rozdziału.)
Na koniec, dodaj do formularza przycisk Submit, umożliwiający przesłanie informacje
podanych w formularzu. Dodaj także przycisk Reset czyszczący pola formularza,
z którego użytkownik może skorzystać, gdy popełni błąd lub będzie chciał rozpocząć
wprowadzanie danych od początku.
Rozdział 17. Projektowanie formularzy 481

method="post">
Podaj swoje imię:
Podaj swoje hasło:

Przyciski Reset i Submit są kolejnymi typami elementu INPUT. Zwróć uwagę, iż w każ-
dym z nich podałam atrybut VALUE. W tym przypadku, modyfikuje on tekst wyświetla-
ny na przycisku w przeglądarce. Można także w ogóle nie podawać wartości tego atry-
butu, w takim przypadku przeglądarka wyświetli domyślny tekst zależny od typu
przycisku.
Określając nazwy elementów formularzy oraz tekst wyświetlany na przyciskach, powinieneś
wybierać nazwy przejrzyste i jednoznaczne. Jeśli zrozumienie formularza będzie trudne i
frustrujące, to najprawdopodobniej osoby, od których chcesz uzyskać informacje opuszczą
Twoją witrynę.
Stworzyłeś już formularz i jesteś gotów, by odetchnąć, jeśli jednak wyświetlisz utwo-
rzoną stronę w przeglądarce, przekonasz się, iż nie wygląda zbyt atrakcyjnie. Nadszedł
czas, aby wzbogacić stronę o kilka elementów graficznych, poprawić jej wygląd i umie-
ścić elementy formularza w ładnie sformatowanej tabeli.
Stworzyłam trzy obrazy, które będą wyświetlane na stronie i rozmieściłam je w odpo-
wiedni sposób, wykorzystując tabelę:






Teraz wykreuj kolejną tabelę składającą się z czterech wierszy i dwóch kolumn. W tej
tabeli umieścisz formularz, aby odpowiednio rozłożyć jego elementy.


















482 Część 6. Mapy odsyłaczy i formularze
Teraz dodaj do tabeli elementy formularza  w tym celu umieść znacznik

tuż
za otwierającym znacznikiem . Umieść poszczególne elementy, w odpowied-
nich wierszach tabeli, jak pokazałam na poniższym przykładzie i upewnij się, czy nie
zapomniałeś zapisać zamykającego znacznika .
Zauważ, że trzeci wiersz tabeli został pusty. To dlatego, że oszukuję! Gdy zakończyłam
tworzenie kodu do tego przykładu, doszłam do wniosku, że warto dodać nieco wolnego
miejsca między polem hasła i przyciskami. Po kilku próbach wyrównałam także tekst
umieszczony w tabeli do prawej i zadecydowałam, że każda z kolumn ma mieć szero-
kość 50% całej tabeli. Dodatkowo wyśrodkowałam przyciski w obu kolumnach.

method="post">

Podaj swoje imię:
Podaj swoje hasło:

Teraz wydaje się, że formularz ma szansę wyglądać sensownie, a zatem warto złożyć
poszczególne elementy kodu strony w jedną całość. I jeszcze kilka ostatnich uwag. Ca-
łość tabeli umieściłam w elemencie DIV i przypisałam jego atrybutowi ALIGN wartość
center, aby cała strona została wyśrodkowana. Zwróć uwagę, w jakich miejscach
strony zostały umieszczone otwierające i zamykające znaczniki

. Aby dodać nie-
co wolnej przestrzeni pomiędzy grafiką a formularze, dodałam nowy wiersz, posługując
się znacznikiem
.
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

/>

Rozdział 17. Projektowanie formularzy 483



method="post">

Podaj swoje imię:
Podaj swoje hasło:

Wymagało to pewnego wysiłku, ale myślę że efekt końcowy przedstawiony na rysun-
ku 17.1 jest całkiem dobry.
Rysunek 17.1.
Prosty formularz HTML
zawierający cztery
elementy zapewnia
dostęp do witryny
Wabbit Hole.
Pole
tekstowe
Pole hasła
Przycisk Submit Przycisk Reset
Aby zakończyć to ćwiczenie. przetestowałam formularz, sprawdzając czy przekazywa-
ne dane są zgodne z oczekiwaniami. Poniżej przedstawiłam postać zbioru danych:
imie=Esmeralda&haslo=nudynapudy
484 Część 6. Mapy odsyłaczy i formularze
Jak widać, jego postać jest dosyć skomplikowana, jednak można się zorientować, że
z każdą nazwą elementu jest skojarzona dana wprowadzona w tym elemencie. Wyko-
rzystując odpowiedni skrypt, przetworzenie danych, manipulowanie nimi i osiągnięcie
z mierzonego rezultatu będzie całkiem proste.
Podstawowe elementy formularzy
Po wykonaniu pierwszego ćwiczenia powinieneś już znać kilka podstawowych technik,
takich jak sposób wykorzystania znacznika

, umieszczania w nim prostych ele-
mentów oraz zastosowanie przycisków Submit i Reset. W tej części rozdziału wspo-
mniane wcześniej zagadnienia zostaną rozszerzone i wyczerpująco opisane. Całość
omawianych tematów zostanie podzielona na dwa główne obszary, pierwszym z nich
będzie znacznik , a drugim  elementy kontrolne tworzone przy wykorzystaniu
znacznika . Po przedstawieniu tych zagadnień, wykonasz bardziej skompliko-
wane ćwiczenie.
Zastosowanie znacznika do tworzenia formularzy
Element FORM stanowi podstawę wszystkich formularzy tworzonych na stronach
WWW, z tego względu bardzo ważne jest, aby dobrze zrozumieć, jak należy go stoso-
wać.
FORM jest elementem blokowym. Aby zrozumieć to pojęcie będziesz, musiał poznać in-
ny, podstawowy model zawartości HTML  elementy wewnątrzwierszowe. Elementy
tego typu, na przykład, oraz stosowane są do modyfikowania postaci tekstu lub
poszczególnych liter. Ze względu na swój charakter, znaczniki te zawierają tekst, które-
go postać modyfikują, na przykład: Kocham tę grę, i mogą zawierać inne,
zagnieżdżone elementy wewnątrzwierszowe. Kocham tę grę to
przykład całkowicie poprawnego kodu HTML.
Elementy blokowe są natomiast większymi strukturami organizacyjnymi (przykładem
takich elementów są formularze i tabele). Można w nich umieszczać dowolną zawartość
stron WWW, elementy wewnątrzwierszowe oraz inne elementy blokowe. Jeśli wyświe-
tlisz w przeglądarce przedstawiony poniżej fragment kodu HTML, to obecność zagnież-
dżonego elementu wewnątrzwierszowego nie spowoduje wyświetlenia go w nowym
wierszu.
Zagnieżdżanie elementów wewnątrzwierszowych nie powoduje
stworzenia nowej linii.
Jednak elementy blokowe, takie jak FORM, powodują wyświetlenie w przeglądarce no-
wego wiersza. W efekcie, jeśli zwracasz uwagę na układ strony, będziesz musiał pamię-
tać, że umieszczenie w jej kodzie otwierającego znacznika elementu FORM spowoduje
wyświetlenie nowego wiersza. Przeanalizuj poniższy fragment kodu:
Nesting inline
Rozdział 17. Projektowanie formularzy 485
Elementy wewnątrzwierszowe, takie jak & , mogą zawierać tekst oraz inne elementy
wewnątrzwierszowe. Elementy blokowe, takie jak

&

, mogą natomiast zawierać
dowolną treść stron WWW, elementy wewnątrzwierszowe oraz elementy blokowe.
Większość elementów blokowych jest wyświetlana w nowym wierszu. W odróżnieniu od
nich elementy wewnątrzwierszowe nie powodują powstania nowego wiersza.

Smakosze pragnący zapoznać się z naszymi
przepisami, będą musieli podać swoje imię i hasło.

Umieszczenie znacznika w przedstawionym miejscu spowoduje dodanie no-
wego wiersza tuż za słowem Smakosze, co w efekcie powoduje pojawienie się niepożą-
danego efektu wizualnego, widocznego na rysunku 17.2.
Rysunek 17.2.
Umieszczenie znacznika
wewnątrz
Znacznik
elementu

wewnątrzwierszowego,
powoduje
takiego jak akapit,
złamanie
powoduje wstawienie
wiersza
nowego wiersza
A zatem podsumowując, element FORM może zawierać dowolną treść, elementy we-
wnątrzwierszowe oraz blokowe. Jest jednak jeden wyjątek od tej zasady  formularzy
nie można zagnieżdżać. A zatem  formularze pojedynczo, proszę!
Składnia używana do tworzenia elementów FORM jest prosta. W większości przypadków
będą używane tylko dwa atrybuty znacznika  ACTION oraz METHOD. Tylko
atrybut ACTION jest konieczny. Przykładową postać elementu FORM przedstawiłam po-
niżej:

treść, elementy kontrolne, inne elementy HTML

Atrybut ACTION określa czynność, jaka ma zostać wykonana po przesłaniu formularza
i zazwyczaj zawiera URL do skryptu CGI przechowywanego na serwerze WWW. Pa-
miętaj jednak, że aby formularz został pomyślnie przesłany, skrypt musi się znajdować
dokładnie w tym miejscu, które podałeś, i działać poprawnie. Choć w większości przy-
padków formularze przesyłają swoje dane do skryptów, to jednak w atrybucie ACTION
możesz podać adres innej strony WWW lub adres poczty elektronicznej. Ta ostatnia
możliwość wymaga użycia składni o następującej postaci:

486 Część 6. Mapy odsyłaczy i formularze
Podanie takiego adresu URL spowoduje dołączenie zbioru danych formularza do listu
poczty elektronicznej, który zostanie wysłany pod adres podany w atrybucie ACTION.
Polecam przesyłanie danych z formularza pod własny adres e-mail, jako formę testowania
formularzy. W ten sposób, przed podłączeniem formularza do skryptu można go sprawdzić i
upewnić się, że przesyła poprawne dane.
Atrybut METHOD może przyjmować jedynie dwie wartości: get lub post. Określają
one, w jaki sposób dane wprowadzone w formularzu zostaną przesłane pod adres poda-
ny w atrybucie ACTION. Formularze wykorzystujące metodę GET dopisują dane do
URL-a podanego w atrybucie ACTION, poprzedzając je znakiem zapytania, a następnie
przesyłają wszystko pod zmodyfikowany adres URL. Metodę tę zazwyczaj wykorzystu-
ją witryny udostępniające narzędzia przeszukiwania zasobów WWW. Gdyby formularz
zawierał pole tekstowe o nazwie poszukiwane i gdyby zostało w nim wpisane słowo
Orangutan, to wynikowy URL mógłby mieć następującą postać:
http://www.jakisurl.com.pl/cgi-bin/szukaj?poszukiwane=Orangutan
Atrybut METHOD nie jest wymagany, a w przypadku, gdy nie zostanie podany, formularz
zastosuje domyślną metodę  GET.
Drugą wartością, jaką można przypisać atrybutowi METHOD, jest post. W odróżnieniu
od GET, która powoduje dopisanie danych do adresu URL i przesłanie wynikowego ad-
resu na serwer, metoda POST po prostu przesyła informacje wpisane w formularz, pod
adres podany w atrybucie ACTION.
Są to wszystkie wiadomości dotyczące elementu FORM, ale dla Ciebie to dopiero począ-
tek. Czy zauważyłeś, że element ten jest w stanie jedynie określić, co należy zrobić
podczas przesyłania formularza? Aby zebrać informacje, będziesz potrzebował elemen-
tów kontrolnych formularzy.
Tworzenie elementów kontrolnych
przy wykorzystaniu elementu INPUT
Nadszedł czas, aby dowiedzieć się, jak należy tworzyć elementy formularzy służące do
gromadzenia danych. Element INPUT pozwala na tworzenie wielu różnych typów ele-
mentów kontrolnych.
Elementy kontrolne to specjalne elementy HTML stosowane w formularzach i służące do
gromadzenia informacji podawanych przez osoby oglądające stronę. Informacje te są
gromadzone w formie zbioru danych, a następnie, w momencie przesłania formularza 
wysyłane pod adres określony w atrybucie ACTION.
Element INPUT składa się wyłącznie ze znacznika otwierającego (), nie ma
żadnej zawartości ani znacznika zamykającego.

Rozdział 17. Projektowanie formularzy 487
W tym przypadku kluczowym zagadnieniem jest dobór odpowiednich atrybutów, które
spowodują utworzenie elementu kontrolnego odpowiedniego typu. Najważniejszym
z nich, jest TYPE, definiujący typ elementu kontrolnego. Dla wszystkich elementów
kon-trolnych, z wyjątkiem przycisków Submit i Reset, wymagane jest także podanie
atrybutu NAME. Określa on nazwę elementu kontrolnego, do której, podczas przesyłania
formularza, zostaną przypisane informacje wpisane w tym elemencie. W dalszej części
tego podrozdziału opiszę różne typy elementów kontrolnych, jakie można tworzyć przy
użyciu znacznika .
Tworzenie pól tekstowych
Pola tekstowe pozwalają na pobieranie od użytkownika niewielkich ilości informacji.
Pola te zawierają pojedynczy wiersz tekstu, w który użytkownicy mogą wpisywać in-
formacje, na przykład, swoje imię lub poszukiwane słowo. W odróżnieniu od innych
elementów kontrolnych, takich jak przyciski opcji (które mogą się znajdować wyłącznie
w dwóch stanach  włączonym lub wyłączonym) bądz
listy (których wartości są pre-
definiowane), pola tekstowe dają użytkownikom całkowitą dowolność, jeśli chodzi
o zawartość wpisywanego tekstu.
Pola tekstowe zawsze stanowią część elementu INPUT, umieszczanego wewnątrz ele-
mentu FORM. Ich tworzenie należy rozpocząć od wpisana znacznika ,
umieszczenia w nim atrybutu TYPE i przypisania mu wartości text. Nie zapomnij także
określić nazwy pola, aby skrypt był w stanie przetworzyć jego zawartość. Na rysunku
17.3 przedstawiłam przykład pola tekstowego wraz z towarzyszącym mu opisem
wyjaśniającym, co użytkownik ma w nim wpisać:

Podaj imię swojego zwierzaka:

Rysunek 17.3.
Oto przykład pola
tekstowego
Wygląd pola tekstowego można modyfikować przy użyciu atrybutu SIZE. Przypisanie
mu wartości liczbowej powoduje określenie długości pola tekstowego, wyrażonej jako
ilość znaków w nim widocznych. Oto przykład:

Aby ograniczyć ilość znaków, jakie użytkownik może wpisać w polu, należy dodać do
znacznika atrybut MAXLENGTH. Atrybut określa maksymalną ilość znaków, jaką będzie
można wpisać w polu. Jeśli użytkownik spróbuje wpisać więcej znaków niż dozwolono,
przeglądarka przestanie wstawiać je w danym polu.

488 Część 6. Mapy odsyłaczy i formularze
Aby wyświetlić tekst w polu, zanim jeszcze użytkownik wpisze w nim jakieś informa-
cje, należy wykorzystać atrybut VALUE. Działa on jak prośba kierowana do użytkowni-
ka lub przypomnienie informujące, jakie dane należy wpisać. Oto przykład wykorzysta-
nia tego atrybutu:
value="Podaj imię zwierzaka" />
W tym przypadku, bezpośrednio po wyświetleniu strony z formularzem w przeglądarce,
w polu tekstowym pojawi się napis Podaj imię zwierzaka. Tekst pozostanie w oryginal-
nej postaci aż do momentu, gdy użytkownik go zmodyfikuje.
Korzystając z atrybutu VALUE, pamiętaj, że przypisanie mu wartości przekraczającej
maksymalną dopuszczalną długość pola może wprowadzić użytkownika w błąd, gdyż tekst
wyświetlony w polu zostanie obcięty. Staraj się umieszczać w polu tylko tyle informacji, ile
jest koniecznych, by określić jego przeznaczenie. Upewnij się, że długość podanej wartości
pola nie przekracza maksymalnej dopuszczalnej ilości znaków określonej przy wykorzystaniu
atrybutu MAXLENGTH.
Aby nie można było modyfikować zawartości pola tekstowego, należy dodać do znacz-
nika atrybut READONLY, zgodnie z poniższym przykładem:

Dzięki temu użytkownicy nie będą mogli zmodyfikować wartości pola. Dla pola tek-
stowego warto również zdefiniować stałą wartość domyślną, przekazywaną w chwili
wysłania zawartości formularza.
Tworzenie pól haseł
Pole hasła jest bardzo podobne do pola tekstowego, bo umożliwia podawanie niewiel-
kich ilości informacji. Jednak jest to pole specjalne, gdyż jego zawartość jest wyświe-
tlana w postaci gwiazdek.
Nie musisz ograniczać możliwości zastosowania tego pola wyłącznie do podawania haseł.
Można go używać do podawania wszelkich ważnych informacji, które, według Ciebie,
podczas wpisywania w formularzu powinne zostać ukryte.
Aby utworzyć element kontrolny tego typu, wpisz znacznik i przypisz jego
atrybutowi TYPE wartość password. Aby ograniczyć wielkość pola oraz ilość znaków,
jakie będzie można w nim wpisać, możesz posłużyć się atrybutami SIZE oraz
MAXLENGTH, przedstawionymi w poniższym przykładzie:

Podaj swoje hasło: maxlength="8" />

Na rysunku 17.4 ukazane zostało pole hasła, wraz z opisem wyjaśniającym jego prze-
znaczenie. Zauważ, że w przypadku tego pola nie musisz stosować atrybutu VALUE,
gdyż jego zawartość zostanie zamaskowana podczas wyświetlania w przeglądarce.
Rozdział 17. Projektowanie formularzy 489
Rysunek 17.4.
Pola hasła ukrywają
treść wpisywanych
informacji
Wszelkie informacje przesyłane za pośrednictwem pola hasła nie są w żaden sposób
ukrywane ani szyfrowane; z tego względu, nie jest to bezpieczny sposób przesyłania ważnych
informacji. Choć użytkownicy nie są w stanie odczytać tekstu wpisanego w polu, to jednak
element kontrolny tego typu nie dysponuje żadnymi innymi, wbudowanymi mechanizmami
zabezpieczeń.
Tworzenie przycisków Submit
Przyciski Submit są wykorzystywane do przesyłania danych z formularzy na serwer
w celu ich przetworzenia przez skrypt lub inny program. Przypisanie atrybutowi TYPE
wartości submit powoduje stworzenie przycisku Submit o domyślnym tytule  Prze-
ślij kwerendę. Aby zmienić tekst wyświetlany na przycisku, należy posłużyć się atrybu-
tem VALUE, któremu można przypisać dowolny tekst, jak pokazałam w poniższym przy-
kładzie:

W jednym formularzu może być kilka przycisków Submit.
Tworzenie przycisków Reset
Przyciski Reset są używane do czyszczenia zawartości formularza i przywracania jego
polom ich początkowych wartości domyślnych. W większości przypadków, wartości
domyślne pól określane są podczas tworzenia elementu kontrolnego, przy użyciu atry-
butu VALUE. Podobnie jak w przypadku przycisków Submit, także i w tych, przy użyciu
atrybutu VALUE, można zmieniać wyświetlany na nich domyślny tekst. Oto przykład:

Tworzenie pól wyboru
Pola wyboru umożliwiają tworzenie elementów kontrolnych, które mogą być zaznaczo-
ne bądz
nie, symbolizując stany włączenia i wyłączenia (patrz rysunek 17.5). Aby stwo-
490 Część 6. Mapy odsyłaczy i formularze
rzyć pole wyboru, należy przypisać atrybutowi TYPE znacznika wartość
checkbox. Nie zapomnij podać nazwy pola (przy użyciu atrybutu NAME), tak aby skrypt
wiedział, z jakim elementem kontrolnym są skojarzone dane. Poniżej przedstawiłam
przykład wykorzystania pola wyboru:

Zaznacz, jeśli chcesz otrzymywać listy reklamowe:

Aby pole wyboru zostało początkowo zaznaczone, należy dodać do znacznika atrybut
CHECKED, jak pokazałam w poniższym przykładzie:

Pola wyboru można grupować i przypisywać wszystkim, w grupie tę samą nazwę.
Dzięki temu można wybierać wiele wartości i przypisywać je jednej właściwości.
Rysunek 17.5.
Pola wyboru to pola,
które użytkownik
może zaznaczać

Zaznacz wszystkie występujące objawy:

Nudności

Ból głowy
/>
Gorączka

Zawroty głowy />

Gdy taki formularz zostanie przesłany do skryptu w celu przetworzenia, każde zazna-
czone pole wyboru zwróci wartość skojarzoną z nazwą pola.
Tworzenie przycisków opcji
Przyciski opcji są niemal takie same, jak pola wyboru, jednak w przeglądarce są wy-
świetlane w inny sposób. W ich przypadku, zamiast prostokątnego pola, które można
zaznaczać, wyświetlany jest niewielki okrągły (lub czasami w kształcie rombu) przy-
cisk, w którym, po zaznaczeniu, pojawia się kropka (patrz rysunek 17.6). Przyciski
opcji tworzy się przy użyciu znacznika , przypisując jego atrybutowi TYPE
wartość radio. Obowiązkowy atrybut VALUE, przypisuje przyciskowi podaną wartość.
W momencie przesyłania formularza na serwer, wartość przycisku zostanie przesłana,
jeśli został on zaznaczony.

Czy się zgadzasz?

Rozdział 17. Projektowanie formularzy 491
Rysunek 17.6.
Przyciski opcji
są wygodne
przy odpowiedziach typu
tak lub nie albo przy
wybieraniu tylko jednej z
kilku opcji
Gdy co najmniej dwa przyciski opcji będą miały tę samą nazwę, stworzą zbiór wzajem-
nie wykluczających się wartości. Innymi słowy, w takiej grupie tylko jeden przycisk
opcji będzie mógł być zaznaczony. W przedstawionym poniżej fragmencie kodu atrybu-
ty NAME obu przycisków opcji mają wartość plec, co oznacza, że użytkownik może za-
znaczyć tylko jeden z nich. Jeśli użytkownik zaznaczy przycisk Mezczyzna, a następ-
nie uświadomi sobie, że popełnił błąd i zaznaczy przycisk Kobieta, to zaznaczenie
przycisku Mezczyzna zostanie automatycznie usunięte.


Tworzenie przycisków graficznych
Przypisanie atrybutowi TYPE znacznika wartości image spowoduje stworze-
nie przycisku, który będzie miał postać obrazu określonego przy użyciu atrybutu SRC.
Oto przykład:

Na rysunku 17.7 przedstawiony został przycisk w postaci obrazu.
Rysunek 17.7.
Przyciski graficzne
można tworzyć
wykorzystując atrybut
TYPE="image"
Przycisk graficzny
Oprócz przesyłania danych wprowadzonych w formularzu, kliknięcie takiego przycisku
powoduje także przekazywanie na serwer współrzędnych x i y, określających miejsce,
w którym użytkownik kliknął obraz. Dane te są wysyłane w formie nazwa.x =
współ-rzędnaX oraz nazwa.y = współrzędnaY. W przypadku przedstawionego
powyżej kodu, wyniki przesłane na serwer mogłyby mieć następującą postać:
wyslijformularz.x=30&wyslijformularz.y=21
492 Część 6. Mapy odsyłaczy i formularze
Można także nie podawać nazwy przycisku, w takim przypadku zwracane współrzędne
będą miały postać x = oraz y =.
Tworzenie zwyczajnych przycisków
Oprócz przycisków Submit, Reset oraz przycisków graficznych, można także tworzyć
zwyczajne przyciski, którym kliknięcie spowoduje wykonanie wskazanego skryptu
w przeglądarce. Rysunek 17.8 przedstawia przycisk, którego kliknięcie spowoduje wy-
konanie skryptu w przeglądarce. Taki przycisk można stworzyć przy użyciu poniższego
fragmentu kodu:
ONCLICK="sprawdzaj()" />
Rysunek 17.8.
Przycisk można
skojarzyć ze skryptem
wykonywanym
w przeglądarce
W tym przykładzie, został utworzony przycisk o nazwie sprawdz, którego kliknięcie
powoduje wykonanie skryptu. Tekst, jaki zostanie wyświetlony na przycisku, określa
się przy użyciu atrybutu VALUE, w tym przypadku jest to Sprawdz
dane.
Możliwości przycisków utworzonych w ten sposób są bardziej ograniczone od możli-
wości przycisków tworzonych za pomocą znacznika .
Pola ukryte
Pola ukryte są specjalnymi elementami kontrolnymi, które są niewidoczne, a użytkow-
nicy nie są w stanie modyfikować ich wartości. Gdy użytkownik wysyła formularz,
wartość pola ukrytego jest przesyłana wraz z pozostałą zawartością formularza.

Zauważyłam, że technika ta jest najczęściej wykorzystywana przy przeprowadzaniu ba-
dań, w których konieczny jest sposób identyfikacji danych. W tym przypadku utworzy-
łam ukryte pola formularza o nazwie numerpomiaru o wartości 13413. Gdy formularz
zostanie przesłany w celu przetworzenia danych, na podstawie tych informacji będę
mogła go zidentyfikować. Gdy jutro będę chciała przeprowadzić kolejne badania, wy-
starczy przypisać atrybutowi VALUE nową wartość.
Rozdział 17. Projektowanie formularzy 493
Przesyłanie plików na serwer przy użyciu elementu file
Element kontrolny file umożliwia przesyłanie plików wraz z informacjami podanymi
w formularzu. Ten element kontrolny został przedstawiony na rysunku 17.9.

Proszę wybrać plik do przesłania na serwer name="fileupload" />

Użytkownik może wpisać nazwę pliku (wraz ze ścieżką dostępu) lub wybrać opcję
umożliwiającą przejrzene zawartości dysku w poszukiwaniu pliku, który ma być prze-
słany. Jeśli użyjesz atrybutu VALUE, to teoretycznie będziesz w stanie podać nazwę pli-
ku, jak początkowo ma się pojawić w polu. Jednak nie wydaje się, aby możliwość ta by-
ła dostępna w przeglądarce Internet Explorer 5 ani w przeglądarce Netscape Navigator
4.5.

Rysunek 17.9.
Dzięki elementowi file,
przesyłanie plików
na serwer
jest bardzo proste
Wpisz ścieżkę Kliknij ten przycisk, aby poszukać pliku
oraz nazwę pliku na komputerze
Ćwiczenie 17.2: Tworzenie formularzy zawierających
elementy kontrolne różnych typów
Nadszedł czas na kolejne ćwiczenie. Wykorzystasz w nim wszystkie typy elementów
kontrolnych formularzy przedstawione w tej części rozdziału.
Na początek, otwórz szablon strony utworzony w ćwiczeniu 17.1 i utwórz trzy szablony
formularzy. Pierwszy z formularzy będzie zawierał ankietę, drugi zapewni dostęp do
obszaru dla zarejestrowanych użytkowników fikcyjnej Akademii Pantomimy, a trzeci
 umożliwi przeszukanie witryny. Oto kod zawierający szablony tych formularzy:
method="post">

method="post">

method="post">

494 Część 6. Mapy odsyłaczy i formularze
Zauważ, że każdy formularz będzie obsługiwany przez inny skrypt. W ankiecie będziesz
chciał zadać użytkownikowi kilka prostych pytań z kilkoma możliwymi odpowiedziami.
W pierwszym z nich wykorzystasz pola wyboru, z których wszystkie będą miały tę samą
nazwę. Umieść tekst wyjaśniający znaczenie pól przed znacznikiem , tak aby
w przeglądarce został on wyświetlony z lewej strony pola wyboru. Poniższy fragment
kodu pokaże Ci, jak należy to zrobić:

method="post">
Wypełnij ankietę
Lubię pantomimę gdyż (zaznacz odpowiednie pola):
Jest fajna
Spotykam interesujących ludzi name="dlaczegolubie" value="ludzie" />
Robię to co lubię value="zainteresowania" />
Płacą mi za to />
Drugie pytanie umieszczone w ankiecie także będzie miało kilka odpowiedzi, jednak
tym razem chcesz, aby użytkownik wybrał tylko jedną z nich. W tym celu użyjesz grupy
przycisków opcji o tych samych nazwach. Zamiast wyświetlać tekst podpisu przed
przyciskiem, umieścisz go za nim, tak aby w przeglądarce został wyświetlony z prawej
strony przycisku. Dzięki temu wszystkie przyciski opcji w grupie zostaną pokazane
w jednym wierszu.
Najtrudniejszą rzeczą w byciu mimem jest:
Robienie makijażu
Noszenie
specjalnego kostiumu
Konieczność
zachowania milczenia
Następnie dodaj do formularza element, który umożliwi użytkownikom przesyłanie pli-
ków. Dodaj także przyciski Submit oraz Reset. W końcu, dodaj do formularza pole ukryte
o wartości 200401, które umożliwi śledzenie ankiety. Dzięki zastosowaniu tego pola
ukrytego, będziesz mógł grupować przesyłane odpowiedzi na podstawie data, zmienia-
jąc wartość tego pola każdego dnia. Po dodaniu ukrytego pola, zakończ formularz od-
powiednim znacznikiem zamykającym.
Prześlij zdjęcie swojej gry!

Pozostałe dwa formularze będą znacznie prostsze. Stworzenie drugiego wymaga doda-
nia pola tekstowego oraz pola hasła i przycisku Submit. Ogranicz ilość znaków, jakie
można wprowadzić w obu polach odpowiednio do 20 i 10 znaków, a w przypadku pola
hasła ogranicz jego wielkość do 10 znaków, jak przedstawiłam w poniższym przykładzie:

method="post">
Wejście dla obszaru dla użytkowników!
Nazwa użytkownika:
Rozdział 17. Projektowanie formularzy 495
Hasło użytkownika: maxlength="10" />

Ostatni formularz składa się wyłącznie z pola tekstowego i przycisku graficznego.
Przycisk graficzny pełni w tym formularzu funkcję przycisku Submit. Na przycisku tym
jest wyświetlany obraz imitujący normalny przycisk.

method="post">
Przeszukaj naszą bazę danych

Formularze, umieszczone na nich elementy kontrolne oraz wszelkie inne informacje, są
już gotowe, jednak aby ładnie wyglądały, będziesz musiał je sformatować.
Odkryłam, że formatowanie formularzy po ich stworzeniu pozwala mi koncentrować się
niezależnie na każdym z jego aspektów, co daje znacznie lepsze wyniki.
Wygląd strony można podzielić na pięć elementów: trzy formularze, obraz tytułowy
umieszczony na samej górze strony oraz drugi obraz, który ma przyciągnąć zaintereso-
wanie użytkownika.
Rozmieszczanie elementów strony w odpowiedni sposób rozpocznij od wyśrodkowania
obrazu tytułowego. Nagłówek strony oraz kod obrazu tytułowego został przedstawiony
poniżej:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

Przejdz
my teraz dalej, do obrazów oraz formularzy. Zauważ, że dwa formularze są krót-
kie, a jeden długi. Wyobraz
sobie, że pozostała część strony została podzielona na dwie
kolumny; w pierwszej z nich zostaną umieszczone dwa małe formularze, obraz mający
zainteresować osoby oglądające stronę, a w drugiej ostatni, duży formularz. W jaki spo-
sób można to zrobić? Przy użyciu tabel!
Rozpocznij od stworzenia głównej tabeli składającej się z dwóch kolumn i trzech wier-
szy. W przedstawionym poniżej fragmencie kodu umieściłam komentarze, opisujące
znaczenie każdego wiersza i kolumny tabeli.




496 Część 6. Mapy odsyłaczy i formularze










Teraz dodaj zagnieżdżone tabele, wykorzystując w tym celu przedstawiony poniżej
fragment kodu:

Rozdział 17. Projektowanie formularzy 497

Teraz umieść wszystkie obrazy, formularze oraz ich elementy w odpowiednich miej-
scach tabeli i zakończ tworzenie strony.
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

Rozdział 17. Projektowanie formularzy 499

/>	method="post"> 498 Część 6. Mapy odsyłaczy i formularze Wypełnij ankietę Lubię pantomimę gdyż (zaznacz odpowiednie pola):   Jest fajna value="fajna" />   Spotykam interesujących ludzi name="dlaczegolubie" value="ludzie" />   Robię to co lubię name="dlaczegolubie" value="zainteresowania" />   Płacą mi za to value="kasa" /> Najtrudniejszą rzeczą w byciu mimem jest:   />Robienie makijażu   />Noszenie specjalnego kostiumu   />Konieczność zachowania milczenia Prześlij zdjęcie swojej gry! value="Wyślij" />
method="post"> Wejście dla obszaru dla użytkowników! Nazwa użytkownika: Hasło użytkownika: maxlength="10" /> value="Wyślij" />
method="post"> Przeszukaj naszą bazę danych src="przycisk.gif" name="przyciskszukaj" />

Gotowa strona, zawierająca różne elementy kontrolne, została przedstawiona na rysun-
ku 17.10.
pole hasła pole tekstowe pierwszy formularz pole
wyboru
Rysunek 17.10.
Na stronie
Akademii Pantomimy
zostały umieszczone trzy
formularze
drugi
formularz
trzeci
formularz
przycisk przycisk przycisk przycisk element
graficzny opcji Submit Reset wyboru pliku
Zastosowanie innych elementów kontrolnych
Oprócz elementów kontrolnych, które można stworzyć przy użyciu znacznika PUT>, istnieją trzy inne elementy, tworzone za pomocą innych znaczników.
500 Część 6. Mapy odsyłaczy i formularze
Zastosowanie znacznika
Przyciski tworzone przy użyciu znacznika są podobne do przycisków
kreowanych przy wykorzystaniu znacznika , jednak w odróżnieniu od nich, w
przyciskach tego typu, pomiędzy otwierającym i zamykającym znacznikiem, można
umieszczać kod HTML, który zostanie wyświetlony na przycisku.
Element BUTTON (w odróżnieniu od elementu INPUT z atrybutem TYPE="button") nie jest
obsługiwany przez Netscape Navigatora.
Można tworzyć przyciski różnego typu  Submit, Reset oraz normalne. Aby utworzyć
przycisk, należy wpisać znacznik otwierający i dodać do niego atrybut NA-
ME. Atrybut ten określa nazwę przycisku. Następnie należy dodać atrybut TYPE, okre-
ślający, jaki typ przycisku należy utworzyć. Teraz można zakończyć znacznik otwiera-
jący, za nim wpisać tekst, jaki ma zostać wyświetlony na przycisku i zakończyć go
znacznikiem zamykającym (). Przedstawiony poniżej fragment kodu defi-
niuje trzy przyciski różnych typów, zostały one pokazane na rysunku 17.11. Zauważ, że
poszczególne przyciski oddzieliłam od siebie dwoma znacznikami
, aby każdy z
nich został wyświetlony w osobnym wierszu i odsunięty od pozostałych.
Wyślij formularz



Wyczyść zawartość
formularza


Sprawdz
dane

Rysunek 17.11.
Znacznik
pozwala na umieszczanie
wewnątrz przycisku
treści i innych
tekst
elementów HTML
sformato-
wany
znacznikami
HTML
Ze względu na to, iż wewnątrz elementu BUTTON można umieszczać inne elementy
HTML, przedstawiony poniżej kod jest całkowicie poprawny:
Wyślij formularz



Użycie znacznika spowoduje wyświetlenie słowa Wyślij pogrubioną czcionką.
Można także stosować obrazy, które zostaną wyświetlone jako przycisk. W tym celu
wystarczy umieścić znacznik wewnątrz elementu BUTTON, jak pokazałam w po-
niższym przykładzie:
Rozdział 17. Projektowanie formularzy 501
height="20" />
Duże pola tekstowe tworzone przy użyciu znacznika <br>Znacznik <TEXTAREA> tworzy duże pola tekstowe, w których użytkownicy mogą wpi-<br>sywać tyle danych, na ile im pozwolisz. Aby stworzyć taki element kontrolny, zapisz <br>otwierający znacznik <TEXTAREA> i dodaj do niego atrybut NAME, określający nazwę <br>pola oraz atrybuty ROWS i COLS. Dwa ostatnie atrybuty są wymagane i określają obszar, <br>jaki zajmie pole, definiując go jako ilość wierszy i kolumn. Można także zdefiniować <br>tekst, który się pojawi wewnątrz pola, jako jego wartość początkową. Po nim powinie-<br>neś umieścić zamykający znacznik , który zakończy cały element. Rysu-
nek 17.12 przedstawia przykład takiego wielowierszowego pola tekstowego.

Proszę wpisać komentarze dotyczące obsługi użytkownika.
Tutaj wpisz swój <br>komentarz

Możesz się zastanawiać, gdzie się podział znacznik . Znacznik ten, podobnie jak
znacznik , umożliwiał tworzenie pól tekstowych zawierających pojedynczą linię
tekstu, jednak W3C uznało go za przestarzały. Jego skład ma następującą postać: PROMPT="Informacja dla użytkownika">. Pisząc ten rozdział, przetestowałam użycie
tego znacznika w najnowszej wersji przeglądarki Internet Explorer oraz Netscape Navigator i
okazało się, że znacznik ten nie jest już obsługiwany. A zatem uznałam, że omawianie go nie
będzie konieczne.
Tworzenie list przy użyciu elementów SELECT i OPTION
Element SELECT tworzy listę zbliżoną wyglądem do menu standardowych aplikacji,
z której użytkownik może wybierać opcje. Sam element SELECT służy jedynie do okre-
ślenia wyglądu listy, która może być listą rozwijaną lub przewijaną. Aby stworzyć listę,
konieczne jest umieszczenie w niej przynajmniej jednego elementu OPTION lub OPTGRO-
UP.
Aby stworzyć listę rozwijaną zawierającą opcje zdefiniowane przez elementy OPTION,
powinieneś w pierwszej kolejności zapisać otwierający znacznik z atrybutem
NAME:

Następnie możesz dodać do niego elementy OPTION definiujące elementy listy:

Polska
Litwa
Ukraina
Białoruś
Teraz możesz zakończyć listę zamykającym znacznikiem :

Wybierz położenie:
502 Część 6. Mapy odsyłaczy i formularze

Polska
Litwa
Ukraina
Białoruś

Na rysunku 17.13 przedstawiłam rozwijaną listę zawierającą cztery elementy.
Rysunek 17.13.
Stosując element
SELECT można tworzyć
rozwijane listy
Aby stworzyć listę przewijaną, wystarczy dodać do otwierającego znacznika
atrybut SIZE, jak pokazałam w poniższym przykładzie:

Rysunek 17.14 przedstawia listę z rysunku 17.12, do której został dodany atrybut SIZE
o wartości 2. Zauważ, iż lista nie jest już rozwijana, a jej zawartość można przewijać.
Rysunek 17.4.
Przy użyciu elementu
SELECT można także
tworzyć listy przewijane
W tym przypadku element SELECT ograniczył widoczny obszar listy do dwóch opcji.
Aby zobaczyć pozostałe opcje, użytkownicy będą musieli ją przewinąć.
Aby przesłać na serwer informacje inne niż te, które zostały wyświetlone na liście, na-
leży posłużyć się atrybutem VALUE znacznika . Rozwiązanie to jest bardzo
przydatne, jeśli przetwarzasz dane na serwerze i chcesz skojarzyć z opcją listy jakąś
wartość liczbową lub kod. W przedstawionym poniżej fragmencie kodu, po zaznaczeniu
opcji Ekonomia 312 zostanie przesłana wartość e312, a po zaznaczeniu opcji Koszy-
kówka w weekend 499  wartość kw499.
Rozdział 17. Projektowanie formularzy 503

Programowanie 101
Ekonomia 312
Wychowanie fizyczne 221
Koszukówka w weekend 499

Aby początkowo zaznaczyć wybraną opcję, należy dodać do odpowiedniego znacznika
atrybut SELECTED. Oto przykład:

Programowanie 101
Ekonomia 312
Wychowanie fizyczne 221
Koszykówka w weekend 499

Po wyświetleniu powyższej listy, będzie w niej początkowo zaznaczona opcja Wycho-
wanie fizyczne 499.
Jak na razie nauczyłeś się tworzyć listy, w których użytkownicy mogą zaznaczyć tylko
jedną opcję. Jednak bardzo łatwo można zmodyfikować listy w taki sposób, aby można
było na niej zaznaczyć dowolną ilość opcji. Służy do tego atrybut MULTIPLE znacznika
, przedstawiony w poniższym przykładzie:

W systemie Windows można zaznaczać kilka opcji listy, naciskając klawisz Shift lub Ctrl
i klikając wybrane opcje. W systemie Macintosh kilka opcji listy można zaznaczyć, naciska-
jąc klawisz Ctrl lub Commnad i klikając poszczególne opcje listy.
Aby zakończyć omawianie zagadnień związanych z tworzeniem list, chciałabym krótko
opisać element COLGROUP. Teoretycznie element ten grupuje elementy OPTION i dzieli
zawartość listy na części.
Element COLGROUP należy umieszczać wewnątrz elementu SELECT. COLGROUP powi-
nien także zawierać elementy OPTION, jak pokazałam w poniższym przykładzie.


Wychodzenie z zatopionego okrętu podwodnego
Szachy głębionowe


Skoki z parasolem
Skoki Bunji z szybowca


Element OPTGROUP nie jest obsługiwany przez najnowsze wersje przeglądarek Internet
Explorer ani Netscape Navigator.
504 Część 6. Mapy odsyłaczy i formularze
Dodatkowe elementy
Stworzyłeś już wszystkie elementy kontrolne formularzy, które mogą pobierać informa-
cje wpisywane przez osoby oglądające strony. Teraz nadszedł czas, aby wzbogacić
możliwości funkcjonalne formularzy i sprawić, aby były one łatwiejsze w obsłudze.
Wyświetlanie etykiet
Element LABEL wyświetla przydatne informacje dotyczące konkretnego elementu for-
mularza. Etykietę należy skojarzyć z elementem kontrolnym formularza za pomocą
atrybutu FOR. Aby stworzyć etykietę, zapisz w kodzie strony znacznik i
umieść w nim atrybut FOR. Jeśli wartość tego atrybutu zostanie podana, będzie musiała
odpowiadać wartości atrybutu ID elementu kontrolnego formularza, z którym chcesz sko-
jarzyć etykietę. Następnie wpisz tekst etykiety i zamykający znacznik . Poniżej
przedstawiłam przykład etykiety:
Kto jest Twoim ulubionym skoczkiem
narciarskim?

Choć w Netscape Navigatorze element LABEL nie jest obsługiwany, to jednak umieszczony
wewnątrz niego tekst zostanie wyświetlony.
Rysunek 17.15 przedstawia pole tekstowe wraz ze skojarzoną z nim etykietą.
Rysunek 17.15.
Etykiety można kojarzyć
ze wszystkimi
elementami formularzy,
etykieta
zauważ, że są one
wyświetlane wraz z tymi
Pole
elementami
tekstowe
Jeśli zdefiniujesz element kontrolny formularza wewnątrz elementu LABEL, jak pokaza-
łam w poniższym przykładzie, to będziesz mógł pominąć atrybut FOR.
Nazwa użytkownika:
Rozdział 17. Projektowanie formularzy 505
Grupowanie elementów przy wykorzystaniu
znaczników

oraz

Element FIELDSET tworzy grupy elementów kontrolnych formularzy, wyświetlane
w przeglądarce. Element LEGEND tworzy etykietę dla elementu FIELDSET. Aby stwo-
rzyć element FIELDSET, umieść w kodzie strony otwierający znacznik

, a
następnie element LEGEND, jak pokazałam w poniższym przykładzie:

Desery lodowe

Ani element FIELDSET, ani LEGEND nie jest dostępny w przeglądarce Netscape Naviga-
tor.
Zauważ, że element LEGEND zawiera tekst, można w nim także umieścić wewnątrzwier-
szowe elementy HTML służące do formatowania tekstu. Następnie dodaj do kodu ele-
menty kontrolne formularza i zakończ wszystko zamykającym znacznikiem

. Rezultaty przedstawiłam na rysunku 17.16.

Desery lodowe

Jabłkowo-cynamonowy />

Karmelowo-waniliowy />

Owoce leśne

Tropikalna uczta

Rysunek 17.16.
etykieta
Elementy FIELDSET
oraz LEGEND
umożliwiają określanie
logicznej organizacji
formularza
obszar
elementu
FIELDSET
506 Część 6. Mapy odsyłaczy i formularze
Modyfikacja domyślnej kolejności poruszania się
pomiędzy elementami
Wykorzystanie klawiatury do poruszania się po aplikacjach może znacznie ułatwić wy-
pełnianie formularzy. Naciskając klawisz Tab, możesz poruszać się pomiędzy poszcze-
gólnymi elementami kontrolnymi formularza w ściśle określonej kolejności.
Choć Netscape Navigator umożliwia poruszanie się po elementach kontrolnych formularzy
przy użyciu klawisza Tab, to jednak nie daje możliwości zmiany kolejności przechodzenia
przy użyciu atrybutu TABINDEX.
Aby umożliwić poruszanie się po polach formularza przy użyciu klawisza Tab, należy
dodać atrybut TABINDEX do wszystkich elementów kontrolnych, do których chcesz
przejść. Następnie ponumeruj wszystkie elementy kontrolne, rozpoczynając od wartości
1.
Jeśli będą miały taką samą wartość atrybutu TABINDEX, to kolejność poruszania się po
nich będzie zależała od kolejności, w jakiej zostały one zapisane w kodzie dokumentu
HTML. Poniżej przedstawiłam przykład elementu kontrolnego, do którego został doda-
ny atrybut TABINDEX.

Wpisz swoje imię:

Stosowanie klawiszy dostępu
Opcja klawiszy dostępu także ułatwia poruszanie się po formularzach. Umożliwia sko-
jarzenie znaków z elementami kontrolnymi, dzięki czemu, naciskając odpowiedni kla-
wisz, można przenieść miejsce wprowadzania do wybranego elementu formularza. Po-
niżej przedstawiłam przykładowy kod, demonstrujący, w jaki sposób można wykorzy-
stać klawisze dostępu:

Czym się interesujesz?

Sportami

Muzyką

Kinematografią

Niestety Netscape Navigator nie daje możliwości korzystania z atrybutu ACCESSKEY. Internet
Explorer obsługuje ten atrybut, a użytkownicy, aby dostać się do wybranego elementu
formularza, muszą nacisnąć kombinację klawiszy Alt + wybrana_litera. W innych systemach
operacyjnych oraz przeglądarkach metoda wykorzystania klawiszy dostępu może być nieco
inna.
Tworzenie elementów wyłączonych
i przeznaczonych tylko do odczytu
Czasami będziesz chciał wyświetlić elementy kontrolne formularzy bez dawania użyt-
kownikom możliwości wykorzystania ich lub wpisywania w nich informacji. Aby wy-
Rozdział 17. Projektowanie formularzy 507
łączyć element formularza, należy użyć atrybutu DISABLED. Przykład jego zastosowa-
nia przedstawiłam w poniższym fragmencie kodu:

Jaki jest sens życia?
<br>Tutaj wpisz swoją odpowiedz
. <br>

Po wyświetleniu w przeglądarce, tekst umieszczony w polu będzie miał jasnoszary ko-
lor, co oznacza, że pole zostało wyłączone. Aby stworzyć pole przeznaczone wyłącznie
do odczytu, należy posłużyć się atrybutem READONLY, przedstawionym w poniższym
przykładzie.

Jaki mamy miesiąc: readonly />

Pole przeznaczone wyłącznie do odczytu jest wyświetlane w normalny sposób, jednak
gdy użytkownik spróbuje zmienić jego wartość (lub w przypadku przycisków i pól wy-
boru  zaznaczyć je), to okaże się, że nie jest to możliwe. Rysunek 17.17 przedstawia
pole wyłączone oraz pole tekstowe przeznaczone wyłącznie do odczytu.
Element wyłączony
Rysunek 17.17.
Zawartość wyłączonych
pól jest wyświetlana
w jasnoszarym kolorze,
natomiast pola tylko do
odczytu są wyświetlane
normalnie  jednak ich
Element
zawartości nie można
przezna-
zmieniać
czony
tylko do
odczytu
Netscape Navigator nie daje możliwości użycia atrybutów DISABLED oraz READONLY.
Ćwiczenie 17.3: Tworzenie formularza z zaawansowanymi
elementami kontrolnymi
Ostatnie ćwiczenie, jakie wykonasz w tym rozdziale, będzie demonstrowało użycie
elementów kontrolnych przedstawionych w dwóch poprzednich podrozdziałach. Zosta-
ną one użyte do stworzenia strony Systemu Swatającego.
Zaczniesz od zrobienia jednego, dużego formularza. Otwórz zatem szablon dokumentu
HTML i utwórz element FORM wewnątrz elementu BODY.
Strona będzie się składała z dwóch głównych części: pierwsza z nich będzie zawierać py-
tania dotyczące osoby odwiedzającej stronę, a druga  pytania dotyczące osoby poszu-
508 Część 6. Mapy odsyłaczy i formularze
kiwanej. Ten układ wręcz doskonale nadaje się do wykorzystania elementów FIELD-
SET.
Utwórz zatem pierwszy element FIELDSET. Zapisz otwierający znacznik

, do-
daj do niego znacznik

oraz cały element LEGEND, tak jak pokazałam w
poniższym przykładzie:
method="post">

Powiedz nam o sobie

Następnie dodaj etykietę listy, samą listę oraz wszystkie jej opcje. Podczas tworzenia li-
sty dodaj do niej atrybuty TABINDEX oraz ACCESSKEY.
Mój ulubiony środek transportu to...

Wybierz jedną z opcji
---------------------
Samochód służbowy
Riksza rowerowa
Hulajnoga

To nie było szczególnie trudne. Teraz stwórz następną etykietę i listę, wzorując się na
poniższym przykładzie:
Lubię długie spacery ...

Wybierz jedną z opcji
---------------------
Po polach kukurydzy na mojej farmie
Po ulicach mego miasta
Po mojej prywatnej plaży
Do lodówki w kuchni

Zakończ tę grupę pól, dodając do niej jeszcze jedną etykietę i wieloliniowe pole teksto-
we. Nie zapomnij także dopisać zamykającego znacznika

.
Dlaczego?
tabindex="3">

To już prawie połowa pracy. Poniższy fragment kodu przedstawia następną grupę pól
 drugi element FIELDSET  dotyczącą cech poszukiwanej osoby:

Czego poszukujesz?

Chciałbym, aby ta druga osoba...
accesskey="D">
oglądała ze mną filmy
szukała prawdziwego związku
była romantyczna
czyściła klatkę mojej papużki

Opisz swego idealnego partnera.
Rozdział 17. Projektowanie formularzy 509

Teraz, gdy utworzyłeś już dwie grupy elementów kontrolnych, dodaj do formularza ele-
ment wyłączony oraz przeznaczony tylko do odczytu.
Zaznacz jeśli chcesz dołączyć do naszego klubu.


Czy zapłacisz nam za usługę?

I w reszcie dodaj do formularza przyciski Submit oraz Reset oraz dodaj do kodu strony
zamykający znacznik

. Zauważ, iż przyciski tworzę przy użyciu znacznika
, nadając im postać graficzną.







Teraz, gdy formularz został utworzony, możesz umieścić na początku strony grafikę ty-
tułową i odpowiednio rozmieścić obie grupy elementów formularza posługując się przy
tym tabelą. Na poniższym listingu przedstawiłam ostateczną wersję kodu strony:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

method="post">

Powiedz nam o sobie Mój ulubiony środek transportu to... accesskey="t"> Wybierz jedną z opcji --------------------- Samochód służbowy Riksza rowerowa Hulajnoga Lubię długie spacery ... 510 Część 6. Mapy odsyłaczy i formularze accesskey="2"> Wybierz jedną z opcji -------------------- Po polach kukurydzy na mojej farmie Po ulicach mego miasta Po mojej prywatnej plaży Do lodówki w kuchni Dlaczego? cols="30" tabindex="3">

Czego poszukujesz? Chciałbym, aby ta druga osoba... accesskey="D"> oglądała ze mną filmy szukała prawdziwego związku była romantyczna czyściła klatkę mojej papużki Opisz swego idealnego partnera. cols="30">

Zaznacz jeśli chcesz dołączyć do naszego klubu.

Czy zapłacisz nam za usługę?

Rozdział 17. Projektowanie formularzy 511

Postać wynikowej strony WWW została przedstawiona na rysunku 17.18.
element SELECT
tworzący listę
Rysunek 17.18.
Dodatkowe elementy
formularzy na stronie
Systemu Swatającego
element SELECT
tworzący listę
rozwijaną
wieloliniowe
pole tekstowe
Element
wyłączony
elementy BUTTON Element
z obrazami tylko do odczytu
Planowanie formularzy
Zanim zaczniesz utworzyć skomplikowane formularze na swoich stronach WWW, po-
winieneś poświęcić nieco uwagi na ich zaplanowanie. W przyszłości pozwoli Ci to za-
oszczędzić nie tylko czas, lecz także wielu kłopotów.
W pierwszej kolejności określ, jakie informacje chcesz uzyskać. To może się wydawać
oczywiste, jednak powinieneś o tym pomyśleć w momencie, gdy nie zaprzątasz sobie
głowy technicznymi aspektami tworzenia formularza.
Następnie przejrzyj te informacje i dopasuj do nich odpowiednie typy elementów kon-
trolnych. Zastanów się, jaki typ najlepiej odpowiada typowi pytania, jakie chcesz zadać.
Jeśli potrzebujesz odpowiedzi  tak lub  nie , to do jej uzyskania doskonale nadadzą
się przyciski opcji lub pola wyboru, natomiast zastosowanie wieloliniowego pola tek-
stowego będzie lekką przesadą. Postaraj się ułatwić zadanie osobom, które będą wypeł-
512 Część 6. Mapy odsyłaczy i formularze
niały formularz i spróbuj dopasować typy pól do zadawanych pytań. Dzięki temu, ana-
liza podanych odpowiedzi w skrypcie (jeśli okaże się ona niezbędna) będzie znacznie
prostsza.
Będziesz musiał także skontaktować się z osobą piszącą skrypt CGI do obsługi formula-
rza, i uzgodnić z nią nazwy poszczególnych elementów kontrolnych. Nadawanie nazw
elementom formularza przed uzgodnieniem ich z autorem skryptu, nie ma większego
sensu  w końcu nazwy wszystkich pól będą musiały odpowiadać nazwom użytym
w skrypcie CGI.
I ostatnia sprawa, otóż możesz rozważyć sprawdzanie poprawności informacji wprowa-
dzonych w formularzu przy wykorzystaniu skryptów. Sprawdzając poprawność infor-
macji podanych przez użytkownika w skrypcie wykonywanym po stronie przeglądarki
(i zapisanym wewnątrz strony WWW), możesz zapewnić, że dane przesłane z formula-
rza na serwer będą zgodne z oczekiwaniami. Wykorzystując wbudowane zdarzenia, ta-
kie jak onsubmit, możesz skojarzyć funkcje zdefiniowane w skrypcie, ze wszystkimi
elementami formularza.
Podsumowanie
Jak widzisz, wspaniały świat formularzy pełen jest różnych typów elementów kontrol-
nych, z którymi użytkownicy oglądający Twą witrynę mogą prowadzić interakcję. For-
mularze sprawiają, że Twoja witryna stanie się naprawdę interaktywna.
Powinieneś jednak uważać. Jest bardzo prawdopodobne, że osoby przeglądające zasoby
WWW, które wciąż muszą wypełniać takie czy inne formularze, mogą starać się unik-
nąć tej konieczności i przejść na inną witrynę. Zatem będziesz musiał dać im dobry po-
wód, usprawiedliwiający trud związany z wypełnianiem formularza!
W tabeli 17.1 podsumowałam znaczniki HTML przedstawione w tym rozdziale. Zapa-
miętaj podane poniżej informacje, a nic nie powinno Ci sprawić problemów.
Do tworzenia formularzy używaj elementu FORM.
W znaczniku

zawsze definiuj atrybut ACTION.
Twórz elementy kontrolne formularzy posługując się znacznikiem
lub innymi, odpowiednimi znacznikami.
Dokładnie testuj tworzone formularze.
Tabela 17.1.
Znaczniki HTML przedstawione w rozdziale 17.
Znacznik/atrybut Zastosowanie
Rozdział 17. Projektowanie formularzy 513
Tworzy formularz HTML. W jednym dokumencie HTML można umieścić
dowolną ilość formularzy, jednak samych formularzy nie można zagnieżdżać.
ACTION Atrybut znacznika określający (przy użyciu adresu URL) skrypt
uruchamiany na serwerze i służący do przetwarzania danych z formularza.
METHOD Atrybut znacznika określający sposób przesyłania danych z formularza na
serwer. Wartości, jakie można przypisać temu atrybutowi to: post i get.
Element formularzy, tworzący element kontrolny, w którym użytkownicy mogą
wpisywać informacje.
TYPE Atrybut znacznika określający typ elementu kontrolnego. Wartości jakie
może przybierać ten atrybut to: text, password, submit, reset,
checkbox, radio, button, image, hidden oraz file. Ich znacznie opisałam
na poniższej liście:
Text tworzy pole tekstowe,
Password tworzy pole tekstowe maskujące dane wpisywane przez
użytkownika,
Submit tworzy przycisk Submit, którego kliknięcie powoduje przesłanie
danych z formularza na serwer,
Reset tworzy przycisk Reset, którego kliknięcie przywraca początkowe
wartości wszystkich elementów formularza,
Checkbox tworzy pole wyboru,
Radio tworzy przycisk opcji,
Image tworzy przycisk graficzny,
Button tworzy zwyczajny przycisk,
Hidden tworzy pole ukryte, którego użytkownik nie może zobaczyć,
File tworzy element kontrolny umożliwiający przesyłanie plików na
serwer, wraz z pozostałymi informacjami podanymi w formularzu.
Tworzy przycisk, którego zawartością może być kod HTML.
Tworzy wieloliniowe pole tekstowe. <br><SELECT> Zwyczajna lub rozwijalna lista opcji. Poszczególne opcje są definiowane przy <br>użyciu znacznika <INPUT>. <br><OPTION> Tworzy opcję umieszczaną wewnątrz elementu SELECT. <br><LABEL> Definiuje etykietę kojarzoną z elementem kontrolnym formularza. <br><FIELDSET> Grupuje elementy kontrolne formularzy. <br><LEGEND> Określa tytuł elementu FIELDSET. <br>Warsztat <br>Jeśli dotarłeś do tego miejsca, sądzę, że będziesz miał jeszcze kilka pytań. W tej części <br>rozdziału przedstawiłam kilka potencjalnych pytań, które, jak sądzę, mogą Cię zaintere-<br>sować. Następnie będziesz mógł przetestować swoje zdolności przyswajania informacji, <br>odpowiadając na kilka pytań quizowych i rozszerzyć swoją wiedzę, wykonując dwa <br>proste ćwiczenia. <br>514 Część 6. Mapy odsyłaczy i formularze <br>Pytania i odpowiedzi <br>P. Chciałbym zaprojektować formularz, który póz
niej będzie można łatwo prze-<br>analizować przy wykorzystaniu arkusza kalkulacyjnego lub bazy danych. W jaki <br>sposób zaprojektować formularz, tak aby jego analiza była prostsza? <br>O. W pierwszej kolejności upewnij się, że dla każdego elementu formularza została <br>zdefiniowana wartość domyślna. Dzięki temu ilość pól przesyłanych na serwer bę-<br>dzie stała, a to z kolei znacznie ułatwi importowanie danych z formularza do arkusza <br>kalkulacyjnego. Nie obawiaj się wykorzystania wartości, które będzie można prze-<br>twarzać w sposób programowy. Na przykład, dzięki wykorzystaniu atrybutu VALUE <br>można sprawić, aby wszystkie odpowiedz  Tak miały wartość 1, a odpowiedzi  Nie <br> wartość 0. W ten sposób, po wprowadzeniu danych do arkusza kalkulacyjnego, <br>można wyświetlić je w formie grafu operującego na wartościach 1 i 0 i nie trzeba <br>będzie obsługiwać wartości tekstowych. Można także stosować wiele innych sztu-<br>czek, takich jak specjalne tablice konwertujące wartości podane w formularzu. Eks-<br>perymentując, możesz określić, jakie dane będą dla Ciebie najwygodniejsze i najle-<br>piej będą się nadawały do wykorzystania w skrypcie. <br>P. Chciałbym stworzyć formularz i przetestować go, lecz nie ma jeszcze gotowego <br>odpowiedniego skryptu. Czy istnieje jakiś sposób umożliwiający sprawdzenie <br>poprawności przesyłanych informacji bez wykorzystania skryptu? <br>O. Bardzo często znajduję się w takiej sytuacji! Na szczęście rozwiązanie tego proble-<br>mu jest bardzo proste. <br>Zmodyfikuj atrybut ACTION umieszczony w otwierającym znaczniku <FORM>, <br>umieszczając w nim słowo mailto oraz swój adres poczty elektronicznej, jak poka-<br>załam w poniższym przykładzie: <br><FORM ACTION="mailto:twojadresemail@isp.com.pl" METHOD="post"> <br>Teraz możesz wypełnić swój testowy formularz i przesłać go bez konieczności uży-<br>wania jakiegokolwiek skryptu. Gdy wyślesz formularz, jego zawartość zostanie <br>przesłana pocztą elektroniczną pod wskazany adres w formie załącznika do listu. <br>Wystarczy, że otworzysz ten załącznik w dowolnym edytorze tekstowym i gotowe! <br>Tak oto możesz zobaczyć przesłane informacje. <br>P. Słyszałem, że aktualnie toczy się dyskusja na temat wersji 4.01 języka HTML. <br>Czy będą w niej wprowadzone jakieś zmiany dotyczące formularzy? <br>O. HTML 4.01 jest aktualnie rozpatrywany przez W3C jako proponowane zalecenie <br>(Proposed Recommendation), jednak nie ma w nim żadnych poważniejszych zmian <br>dotyczących formularzy. Poniżej przedstawiłam modyfikacje, które zostały zapro-<br>ponowane. <br>Dodanie atrybutu NAME od znacznika <FORM>. Zmiana ta ma na celu zapewnienie <br>zgodności z wcześniejszymi wersjami języka oraz możliwości odwoływania się do <br>formularzy w skryptach, przy użyciu ich nazwy (wartości atrybutu NAME). <br>Rozdział 17. Projektowanie formularzy 515 <br>Usunięcie odnośnika do opisu oraz przykładu użycia adresu typu mailto: jako <br>wartości atrybutu ACTION elementu FORM. Nie wiadomo, czy spowodowałoby to <br>usunięcie możliwości obsługi tej czynności. Tekst zalecenia wskazuje, że implemen-<br>tacja wszelkich czynności związanych z obsługą formularzy leży wyłącznie w gestii <br>twórców przeglądarek. <br>Dodanie brakującego atrybutu ISMAP do znacznika <INPUT> w celu dodania obsłu-<br>gi map odnośników przetwarzanych na serwerze. <br>Dodanie komentarza do elementu SELECT, wyjaśniającego, że w przypadku, gdy <br>w elemencie nie zostanie wybrana żadna opcja, żadne dane z tego elementu nie są <br>przesyłane na serwer w momencie wysyłania formularza. <br>Quiz <br>1. Ile formularzy można umieścić na jednej stronie WWW? <br>2. W jaki sposób tworzy się elementy kontrolne formularzy, takie jak przyciski opcji <br>lub pola wyboru? <br>3. Czy hasła podawane przy użyciu elementu password są przesyłane w bezpieczny <br>sposób? <br>4. Wyjaśnij korzyści płynące z wykorzystania pól ukrytych. <br>5. Jakie inne technologie są wykorzystywane przy obsłudze formularzy? <br>Odpowiedzi <br>1. Teoretycznie rzecz biorąc, jedynym ograniczeniem jest ilość pamięci na komputerze <br>użytkownika, jednak formularzy nie można zagnieżdżać. Należy także pamiętać <br>o tym, iż każdy element kontrolny formularzy zajmuje nieco miejsca w pamięci. <br>Znalazłam się raz w sytuacji, gdy cała wolna pamięć komputera została zajęta <br>poprzez umieszczenie na formularzu zbyt wielu elementów. <br>2. Te elementy formularzy są tworzone przy użyciu znacznika <INPUT>. <br>3. Absolutnie nie! <br>4. Ukryte pola formularza są raczej wykorzystywane przez jego autora, niż przez <br>osoby, które wypełniają formularz. Dzięki użyciu unikalnych wartości atrybutu <br>VALUE możesz rozróżniać dane pochodzące z różnych formularzy, lecz obsługiwane <br>przez jeden skrypt CGI, lub dane przesyłane w różnym czasie. <br>5. Aby obsłużyć informacje wpisane w formularzu, konieczne jest wykorzystanie <br>skryptu CGI wykonywanego na serwerze. Adres tego skryptu podawany jest jako <br>wartość atrybutu ACTION. Skrypty CGI są zazwyczaj pisane w języku Perl lub <br>innym języku skryptowym. <br>516 Część 6. Mapy odsyłaczy i formularze <br>Ćwiczenia <br>1. Sprawdz
, czy Twój dostawca usług internetowych udostępnia jakieś skrypty CGI, <br>które możesz wykorzystać do obsługi formularzy. Jeśli udostępnia takie skrypty, <br>to zapytaj się, w jaki sposób przetwarzają one informacje oraz jakie nazwy <br>powinieneś nadawać elementom kontrolnym formularzy. Jeśli potrzebujesz <br>formularzy, a Twój dostawca usługi, internetowych nie pozwala na stosowanie <br>skryptów CGI, to powinieneś poszukać innego dostawcy. <br>2. Poszukaj witryn wykorzystujących formularze i odwiedz
kilka z nich, na przykład, <br>http://www.onet.com. Zobacz, jakie elementy kontrolne są używane w tych <br>formularzach i w jaki sposób zostały rozmieszczone na stronie. Nie omieszkaj <br>przejrzeć kodu z
ródłowego tych formularzy. <br>Rozdział 17. Projektowanie formularzy 517 <br><br> <br>Wyszukiwarka<br> <form method="get" action="https://zanotowane.pl/szukaj3.php"> <input value="" id="q" name="q" /> <input type="submit" value="Szukaj" /> </form> <br>Podobne podstrony:<br><a href="../../132/2096">cwiczenia EK D zad 3 17 07</a><br><a href="../../99/4305">ustawa o samorządzie powiatowym 17,07,2015</a><br><a href="../../156/8117">17 07</a><br><a href="../../93/4721">07 17</a><br><a href="../../118/9386">07 17 Styczeń 1998 Kaukaz nie ma dokąd odejść</a><br><a href="../../91/7119">1997 07 str 17 Dziwne atraktory</a><br><br><a href="https://zanotowane.pl/szukaj3.php?q=R+17+07" rel="nofollow">więcej podobnych podstron</a><br><br><form method="get" action="https://zanotowane.pl/szukaj3.php"><input value="" id="q" name="q" /><input type="submit" value="Szukaj" /></form> </div> <!-- /.container --> <footer> <div class="footer-blurb"> <div class="container"> <div class="row"> <div class="col-sm-4 footer-blurb-item"> </div> </div> <!-- /.row --> </div> </div> <div class="small-print"> <div class="container"> <p><a href="mailto:edibk@onet.pl">Kontakt</a> | <a href="../../polityka.php">Polityka prywatności</a></p> </div> </div> </footer> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-L8W7STRP18"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-L8W7STRP18'); </script> </body> </html>