Aplikacje internetowe Projektowanie formularzy Część 1

Wstęp Projektowane do pory strony WWW zapewniały nam przepływ informacji w jedną stronę. 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. Formularze były obecne niemal od samego początku istnienia języka HTML i są dobrze obsługiwane przez wszystkie najpopularniejszej przeglądarki.

Forma i funkcja formularzy Przede wszystkim powinniśmy 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.

Forma i funkcja formularzy 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.

Przykład strony z formularzem

Definiowanie formularza Formularz w języku XHTML definiujemy elementem form. Element ten należy do grupy elementów blokowych. Pomiędzy znacznikami <form> oraz </form> umieszczamy zawartość formularza, na którą składają elementy input, button, select, optgroup, option, textarea, label, fieldset oraz legend. Kontrolki te składamy, stosując akapity oraz elementy div.

Definiowanie formularza Element form ma własne atrybuty charakterystyczne, najważniejsze to action (obowiązkowy) i method. Atrybut action ustala on adres URL skryptu, który będzie wywołany po zatwierdzeniu formularza przyciskiem Wyślij. Dane wprowadzone do formularza zostaną przekazane do podanego skryptu. Atrybut method, określa sposób przekazania danych jego wartością jest nazwa metody protokołu HTTP. Dwoma dopuszczalnymi wartościami get oraz post.

Definiowanie formularza Znaczniki definiujące formularz <form action="#" method="post">...</form>

Etykiety pól Znacznik <label> definiuje tekstową etykietę pola formularza. Składnia tego elementu jest następująca: <label for="identyfikator_odpowiedniego_znacznika> Treść_etykiety </label> Poniższy kod zawiera definicję etykiety dla pola tekstowego. <p><label for="FirstName">Imię: </label> <input type="text" id="FirstName" name="FirstName" value="" size="30" maxlength="40"></p>

Etykiety pól Znacznik <label> służy przede wszystkim do ułatwienia posługiwania się formularzem. Atrybut for znacznika <label > gwarantuje, że użytkownik będzie mógł poprawnie przypisać etykietę do danego pola.

Pola tekstowe Najczęściej wykorzystywanymi polami formularza są zwykłe pola tekstowe. Umożliwiają one użytkownikowi wprowadzanie tekstu o niedużych rozmiarach — imion, nazwisk, adresów, szukanych słów itp. Znacznik pola tekstowego ma następującą składnię: <input type="text" id="nazwa_pola" value="wartość_początkowa" size="rozmiar_pola" maxlength="maksymalna_liczba_znaków" />

Pola tekstowe Poniższy kod definiuje pole tekstowe przeznaczone do wprowadzania wartości imienia. Szerokość pola jest wyrażona w znakach i w tym przypadku odpowiada 30 znakom. Długość wprowadzanej wartości nie może jednak przekroczyć 40 znaków. Dla kontrolki nie została wyznaczona wartość początkowa. <p>Imię: <input type="text" id="username" value="" size="30" maxlength="40" /></p>

Pola tekstowe W kolejnym przykładzie kodu zostało zdefiniowane pole tekstowe przeznaczone do wpisywania adresu poczty elektronicznej. Na ekranie zajmuje ono obszar 40 znaków, umożliwia wprowadzenie 40 znaków tekstu i zawiera początkową wartość w postaci ciągu tekstowego email@przyk1ad.com. <p>Adres e-mail: <input type="text" id="email" value="email@przyklad.com" size="40" maxlength="40" /></p>

Pola haseł Pola haseł są w działaniu zbliżone do pól tekstowych. Jedyna różnica polega na tym, że użytkownik nie może zobaczyć wprowadzanego tekstu — w polu są wyświetlane znaki gwiazdek. Zastosowanie przedstawionego poniżej kodu powoduje umieszczenie na stronie pola hasła, w którym można wpisać maksymalnie 20 znaków. <p>Hasło: <input type="password" id="password" value="" size="20" maxlength="20"></p> W polach haseł można używać tych samych atrybutów co w zwyczajnych polach tekstowych.

Przyciski Niekiedy zachodzi konieczność umieszczenia w formularzu dodatkowego przycisku. W takim przypadku można wykorzystać kontrolkę przycisku, której kod ma następującą składnię: <input type="button" id="nazwa_przycisku" name="nazwa_przycisku" value="opis_przycisku" /> Wynikiem zastosowania omawianego znacznika jest umieszczenie w formularzu standardowego przycisku graficznego. Przykład <input type="button" id="BuyNow" name="buy_button" value="Kupuj teraz!" />

Przyciski Aby można było wykorzystać dany przycisk w jakiś racjonalny sposób, trzeba przypisać jego zdarzeniu onclick odpowiednią procedurę skryptową. Przykładem może tu być kolejny kod, który powoduje wykonanie funkcji buynow po kliknięciu przycisku przez użytkownika. <input type="button" id="BuyNow" name="buy_button" value="Kupuj teraz!" onclick="buynow()" />

Przyciski przesyłania danych i czyszczenia pól Przyciski przesyłania danych i czyszczenia pól udostępniają mechanizmy, za pomocą których użytkownicy mogą przekazać wprowadzone dane do serwera lub przywrócić zawartość pól formularza do stanu początkowego. Przycisk przesłania danych: <input type="submit" id="identyfikator_pola" name="nazwa_pola" [value="opis_przycisku"] /> Przycisk wyczyszczenia pól formularza: <input type="reset" id="identyfikator_pola" name="nazwa_pola" [value="opis_przycisku"] />

Przyciski przesyłania danych i czyszczenia pól Kliknięcie przycisku przesłania danych powoduje przekazanie wprowadzonych informacji do programu obsługi wymienionego w atrybucie action znacznika <form>. Zmiana domyślnego sposobu działania przycisku wymaga określenia atrybutu onclick i przypisania mu odpowiedniej procedury skryptowej. Kliknięcie przycisku czyszczenia pól powoduje odświeżenie formularza i przywrócenie jego polom wartości początkowych. Istnieje również możliwość zdefiniowania atrybutu onclick, który spowoduje wywołanie skryptu zamiast odświeżenia formularza.

Obszary tekstowe Aby umożliwić użytkownikowi wprowadzanie dłuższych ciągów tekstowych, można wykorzystać znacznik <textarea>. Pozwala on na wpisanie 1024 znaków w kontrolce obsługującej tekst wielowierszowy. Kod znacznika <textarea> ma następujący format: <textarea id="Identyfikator_pola" name="nazwa_pola" cols="liczba_kolumn" rows="liczba_wierszy"></textarea>

Obszary tekstowe Należy zauważyć, że znacznik <textarea> jest jednym z niewielu znaczników formularzy, który ma swój znacznik zamykający. Jeśli chcemy zdefiniować wstępną zawartość pola, możemy umieścić odpowiedni tekst między znacznikiem początkowym a końcowym elementu. Na przykład zastosowanie poniższego kodu powoduje wyświetlenie obszaru tekstowego ze wstępną zawartością. <textarea cols="50" rows="6"> Jan Kowalski ul. Nieznana 8 12-345 Miasto Polska </textarea>