1 Aplikacje internetoweProjektowanie formularzy Część 1

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

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

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

5 Przykład strony z formularzem

6 Definiowanie formularzaFormularz w języku XHTML definiujemy elementem form. Element ten należy do grupy elementów blokowych. Pomiędzy znacznikami

7 Definiowanie formularzaElement 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.

8 Definiowanie formularzaZnaczniki definiujące formularz

9 Etykiety pól Znacznik definiuje tekstową etykietę pola formularza. Składnia tego elementu jest następująca: Imię:

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

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

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

Imię:

13 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

Adres

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

Hasło:

15 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ę: Wynikiem zastosowania omawianego znacznika jest umieszczenie w formularzu standardowego przycisku graficznego. Przykład

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

17 Przyciski przesyłania danych i czyszczenia pólPrzyciski 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: Przycisk wyczyszczenia pól formularza:

18 Przyciski przesyłania danych i czyszczenia pólKliknięcie przycisku przesłania danych powoduje przekazanie wprowadzonych informacji do programu obsługi wymienionego w atrybucie action znacznika