R 17 07, HTML
[ Pobierz całość w formacie 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
ws
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
y,
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ć
eg
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"
<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
.
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.
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:
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
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ś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ę:
<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>
[ Pobierz całość w formacie PDF ]