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 Kowalskiul. Nieznana 812-345 MiastoPolska </textarea>