R-17-07, Programowanie, ! HTML, HTML 4

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, dź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óź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 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ść.

0x01 graphic

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.

Ć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 przypadku jest to Notatnik) i stworzenia szkieletu strony. Rozpocznij od podania standardowych informacji nagłówka strony, następnie dodaj do niej znacznik <BODY> i, w końcu, zamykające znaczniki </BODY> i </HTML>. 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.

0x01 graphic

Staram się używać pośredniej (Transitional) wersji języka HTML, zwróć zatem uwagę na postać deklaracji <!DOCTYPE>. Dzięki temu będę mogła korzystać z przestarzałych znaczników HTML bez obawy przed błędami weryfikacji poprawności kodu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Tytuł</title>

</head>

<body>

</body>

</html>

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

<title>Wejście na witrynę Webbit Hole</title>

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

</form>

Zanim przejdziesz do dalszej pracy powinieneś dowiedzieć się czegoś więcej na temat elementu FORM oraz atrybutów otwierających znacznik <FORM>. Oczywiście, <FORM> 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 niezwykle ważne, aby skrypt o podanej nazwie faktycznie był dostępny na serwerze, w miejscu określonym przez podany URL.

0x01 graphic

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 <FORM> 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ą przekazywane 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 elementów, w dalszej części ćwiczenia umieścisz je w tabeli.

Podaj swoje imię: <input type="Text" name="imie" />

</form>

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

Podaj swoje imię: <input type="Text" name="imie" />

Podaj swoje hasło: <input type="Password" name="haslo" />

</form>

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

Podaj swoje imię: <input type="Text" name="imie" />

Podaj swoje hasło: <input type="Password" name="haslo" />

</form>

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świetlany na przycisku w przeglądarce. Można także w ogóle nie podawać wartości tego atrybutu, w takim przypadku przeglądarka wyświetli domyślny tekst zależny od typu przycisku.

0x01 graphic

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 utworzoną 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 odpowiedni sposób, wykorzystując tabelę:

<tr>

<br />

</tr>

</table>

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.

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Teraz dodaj do tabeli elementy formularza — w tym celu umieść znacznik <FORM> tuż za otwierającym znacznikiem <TABLE>. Umieść poszczególne elementy, w odpowiednich wierszach tabeli, jak pokazałam na poniższym przykładzie i upewnij się, czy nie zapomniałeś zapisać zamykającego znacznika </FORM>.

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ć szerokość 50% całej tabeli. Dodatkowo wyśrodkowałam przyciski w obu kolumnach.

<tr>

<td align="right" width="50%">Podaj swoje imię:</td>

</tr>

<tr>

<td align="right">Podaj swoje hasło:</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

</table>

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 <DIV>. Aby dodać nieco wolnej przestrzeni pomiędzy grafiką a formularze, dodałam nowy wiersz, posługując się znacznikiem <BR>.

0x01 graphic

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Wejście na witrynę Webbit Hole</title>

</head>

<body>

<tr>

</tr>

</table>

<br />

<tr>

<td align="right" width="50%">Podaj swoje imię:</td>

</tr>

<tr>

<td align="right">Podaj swoje hasło:</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

</table>

</div>

</body>

</html>

Wymagało to pewnego wysiłku, ale myślę że efekt końcowy przedstawiony na rysunku 17.1 jest całkiem dobry.

0x08 graphic

0x01 graphic

Rysunek 17.1.

Prosty formularz HTML zawierający cztery elementy zapewnia dostęp do witryny Wabbit Hole.

0x01 graphic

Aby zakończyć to ćwiczenie. przetestowałam formularz, sprawdzając czy przekazywane dane są zgodne z oczekiwaniami. Poniżej przedstawiłam postać zbioru danych:

imie=Esmeralda&haslo=nudynapudy

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. Wykorzystują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 <FORM>, umieszczania w nim prostych elementów oraz zastosowanie przycisków Submit i Reset. W tej części rozdziału wspomniane 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 <FORM>, a drugim — elementy kontrolne tworzone przy wykorzystaniu znacznika <INPUT>. Po przedstawieniu tych zagadnień, wykonasz bardziej skomplikowane ćwiczenie.

Zastosowanie znacznika <FORM> 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 stosować.

FORM jest elementem blokowym. Aby zrozumieć to pojęcie będziesz, musiał poznać inny, podstawowy model zawartości HTML — elementy wewnątrzwierszowe. Elementy tego typu, na przykład, <U> oraz <B> stosowane są do modyfikowania postaci tekstu lub poszczególnych liter. Ze względu na swój charakter, znaczniki te zawierają tekst, którego postać modyfikują, na przykład: <B>Kocham tę grę</B>, i mogą zawierać inne, zagnieżdżone elementy wewnątrzwierszowe. <B><I>Kocham</I> tę grę </B> 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świetlisz 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.

<b>Zagnieżdżanie elementów <i>wewnątrzwierszowych</i> nie powoduje stworzenia nowej linii.</b>

Jednak elementy blokowe, takie jak FORM, powodują wyświetlenie w przeglądarce nowego 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:

<b>Nesting <i>inline</ elements does not cause a line-break.</b>

0x01 graphic

Elementy wewnątrzwierszowe, takie jak <B>…</B>, mogą zawierać tekst oraz inne elementy wewnątrzwierszowe. Elementy blokowe, takie jak <DIV>…</DIV>, 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.

<p>Smakosze <form action="http://www.jakisurl.com.pl/

cgi-bin/rejestracja.cgi" method="post"> pragnący zapoznać się z naszymi przepisami, będą musieli podać swoje imię i hasło.</p>

Umieszczenie znacznika <FORM> w przedstawionym miejscu spowoduje dodanie nowego 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 <FORM> wewnątrz elementu wewnątrzwierszowego, takiego jak akapit, powoduje wstawienie nowego wiersza

0x01 graphic

A zatem podsumowując, element FORM może zawierać dowolną treść, elementy wewną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 <FORM> — ACTION oraz METHOD. Tylko atrybut ACTION jest konieczny. Przykładową postać elementu FORM przedstawiłam poniżej:

treść, elementy kontrolne, inne elementy HTML

</form>

Atrybut ACTION określa czynność, jaka ma zostać wykonana po przesłaniu formularza i zazwyczaj zawiera URL do skryptu CGI przechowywanego na serwerze WWW. Pamię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 przypadkó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:

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.

0x01 graphic

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 podany 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 wykorzystują 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 adresu 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ł elementó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 elementów kontrolnych.

0x01 graphic

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 (<INPUT>), nie ma żadnej zawartości ani znacznika zamykającego.

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

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ć informacje, 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ądź listy (których wartości są predefiniowane), 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 elementu FORM. Ich tworzenie należy rozpocząć od wpisana znacznika <INPUT>, 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ć:

<p>Podaj imię swojego zwierzaka: <input type="text" name="zwierzak" /> </p>

Rysunek 17.3.

Oto przykład pola tekstowego

0x01 graphic

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.

Aby wyświetlić tekst w polu, zanim jeszcze użytkownik wpisze w nim jakieś informacje, należy wykorzystać atrybut VALUE. Działa on jak prośba kierowana do użytkownika lub przypomnienie informujące, jakie dane należy wpisać. Oto przykład wykorzystania tego atrybutu:

<input type="text" name="zwierzak" size="25" maxlength="25"

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 oryginalnej postaci aż do momentu, gdy użytkownik go zmodyfikuje.

0x01 graphic

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 znacznika <INPUT> atrybut READONLY, zgodnie z poniższym przykładem:

Dzięki temu użytkownicy nie będą mogli zmodyfikować wartości pola. Dla pola tekstowego 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 niewielkich ilości informacji. Jednak jest to pole specjalne, gdyż jego zawartość jest wyświetlana w postaci gwiazdek.

0x01 graphic

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

<p>Podaj swoje hasło: <input type="password" name="haslo" size="8"

maxlength="8" /></p>

Na rysunku 17.4 ukazane zostało pole hasła, wraz z opisem wyjaśniającym jego przeznaczenie. Zauważ, że w przypadku tego pola nie musisz stosować atrybutu VALUE, gdyż jego zawartość zostanie zamaskowana podczas wyświetlania w przeglądarce.

Rysunek 17.4.

Pola hasła ukrywają treść wpisywanych informacji

0x01 graphic

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ę atrybutem VALUE, któremu można przypisać dowolny tekst, jak pokazałam w poniższym przykładzie:

0x01 graphic

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 atrybutu 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ć zaznaczone bądź nie, symbolizując stany włączenia i wyłączenia (patrz rysunek 17.5). Aby stworzyć pole wyboru, należy przypisać atrybutowi TYPE znacznika <INPUT> 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:

<p>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ć

0x01 graphic

<p>Zaznacz wszystkie występujące objawy: <br />

Nudności <input type="checkbox" name="objawy" value="nudnosci" /><br />

Ból głowy <input type="checkbox" name="objawy" value="bol_glowy" /><br />

Gorączka <input type="checkbox" name="objawy" value="gorączka" /><br />

Zawroty głowy <input type="checkbox" name="objawy" value="zawroty_glowy" /><br />

</p>

Gdy taki formularz zostanie przesłany do skryptu w celu przetworzenia, każde zaznaczone 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) przycisk, w którym, po zaznaczeniu, pojawia się kropka (patrz rysunek 17.6). Przyciski opcji tworzy się przy użyciu znacznika <INPUT>, 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.

<p>Czy się zgadzasz? <input type="radio" name="akceptuje" value="tak" />

</p>

Rysunek 17.6.

Przyciski opcji są wygodne przy odpowiedziach typu tak lub nie albo przy wybieraniu tylko jednej z kilku opcji

0x01 graphic

Gdy co najmniej dwa przyciski opcji będą miały tę samą nazwę, stworzą zbiór wzajemnie 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 atrybuty NAME obu przycisków opcji mają wartość plec, co oznacza, że użytkownik może zaznaczyć tylko jeden z nich. Jeśli użytkownik zaznaczy przycisk Mezczyzna, a następnie 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 <INPUT> wartości image spowoduje stworzenie 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"

0x01 graphic

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

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 wykonanie skryptu w przeglądarce. Taki przycisk można stworzyć przy użyciu poniższego fragmentu kodu:

Rysunek 17.8.

Przycisk można skojarzyć ze skryptem wykonywanym w przeglądarce

0x01 graphic

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 Sprawdź dane.

Możliwości przycisków utworzonych w ten sposób są bardziej ograniczone od możliwości przycisków tworzonych za pomocą znacznika <BUTTON>.

Pola ukryte

Pola ukryte są specjalnymi elementami kontrolnymi, które są niewidoczne, a użytkownicy 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 badań, 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, wystarczy przypisać atrybutowi VALUE nową wartość.

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.

<p>Proszę wybrać plik do przesłania na serwer <input type="file" name="fileupload" /></p>

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ć przesłany. Jeśli użyjesz atrybutu VALUE, to teoretycznie będziesz w stanie podać nazwę pliku, 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

0x01 graphic

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

</form>

</form>

</form>

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 <INPUT>, 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ć:

Wypełnij ankietę

Lubię pantomimę gdyż (zaznacz odpowiednie pola):

Jest fajna <input type="Checkbox" name="dlaczegolubie" value="fajna" />

Spotykam interesujących ludzi <input type="Checkbox" name="dlaczegolubie" value="ludzie" />

Robię to co lubię <input type="Checkbox" name="dlaczegolubie" value="zainteresowania" />

Płacą mi za to <input type="Checkbox" name="dlaczegolubie" value="kasa" />

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:

<input type="Radio" name="trudnosc" value="makijaz" />Robienie makijażu

<input type="Radio" name="trudnosc" value="kostium" />Noszenie specjalnego kostiumu

<input type="Radio" name="trudnosc" value="rozmowa" />Konieczność zachowania milczenia

Następnie dodaj do formularza element, który umożliwi użytkownikom przesyłanie plikó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, zmieniając wartość tego pola każdego dnia. Po dodaniu ukrytego pola, zakończ formularz odpowiednim znacznikiem zamykającym.

Prześlij zdjęcie swojej gry!

</form>

Pozostałe dwa formularze będą znacznie prostsze. Stworzenie drugiego wymaga dodania 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:

Wejście dla obszaru dla użytkowników!

Nazwa użytkownika: <input type="Text" name="nazwa" maxlength="20" />

Hasło użytkownika: <input type="Password" name="haslo" size="10" maxlength="10" />

</form>

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.

Przeszukaj naszą bazę danych <input type="Text" name="szukaj" />

</form>

Formularze, umieszczone na nich elementy kontrolne oraz wszelkie inne informacje, są już gotowe, jednak aby ładnie wyglądały, będziesz musiał je sformatować.

0x01 graphic

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ąć zainteresowanie 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Akademia Pantomimy</title>

</head>

<body>

</div>

Przejdźmy teraz dalej, do obrazów oraz formularzy. Zauważ, że dwa formularze są krótkie, a jeden długi. Wyobraź 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 sposó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 wierszy. W przedstawionym poniżej fragmencie kodu umieściłam komentarze, opisujące znaczenie każdego wiersza i kolumny tabeli.

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

Teraz umieść wszystkie obrazy, formularze oraz ich elementy w odpowiednich miejscach tabeli i zakończ tworzenie strony.

0x01 graphic

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Akademia Pantomimy</title>

</head>

<body>

</div>

<tr>

<tr>

<td colspan="2">Wypełnij ankietę</td>

</tr>

<tr>

<td colspan="2">Lubię pantomimę gdyż (zaznacz odpowiednie pola):</td>

</tr>

<tr>

<td>Jest fajna <input type="Checkbox" name="dlaczegolubie" value="fajna" /></td>

</tr>

<tr>

<td>Spotykam interesujących ludzi <input type="Checkbox" name="dlaczegolubie" value="ludzie" /></td>

</tr>

<tr>

<td>Robię to co lubię <input type="Checkbox" name="dlaczegolubie" value="zainteresowania" /></td>

</tr>

<tr>

<td>Płacą mi za to <input type="Checkbox" name="dlaczegolubie" value="kasa" /></td>

</tr>

<tr>

<td colspan="2">Najtrudniejszą rzeczą w byciu mimem jest:</td>

</tr>

<tr>

<td><input type="Radio" name="trudnosc" value="makijaz" />Robienie makijażu</td>

</tr>

<tr>

<td><input type="Radio" name="trudnosc" value="kostium" />Noszenie specjalnego kostiumu</td>

</tr>

<tr>

<td><input type="Radio" name="trudnosc" value="rozmowa" />Konieczność zachowania milczenia</td>

</tr>

<tr>

<td colspan="2">Prześlij zdjęcie swojej gry!</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td colspan="2" align="center">Wejście dla obszaru dla użytkowników!</td>

</tr>

<tr>

<td>Nazwa użytkownika:</td>

</tr>

<tr>

<td>Hasło użytkownika:</td>

</tr>

<tr>

</tr>

</form>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td>Przeszukaj naszą bazę danych</td>

</tr>

<tr>

</tr>

</form>

</table>

</td>

</tr>

</table>

</body>

</html>

Gotowa strona, zawierająca różne elementy kontrolne, została przedstawiona na rysunku 17.10.

0x08 graphic

0x01 graphic

Rysunek 17.10.

Na stronie Akademii Pantomimy zostały umieszczone trzy formularze

0x01 graphic

Zastosowanie innych elementów kontrolnych

Oprócz elementów kontrolnych, które można stworzyć przy użyciu znacznika <INPUT>, istnieją trzy inne elementy, tworzone za pomocą innych znaczników.

Zastosowanie znacznika <BUTTON>

Przyciski tworzone przy użyciu znacznika <BUTTON> są podobne do przycisków kreowanych przy wykorzystaniu znacznika <INPUT>, 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.

0x01 graphic

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 <BUTTON> i dodać do niego atrybut NAME. 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 otwierający, za nim wpisać tekst, jaki ma zostać wyświetlony na przycisku i zakończyć go znacznikiem zamykającym (</BUTTON>). Przedstawiony poniżej fragment kodu definiuje 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 <BR>, aby każdy z nich został wyświetlony w osobnym wierszu i odsunięty od pozostałych.

<button name="przycisksubmit" type="submit"><b>Wyślij</b> formularz </button><br /><br />

<button name="przyciskreset" type="reset"><u>Wyczyść</u> zawartość formularza </button><br /><br />

<button name="zwyczajnyprzycisk" type="button">Sprawdź <code>dane</code> </button>

Rysunek 17.11.

Znacznik <BUTTON> pozwala na umieszczanie wewnątrz przycisku treści i innych elementów HTML

0x01 graphic

Ze względu na to, iż wewnątrz elementu BUTTON można umieszczać inne elementy HTML, przedstawiony poniżej kod jest całkowicie poprawny:

<button name="przycisksubmit" type="submit"><b>Wyślij</b> formularz </button><br /><br />

Użycie znacznika <B> 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 <IMG> wewnątrz elementu BUTTON, jak pokazałam w poniższym przykładzie:

Duże pola tekstowe tworzone przy użyciu znacznika <TEXTAREA>

Znacznik <TEXTAREA> tworzy duże pola tekstowe, w których użytkownicy mogą wpisywać tyle danych, na ile im pozwolisz. Aby stworzyć taki element kontrolny, zapisz otwierający znacznik <TEXTAREA> i dodaj do niego atrybut NAME, określający nazwę pola oraz atrybuty ROWS i COLS. Dwa ostatnie atrybuty są wymagane i określają obszar, jaki zajmie pole, definiując go jako ilość wierszy i kolumn. Można także zdefiniować tekst, który się pojawi wewnątrz pola, jako jego wartość początkową. Po nim powinieneś umieścić zamykający znacznik </TEXTAREA>, który zakończy cały element. Rysunek 17.12 przedstawia przykład takiego wielowierszowego pola tekstowego.

<p>Proszę wpisać komentarze dotyczące obsługi użytkownika.

<textarea name="pytanie4" rows="10" cols="40">Tutaj wpisz swój komentarz</textarea>

</p>

0x01 graphic

Możesz się zastanawiać, gdzie się podział znacznik <ISINDEX>. Znacznik ten, podobnie jak znacznik <INPUT>, 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ć: <ISINDEX 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 OPTGROUP.

Aby stworzyć listę rozwijaną zawierającą opcje zdefiniowane przez elementy OPTION, powinieneś w pierwszej kolejności zapisać otwierający znacznik <SELECT> z atrybutem NAME:

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

<option>Polska</option>

<option>Litwa</option>

<option>Ukraina</option>

<option>Białoruś</option>

Teraz możesz zakończyć listę zamykającym znacznikiem </SELECT>:

<p>Wybierz położenie:

<option>Polska</option>

<option>Litwa</option>

<option>Ukraina</option>

<option>Białoruś</option>

</select>

</p>

Na rysunku 17.13 przedstawiłam rozwijaną listę zawierającą cztery elementy.

Rysunek 17.13.

Stosując element SELECT można tworzyć rozwijane listy

0x01 graphic

Aby stworzyć listę przewijaną, wystarczy dodać do otwierającego znacznika <SELECT> 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

0x01 graphic

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, należy posłużyć się atrybutem VALUE znacznika <OPTION>. 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 Koszykówka w weekend 499 — wartość kw499.

<option value="p101">Programowanie 101</option>

<option value="e312">Ekonomia 312</option>

<option value="wf221">Wychowanie fizyczne 221</option>

<option value="kw499">Koszukówka w weekend 499</option>

</select>

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

<option value="p101">Programowanie 101</option>

<option value="e312">Ekonomia 312</option>

<option value="wf221" selected>Wychowanie fizyczne 221</option>

<option value="kw499">Koszykówka w weekend 499</option>

</select>

Po wyświetleniu powyższej listy, będzie w niej początkowo zaznaczona opcja Wychowanie 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 <SELECT>, przedstawiony w poniższym przykładzie:

0x01 graphic

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ć, naciskają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 powinien także zawierać elementy OPTION, jak pokazałam w poniższym przykładzie.

<option>Wychodzenie z zatopionego okrętu podwodnego</option>

<option>Szachy głębionowe</option>

</optgroup>

<option>Skoki z parasolem</option>

<option>Skoki Bunji z szybowca</option>

</optgroup>

</select>

0x01 graphic

Element OPTGROUP nie jest obsługiwany przez najnowsze wersje przeglądarek Internet Explorer ani Netscape Navigator.

Dodatkowe elementy

Stworzyłeś już wszystkie elementy kontrolne formularzy, które mogą pobierać informacje 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 formularza. Etykietę należy skojarzyć z elementem kontrolnym formularza za pomocą atrybutu FOR. Aby stworzyć etykietę, zapisz w kodzie strony znacznik <LABEL> 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 skojarzyć etykietę. Następnie wpisz tekst etykiety i zamykający znacznik </LABEL>. Poniżej przedstawiłam przykład etykiety:

<label for="pole">Kto jest Twoim ulubionym skoczkiem narciarskim?</label>

0x01 graphic

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, zauważ, że są one wyświetlane wraz z tymi elementami

0x01 graphic

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.

<label>Nazwa użytkownika: <input type="text" name="usr" /></label>

Grupowanie elementów przy wykorzystaniu
znaczników <FIELDSET> oraz <LEGEND>

Element FIELDSET tworzy grupy elementów kontrolnych formularzy, wyświetlane w przeglądarce. Element LEGEND tworzy etykietę dla elementu FIELDSET. Aby stworzyć element FIELDSET, umieść w kodzie strony otwierający znacznik <FIELDSET>, a następnie element LEGEND, jak pokazałam w poniższym przykładzie:

<legend>Desery lodowe</legend>

0x01 graphic

Ani element FIELDSET, ani LEGEND nie jest dostępny w przeglądarce Netscape Navigator.

Zauważ, że element LEGEND zawiera tekst, można w nim także umieścić wewnątrzwierszowe elementy HTML służące do formatowania tekstu. Następnie dodaj do kodu elementy kontrolne formularza i zakończ wszystko zamykającym znacznikiem </FIELDSET>. Rezultaty przedstawiłam na rysunku 17.16.

<legend>Desery lodowe</legend>

<label>Jabłkowo-cynamonowy <input type="Radio" name="jabcyn" /></label><br />

<label>Karmelowo-waniliowy <input type="Radio" name="karwan" /></label><br />

<label>Owoce leśne <input type="Radio" name="lesny" /></label><br />

<label>Tropikalna uczta <input type="Radio" name="trop" /></label>

</fieldset>

Rysunek 17.16.

Elementy FIELDSET oraz LEGEND umożliwiają określanie logicznej organizacji formularza

0x01 graphic

Modyfikacja domyślnej kolejności poruszania się pomiędzy elementami

Wykorzystanie klawiatury do poruszania się po aplikacjach może znacznie ułatwić wypełnianie formularzy. Naciskając klawisz Tab, możesz poruszać się pomiędzy poszczególnymi elementami kontrolnymi formularza w ściśle określonej kolejności.

0x01 graphic

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ł dodany atrybut TABINDEX.

<p>Wpisz swoje imię: <input type="text" name="imie" tabindex="1" /></p>

Stosowanie klawiszy dostępu

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

<p>Czym się interesujesz?</p>

<p>Sportami<input type="checkbox" name="sport" accesskey="S" /></p>

<p>Muzyką<input type="checkbox" name="muzyka" accesskey="M" /></p>

<p>Kinematografią<input type="checkbox" name="kino" accesskey="K" /></p>

0x01 graphic

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żytkownikom możliwości wykorzystania ich lub wpisywania w nich informacji. Aby wyłączyć element formularza, należy użyć atrybutu DISABLED. Przykład jego zastosowania przedstawiłam w poniższym fragmencie kodu:

<p>Jaki jest sens życia?

Tutaj wpisz swoją odpowiedź.

</textarea>

</p>

Po wyświetleniu w przeglądarce, tekst umieszczony w polu będzie miał jasnoszary kolor, 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.

<p>Jaki mamy miesiąc: <input type="Text" name="mies" value="Kwiecień" readonly /></p>

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

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 zawartości nie można zmieniać

0x01 graphic

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. Zostaną 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ć pytania dotyczące osoby odwiedzającej stronę, a druga — pytania dotyczące osoby poszukiwanej. Ten układ wręcz doskonale nadaje się do wykorzystania elementów FIELDSET.

Utwórz zatem pierwszy element FIELDSET. Zapisz otwierający znacznik <FORM>, dodaj do niego znacznik <FIELDSET> oraz cały element LEGEND, tak jak pokazałam w poniższym przykładzie:

<legend>Powiedz nam o sobie</legend>

Następnie dodaj etykietę listy, samą listę oraz wszystkie jej opcje. Podczas tworzenia listy dodaj do niej atrybuty TABINDEX oraz ACCESSKEY.

<label for="lista1">Mój ulubiony środek transportu to...</label>

<option value="-1">Wybierz jedną z opcji</option>

<option value="1">Samochód służbowy</option>

<option value="2">Riksza rowerowa</option>

<option value="3">Hulajnoga</option>

</select>

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

<label for="lista2">Lubię długie spacery ...</label>

<option value="-1">Wybierz jedną z opcji</option>

<option value="pola">Po polach kukurydzy na mojej farmie</option>

<option value="ulice">Po ulicach mego miasta</option>

<option value="plaza">Po mojej prywatnej plaży</option>

<option value="kuchnia">Do lodówki w kuchni</option>

</select>

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

<label for="poletekst1">Dlaczego?</label>

</fieldset>

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

<legend>Czego poszukujesz?</legend>

<label for="lista3">Chciałbym, aby ta druga osoba...</label>

<option>oglądała ze mną filmy</option>

<option>szukała prawdziwego związku</option>

<option>była romantyczna</option>

<option>czyściła klatkę mojej papużki</option>

</select>

<label for="poletekst2">Opisz swego idealnego partnera.</label>

</fieldset>

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 </FORM>. Zauważ, iż przyciski tworzę przy użyciu znacznika <BUTTON>, nadając im postać graficzną.

</button>

</button>

</form>

Teraz, gdy formularz został utworzony, możesz umieścić na początku strony grafikę tytuł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:

0x01 graphic

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>System Swatający</title>

</head>

<body>

</div>

<legend>Powiedz nam o sobie</legend>

<label for="lista1">Mój ulubiony środek transportu to...</label>

<option value="-1">Wybierz jedną z opcji</option>

<option value="1">Samochód służbowy</option>

<option value="2">Riksza rowerowa</option>

<option value="3">Hulajnoga</option>

</select>

<br />

<label for="lista2">Lubię długie spacery ...</label>

<option value="-1">Wybierz jedną z opcji</option>

<option value="pola">Po polach kukurydzy na mojej farmie</option>

<option value="ulice">Po ulicach mego miasta</option>

<option value="plaza">Po mojej prywatnej plaży</option>

<option value="kuchnia">Do lodówki w kuchni</option>

</select>

<br />

<label for="poletekst1">Dlaczego?</label>

</fieldset>

</td>

<legend>Czego poszukujesz?</legend>

<label for="lista3">Chciałbym, aby ta druga osoba...</label>

<option>oglądała ze mną filmy</option>

<option>szukała prawdziwego związku</option>

<option>była romantyczna</option>

<option>czyściła klatkę mojej papużki</option>

</select>

<br />

<label for="poletekst2">Opisz swego idealnego partnera.</label>

</fieldset>

</td>

</tr>

</table>

<table>

<tr>

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

</td>

</tr>

<tr>

<td>Czy zapłacisz nam za usługę?

</td>

</tr>

</table>

<tr>

<td>

</button>

</td>

<td>

</button>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Postać wynikowej strony WWW została przedstawiona na rysunku 17.18.

0x08 graphic

0x01 graphic

Rysunek 17.18.

Dodatkowe elementy formularzy na stronie Systemu Swatającego

0x01 graphic

Planowanie formularzy

Zanim zaczniesz utworzyć skomplikowane formularze na swoich stronach WWW, powinieneś poświęcić nieco uwagi na ich zaplanowanie. W przyszłości pozwoli Ci to zaoszczę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 kontrolnych. 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 tekstowego będzie lekką przesadą. Postaraj się ułatwić zadanie osobom, które będą wypełniały formularz i spróbuj dopasować typy pól do zadawanych pytań. Dzięki temu, analiza 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 formularza, 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 wprowadzonych w formularzu przy wykorzystaniu skryptów. Sprawdzając poprawność informacji 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 formularza na serwer będą zgodne z oczekiwaniami. Wykorzystując wbudowane zdarzenia, takie 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 kontrolnych, z którymi użytkownicy oglądający Twą witrynę mogą prowadzić interakcję. Formularze 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ę uniknąć tej konieczności i przejść na inną witrynę. Zatem będziesz musiał dać im dobry powód, usprawiedliwiający trud związany z wypełnianiem formularza!

W tabeli 17.1 podsumowałam znaczniki HTML przedstawione w tym rozdziale. Zapamiętaj podane poniżej informacje, a nic nie powinno Ci sprawić problemów.

Do tworzenia formularzy używaj elementu FORM.
W znaczniku <FORM> zawsze definiuj atrybut ACTION.
Twórz elementy kontrolne formularzy posługując się znacznikiem <INPUT> lub innymi, odpowiednimi znacznikami.
Dokładnie testuj tworzone formularze.

Tabela 17.1.

Znaczniki HTML przedstawione w rozdziale 17.

Znacznik/atrybut	Zastosowanie
<FORM>	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 <FORM> określający (przy użyciu adresu URL) skrypt uruchamiany na serwerze i służący do przetwarzania danych z formularza.
METHOD	Atrybut znacznika <FORM> określający sposób przesyłania danych z formularza na serwer. Wartości, jakie można przypisać temu atrybutowi to: post i get.
<INPUT>	Element formularzy, tworzący element kontrolny, w którym użytkownicy mogą wpisywać informacje.
TYPE	Atrybut znacznika <INPUT> 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.
<BUTTON>	Tworzy przycisk, którego zawartością może być kod HTML.
<TEXTAREA>	Tworzy wieloliniowe pole tekstowe.
<SELECT>	Zwyczajna lub rozwijalna lista opcji. Poszczególne opcje są definiowane przy użyciu znacznika <INPUT>.
<OPTION>	Tworzy opcję umieszczaną wewnątrz elementu SELECT.
<LABEL>	Definiuje etykietę kojarzoną z elementem kontrolnym formularza.
<FIELDSET>	Grupuje elementy kontrolne formularzy.
<LEGEND>	Określa tytuł elementu FIELDSET.

Warsztat

Jeśli dotarłeś do tego miejsca, sądzę, że będziesz miał jeszcze kilka pytań. W tej części rozdziału przedstawiłam kilka potencjalnych pytań, które, jak sądzę, mogą Cię zainteresować. Następnie będziesz mógł przetestować swoje zdolności przyswajania informacji, odpowiadając na kilka pytań quizowych i rozszerzyć swoją wiedzę, wykonując dwa proste ćwiczenia.

Pytania i odpowiedzi

P. Chciałbym zaprojektować formularz, który później będzie można łatwo przeanalizować przy wykorzystaniu arkusza kalkulacyjnego lub bazy danych. W jaki sposób zaprojektować formularz, tak aby jego analiza była prostsza?

O. W pierwszej kolejności upewnij się, że dla każdego elementu formularza została zdefiniowana wartość domyślna. Dzięki temu ilość pól przesyłanych na serwer będzie stała, a to z kolei znacznie ułatwi importowanie danych z formularza do arkusza kalkulacyjnego. Nie obawiaj się wykorzystania wartości, które będzie można przetwarzać w sposób programowy. Na przykład, dzięki wykorzystaniu atrybutu VALUE można sprawić, aby wszystkie odpowiedz „Tak” miały wartość 1, a odpowiedzi „Nie” — wartość 0. W ten sposób, po wprowadzeniu danych do arkusza kalkulacyjnego, można wyświetlić je w formie grafu operującego na wartościach 1 i 0 i nie trzeba będzie obsługiwać wartości tekstowych. Można także stosować wiele innych sztuczek, takich jak specjalne tablice konwertujące wartości podane w formularzu. Eksperymentując, możesz określić, jakie dane będą dla Ciebie najwygodniejsze i najlepiej będą się nadawały do wykorzystania w skrypcie.

P. Chciałbym stworzyć formularz i przetestować go, lecz nie ma jeszcze gotowego odpowiedniego skryptu. Czy istnieje jakiś sposób umożliwiający sprawdzenie poprawności przesyłanych informacji bez wykorzystania skryptu?

O. Bardzo często znajduję się w takiej sytuacji! Na szczęście rozwiązanie tego problemu jest bardzo proste.

Zmodyfikuj atrybut ACTION umieszczony w otwierającym znaczniku <FORM>, umieszczając w nim słowo mailto oraz swój adres poczty elektronicznej, jak pokazałam w poniższym przykładzie:

Teraz możesz wypełnić swój testowy formularz i przesłać go bez konieczności używania jakiegokolwiek skryptu. Gdy wyślesz formularz, jego zawartość zostanie przesłana pocztą elektroniczną pod wskazany adres w formie załącznika do listu. Wystarczy, że otworzysz ten załącznik w dowolnym edytorze tekstowym i gotowe! Tak oto możesz zobaczyć przesłane informacje.

P. Słyszałem, że aktualnie toczy się dyskusja na temat wersji 4.01 języka HTML. Czy będą w niej wprowadzone jakieś zmiany dotyczące formularzy?

O. HTML 4.01 jest aktualnie rozpatrywany przez W3C jako proponowane zalecenie (Proposed Recommendation), jednak nie ma w nim żadnych poważniejszych zmian dotyczących formularzy. Poniżej przedstawiłam modyfikacje, które zostały zaproponowane.

Dodanie atrybutu NAME od znacznika <FORM>. Zmiana ta ma na celu zapewnienie zgodności z wcześniejszymi wersjami języka oraz możliwości odwoływania się do formularzy w skryptach, przy użyciu ich nazwy (wartości atrybutu NAME).

Usunięcie odnośnika do opisu oraz przykładu użycia adresu typu mailto: jako wartości atrybutu ACTION elementu FORM. Nie wiadomo, czy spowodowałoby to usunięcie możliwości obsługi tej czynności. Tekst zalecenia wskazuje, że implementacja wszelkich czynności związanych z obsługą formularzy leży wyłącznie w gestii twórców przeglądarek.

Dodanie brakującego atrybutu ISMAP do znacznika <INPUT> w celu dodania obsługi map odnośników przetwarzanych na serwerze.

Dodanie komentarza do elementu SELECT, wyjaśniającego, że w przypadku, gdy w elemencie nie zostanie wybrana żadna opcja, żadne dane z tego elementu nie są przesyłane na serwer w momencie wysyłania formularza.

Quiz

Ile formularzy można umieścić na jednej stronie WWW?
W jaki sposób tworzy się elementy kontrolne formularzy, takie jak przyciski opcji lub pola wyboru?
Czy hasła podawane przy użyciu elementu password są przesyłane w bezpieczny sposób?
Wyjaśnij korzyści płynące z wykorzystania pól ukrytych.
Jakie inne technologie są wykorzystywane przy obsłudze formularzy?

Odpowiedzi

Teoretycznie rzecz biorąc, jedynym ograniczeniem jest ilość pamięci na komputerze użytkownika, jednak formularzy nie można zagnieżdżać. Należy także pamiętać o tym, iż każdy element kontrolny formularzy zajmuje nieco miejsca w pamięci. Znalazłam się raz w sytuacji, gdy cała wolna pamięć komputera została zajęta poprzez umieszczenie na formularzu zbyt wielu elementów.
Te elementy formularzy są tworzone przy użyciu znacznika <INPUT>.
Absolutnie nie!
Ukryte pola formularza są raczej wykorzystywane przez jego autora, niż przez osoby, które wypełniają formularz. Dzięki użyciu unikalnych wartości atrybutu VALUE możesz rozróżniać dane pochodzące z różnych formularzy, lecz obsługiwane przez jeden skrypt CGI, lub dane przesyłane w różnym czasie.
Aby obsłużyć informacje wpisane w formularzu, konieczne jest wykorzystanie skryptu CGI wykonywanego na serwerze. Adres tego skryptu podawany jest jako wartość atrybutu ACTION. Skrypty CGI są zazwyczaj pisane w języku Perl lub innym języku skryptowym.

Ćwiczenia

Sprawdź, czy Twój dostawca usług internetowych udostępnia jakieś skrypty CGI, które możesz wykorzystać do obsługi formularzy. Jeśli udostępnia takie skrypty, to zapytaj się, w jaki sposób przetwarzają one informacje oraz jakie nazwy powinieneś nadawać elementom kontrolnym formularzy. Jeśli potrzebujesz formularzy, a Twój dostawca usługi, internetowych nie pozwala na stosowanie skryptów CGI, to powinieneś poszukać innego dostawcy.

Poszukaj witryn wykorzystujących formularze i odwiedź kilka z nich, na przykład, http://www.onet.com. Zobacz, jakie elementy kontrolne są używane w tych formularzach i w jaki sposób zostały rozmieszczone na stronie. Nie omieszkaj przejrzeć kodu źródłowego tych formularzy.

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

Rozdział 17. Projektowanie formularzy 515

Pole

tekstowe

Pole hasła

Przycisk Submit

Przycisk Reset

Znacznik <FORM> powoduje złamanie wiersza

Przycisk graficzny

Wpisz ścieżkę
oraz nazwę pliku

Kliknij ten przycisk, aby poszukać pliku
na komputerze

pole hasła pole tekstowe pierwszy formularz

pole wyboru

przycisk
graficzny

przycisk opcji

przycisk Submit

przycisk Reset

element
wyboru pliku

drugi formularz

trzeci formularz

tekst sformato-wany znacznikami HTML

Pole tekstowe

etykieta

obszar elementu FIELDSET

Element przezna-czony tylko do odczytu

Element wyłączony

element SELECT

tworzący listę

element SELECT tworzący listę rozwijaną

wieloliniowe pole tekstowe

elementy BUTTON z obrazami

Element
tylko do odczytu

Element
wyłączony

R-17-07, Programowanie, ! HTML, HTML 4 - Vademecum