Aplikacje internetowe

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 Submitoraz 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ą elementyinput, button, select, optgroup, option, textarea, label, fieldsetorazlegend. • 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łuHTTP. Dwoma dopuszczalnymi wartościami getoraz 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: <labelfor="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ę: <inputtype="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ę: <inputtype="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="Kupujteraz!" />

Przyciski • Aby można było wykorzystać dany przycisk w jakiś racjonalny sposób, trzeba przypisać jego zdarzeniu onclickodpowiednią 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="Kupujteraz!" 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: <inputtype="submit" id="identyfikator_pola" name="nazwa_pola" [value="opis_przycisku"]/> • Przycisk wyczyszczenia pól formularza: <inputtype="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 onclicki 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: <textareaid="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>

Aplikacje internetowe