Przedmiot: Projektowanie dokumentów WWW. Laboratorium 3: Strona domowa cz. III Formularze. Opracował: Maciej Chyliński

Transkrypt

1 Przedmiot: Projektowanie dokumentów WWW Laboratorium 3: Strona domowa cz. III Formularze Opracował: Maciej Chyliński Wstęp W naszym Ŝyciu wypełniamy dziesiątki, a nawet tysiące formularzy. Wynika to z faktu, Ŝe jst to najprostsza forma zdobywania ściśle określonych informacji. Język HTML/XHTML posiada zestaw znaczników, odpowiedzialnych za generowanie elektronicznych formularzy. Formularz jest uŝywany w bardzo wielu przypadkach. Za jego pomocą zdobywamy informacje o odwiedzających stronę, tworzymy ankiety, księgi gości a nawet dokonujemy zakupów w sieciowych centrach handlowych. Ramy formularzy na stronie definiuje znacznik <form></form>. Podobnie jak wcześniej poznane znaczniki, takŝe znacznik <form> posiada szereg atrybutów. Pierwszym atrybutem tego znacznika jest action=, który określa rodzaj akcji, która ma być wykonana po naciśnięciu klawisza OK. Jako wartość action moŝna podać adres odpowiedniego skryptu bądź adres . Dalej mamy atrybut metod=, gdzie określa się metodę, która zostanie uŝyta do wykonania formularza. Do wyboru są dwie metody: post i get. Pierwsza z nich słuŝy do zgłaszania długich zadań do serwera, natomiast get zgłasza krótkie Ŝądania. Przykład definicji ram formularza: <form action=mailto: @domena.pl metod= post ></form> Tak ustawiony formularz wyśle na adres zawartość wszystkich pól, jakie wstawimy w dalszej części.

2 Pola typu input Studia Podyplomowe Formularz elektroniczny, tak jak jego papierowy odpowiednik, składa się z odpowiednich pól słuŝących do róŝnych celów. Pierwsza grupa pól formularza to input czyli formularze pozwalające wprowadzić określone dane. Oto przykład definicji: <input type= name= value= size= maxlength= /> Przyjrzyjmy się bliŝej poszczególnym atryubutom znacznika <input />. Pierwszy znich nosi nazwę type i określa rodzaj pola formularza. Do wyboru a nastepujące typy pól: type= text wstawia zwykłe pole tekstowe type= checkbox wstawia małe okienka, które moŝemy dowolnie zaznaczać. To pole daje moŝliwość zaznaczenia więcej niŝ jednej odpowiedzi. type= radio pole podobne w działaniu do checkbox, z tym Ŝe moŝemy wybrać zaledwie jedną z wielu odpowiedzi. Pamiętaj, ze wszystkie pola tego typu Musą mieć identyczną wartość atrybutu name. type= password pole odpowiedzialne za podanie hasła. Wpisywany tekst jest zamieniany na gwiazdki. type= file pozwala dołączy dowolny plik tekstowy do formularza. type= submit wstawia przycisk do formularza, odpowiada za wykonanie action zdefiniowanego dla formularza. type= reset przycisk, który czyści wszystkie pola formularza. type= hidden wstawia zwykłe pole tekstowe niewidoczne na stronie. type= button określa przycisk dowolnego przeznaczenia. Kolejny atrybut name, określa nazwę danego pola. Pole to jest dość przydatne przy analizowaniu przesłanych danych, bądź przy konfiguracji skryptów. W przypadku wszystkich dostępnych pól wartość tego atrybutu musi być róŝna. NaleŜy pamiętać o jedynym wyjątku, jakim jest pole typu radio w tym przypadku wszystkie pola wchodzące w skład jednej grupy musza mieć identyczna nazwę. Oczywiście na stronie moŝe być kilka grup pól i kaŝda grupa powinna mieć inną nazwę. Value wstawia w dane pole zadeklarowaną wartość. Atrybutu tego moŝna uŝyć do opisania pól formularza lub zadeklarowania jakiejś domyślnej wartości dla danego pola.

3 Atrybut size słuŝy do określania ilości znaków, mieszczących się w widocznej części pola tekstowego. Wpisanie dłuŝszego ciągu znaków w takie pole spowoduje przewinicie jego zawartości; zawartość będzie pokazywana jedynie w jedynie w małej części. Opcja maxlenght ogranicza ilość znaków, jakie moŝna wpisać do zwykłego pola tekstowego, dla którego została zadeklarowana. Oznacza to, Ŝe do pola o pojemności dwudziestu znaków nie da rady wpisać ich więcej. Tworząc formularz zgodny ze specyfikacją języka XHTML, naleŝy pamiętać, Ŝe znacznik <input /> musi posiadać domknięcie. W związku z tym, Ŝe specyfikacja nie przewiduje oddzielnego zamykającego znacznika, musisz skorzystać z zapisu <input />. Przykładowych moŝliwości definicji pól formularza: <input type= text name= Opinia size= 30 value= Kurs mi się podoba /> <input type= password name= Haslo size= 10 maxlenght= 10 /> <input type= checkbox name= Zainteresowania value= Sport /> <input type= submit name= OK value= OK size= 10 /> Rysunek 1. Przykładowe pola formularza typu input. Pole typu select Kolejną grupą pól formularza jest select. Pole tego typu pozwala na wybranie jednej lub kilku pozycji z listy. Jego konstrukcja wygląda następująco:

4 <select name= nazwa_listy > </select> <option>pierwsza pozycja</option> <option>druga pozycja</option> <option>trzecia pozycja</option> W przypadku select, podobnie jak przy polach typu input, moŝemy określić jego nazwę atrybut name. Znacznik <option></option> definiuje jedna pozycję z listy. Taka definicja pola typu select pozwala na wybranie tylko jednej pozycji z naszej listy. Aby dać mozliwoścy wyboru kilku, tą definicję naleŝy uzupełnić o atrybut multiple, zgodnie z tym, co prezentuje podany przykład. Pamiętaj, Ŝe w przypadku strony zgodnej ze specyfikacją XHTML atrybut multiple musi mieć postać taką, jak ta na poniŝszym przykładzie. <select name= nazwa_listy multiple= multiple > <option>pierwsza pozycja</option> <option>druga pozycja</option> <option>trzecia pozycja</option> </select> Ostatnim atrybutem uŝywanym przy polach typu select jest size. Określa on, ile pozycji z listy ma być widocznych na ekranie. Podanie zmiennej jako większej lub równej liczbie pozycji zdefiniowanych w ramach pola pozwoli nam wyeliminować pasek przewijania, pojawiający się z boku pola. <select name= nazwa_listy multiple= multiple size= 5 > <option>pierwsza pozycja</option> <option>druga pozycja</option> <option>trzecia pozycja</option> </select> Na rysunku 2 widać przykład pola typu select w róŝnych wariantach.

5 Rysunek 2. Przykład pól formularza typu select. Pole typu textarea Twórcy języka XHTML i HTML do dyspozycji uŝytkowników oddali jeszcze jeden rodzaj pola, a mianowicie textarea. SłuŜy ono do wprowadzania większej ilości danych. Znacznik ma następującą konstrukcję: <textarea name= opinie rows= 10 cols= 50 >napisz coś do mnie</textarea> Umieszczając tekst pomiędzy znacznikami <textarea></textarea>, moŝemy zasugerować coś potencjalnemu uŝytkownikowi formularza. Rozwiązanie to jest podobne w działaniu do atrybutu value, omawianego przy poprzednich znacznikach typu input. Poprzez dodanie atrybutów rows i cols moŝna regulować wielkość pola. Rysunek 3 przedstawia pole textarea. Rysunek 3. Przykładowe pola formularza typu textarea. Przesyłanie treści formularza Na samym początku, przy określaniu ram formularza, moŝna skorzystać z moŝliwości wysłani go m. Jest to najłatwiejsze rozwiązanie obsługi formularza, ale efekt jaki uzyskamy pozwala wiele do Ŝyczenia. Dalej zamieszczono przykła wysłania formularza o nastepującej treści:

6 Imię: Ania Płeć: Kobieta Wiek: ponad 25 lat Studia Podyplomowe Treść: Oto kolejny przykład... PoniŜszy wynik, jaki trafiłby na podany adres Imie=Ania&Plec=Kobieta&wiek=wiecej_25&Oto+kolejny+przyk%B3%ad+... Dokładnie tak wyglądałaby poczta, którą otrzymalibyśmy na skrzynkę . Forma jest raczej mało zadowalająca. Istnieją specjalne programy, które są w stanie przetworzyć całość na zrozumiałą postać, ale ich stosowanie jest pracochłonne. Dlatego teŝ zaleca się stosowanie odpowiednich skryptów, np. popularnego FormMail, które przetworzą odpowiednio wynik działania formularza, a otrzymana poczta będzie czytelna. Na rysunku 4 widać przykład formularza, będącego ankietą. Rysunek 4. Przykład kompletnego formularza. Jak widać formularz zawiera połączenie większej ilości tekstu oraz kilku pól typu select i input oraz textarea. Na poprzednich stronach omówione zostały wszystkie dostępne pola formularza, dlatego teraz pora zobaczyć jak wygląda i dział on w praktyce.

7 Przygotujmy formularz, w którym uŝyjemy wszystkich dostępnych pól, a całość zostanie wysłana za pomocą specjalnego skryptu. Niech formularz będzie miniankietą dotyczącą danych osobowych i zainteresowań uŝytkownika.

8

9 <script type="text/javascript" language="javascript"></script> <HTML> <BODY class="." BACKGROUND="."> <HEAD> <META HTTP-EQUIV="Page-Exit" CONTENT="blendTrans(Duration=1)"> <META HTTP-EQUIV="Expires" CONTENT="0"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, no-cache, mustrevalidate"> <META HTTP-EQUIV="Cache-Control" CONTENT="post-check=0, precheck=0"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <LINK REL="Stylesheet" HREF="odwołanie do arkusza stylów" TYPE="text/css"> </HEAD> <FORM SUBJECT="Twoje dane" METHOD="post" onreset="if (!confirm('czy na pewno chcesz wyczyścić cały formularz?')) return false" ENCTYPE="text/plain"> <FIELDSET> <LEGEND ALIGN="left"><H2 class=".">dane OSOBOWE</H2></LEGEND> <INPUT NAME="Imię"><B>Podaj swoje imię</b> <INPUT NAME="Nazwisko"><B>Podaj swoje nazwisko</b> <B>Podaj swoją płeć:</b> <INPUT TYPE="radio" NAME="Płeć" VALUE="Kobieta">Kobieta <INPUT TYPE="radio" NAME="Płeć" VALUE="MęŜczyzna">MęŜczyzna <B>Ile masz lat?</b> <INPUT TYPE="radio" NAME="Wiek" VALUE="mniej niŝ 15">mniej niŝ 15 <INPUT TYPE="radio" NAME="Wiek" VALUE="15-19">15-19 <INPUT TYPE="radio" NAME="Wiek" VALUE="20-29">20-29 <INPUT TYPE="radio" NAME="Wiek" VALUE="30-39">30-39 <INPUT TYPE="radio" NAME="Wiek" VALUE="40-60">40-60 <INPUT TYPE="radio" NAME="Wiek" VALUE="więcej niŝ 60">więcej niŝ 60 </FIELDSET>

10 <FIELDSET> <LEGEND ALIGN="left"> <H2 class=".">zainteresowania</h2> </LEGEND> <B>Jaką lubisz muzykę (moŝesz zaznaczyć więcej moŝliwości)?</b> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE="Rock" ID="Rock"> <LABEL FOR="Rock">Rock</LABEL> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE="Heavy Metal" ID="Heavy Metal"> <LABEL FOR="Heavy Metal">Heavy Metal</LABEL> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE="Pop" ID="Pop"> <LABEL FOR="Pop">Pop</LABEL> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE="Techno" ID="Techno"> <LABEL FOR="Techno">Techno</LABEL> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE="Muzyka powaŝna" ID="Muzyka powaŝna"> <LABEL FOR="Muzyka powaŝna">muzyka powaŝna</label> <INPUT TYPE="checkbox" NAME="Muzyka" VALUE=Inna" ID="Inna"> <LABEL FOR="Inna">Inna</LABEL> <INPUT NAME="Muzyka"> </FIELDSET> <FIELDSET> <LEGEND ALIGN="left"><H2 class="a2">multimedia</h2></legend> <B>Jakiej przeglądarki internetowej uŝywasz?</b> <SELECT NAME="Przeglądarka"> <OPTION SELECTED>Internet Explorer <OPTION>Netscape Navigator <OPTION>Opera <OPTION>Inna </SELECT> <B>Jakie masz systemy operacyjne (moŝesz wybrać kilka opcji trzymając klawisz Ctrl)?</B> <SELECT NAME="System operacyjny" MULTIPLE SIZE="3"> <OPTION SELECTED>Dos <OPTION>Windows <OPTION>Linux <OPTION>Inny </SELECT>

11 </FIELDSET> <FIELDSET> <LEGEND ALIGN="left"><H2 class="a2">komentarz</h2></legend> <B>Co myślisz o mojej stronce?</b> <TEXTAREA NAME="Komentarz" COLS="50" ROWS="10">Jakieś uwagi?</textarea> </FIELDSET> <BUTTON TYPE="submit"> <IMG SRC="."> </BUTTON> --> <INPUT TYPE="submit" VALUE="Wyślij formularz"> <INPUT TYPE="reset" VALUE="Wyczyść dane"> </FORM> </BODY> </HTML>