Projektowanie formularzy.pdf

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 podaw

ane

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 ty

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 nas

zelkich możliwych formularzy HTML, w tym:

tępujące zagadnienia, które pozwolą Ci na tworzenie

w jaki sposób formularze HTM

zapewnienia interaktywności,

L współpracują ze skryptami na serwerze w celu

tworzenie prostego formularza, aby poznać zasady ich konstrukcji,

przedstawienie wszelkich dostępnych form elementów kontrolnych formularz

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

m rozdziale nie

zapomnę wskazać wszelkich, dotyczących problemów, zgodności przeglądarek.

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

j o wygląd i przydatność.

e elementy nie są częścią samego formularza, jednak mogą poprawić

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 zawi

erał. 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 ser

odpowiedni skrypt, który pobierze i zapisze dane lub przetworzy je w inny sposób.

werze

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, jedna

Formularz HTML pozwala na

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

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

znaczenie:

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

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óź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 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 <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ą 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.

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

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

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

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: