Rozdział 17. u Projektowanie formularzy              515

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:

n   w jaki sposób formularze HTML współpracują ze skryptami na serwerze w celu zapewnienia interaktywności,

n   tworzenie prostego formularza, aby poznać zasady ich konstrukcji,

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

n   zastosowanie bardziej zaawansowanych elementów kontrolnych formularzy, które zadziwią Twych przyjaciół i współpracowników,

n   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ść.

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.

<!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 action="http://www.jakisurl.com.pl/cgi-bin/wejscie.cgi" method="post">

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

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.

<form action="http://www.jakisurl.com.pl/cgi-bin/wejscie.cgi" method="post">

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:

<form action="http://www.jakisurl.com.pl/cgi-bin/wejscie.cgi" method="post">

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.

<form action="http://www.jakisurl.com.pl/cgi-bin/wejscie.cgi" method="post">

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

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

<input type="Submit" value="Wchodzę!" />

<input type="Reset" value="Oops!" />

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

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

<table border="0">

  <tr>

    <td><img src="sign.gif" width="174" height="200" /></td>

    <td align="center"><img src="arrow.gif" width="85" height="100" />

    <br />

    <img src="hole.gif" width="143" height="58" /></td>

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

<table border="0">

<tr>

  <td></td>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

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

<table border="0">

  <form action="http://www.jakisurl.com.pl/cgi-bin/wejscie.cgi" method="post">

  <tr>

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

    <td width="50%"> <input type="Text" name="imie" /></td>

  </tr>

  <tr>

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

    <td><input type="Password" name="haslo" /></td>

  </tr>

  <tr>

    <td></td>

    <td></td>

  </tr>

  <tr>

    <td align="center"><input type="Submit" value="Wchodzę!" /></td>

    <td align="center"><input type="Reset" value="Oops!" /></td>

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