Zapewne spotkałeś się już z formularzami na wielu stronach WWW. Występują one niemal wszędzie. Niezależnie czy chcesz założyć konto e-mailowe czy kupić jakiś produkt w sklepie internetowym. W formularzach musisz wypełniać jakieś pola lub zaznaczać
pewne opcje. Dzięki formularzom np. webmaster danego serwisu może zebrać potrzebne mu dane do jakiegoś określonego celu. Dobrym przykładem tutaj jest subskrypcja e-zinu BestMtnt gdzie jedyne co musisz podać to imię i e-mail. Dzięki tym informacją wiadomo do kogo i na jaki adres należy wysłać e-zina. Jeżeli chcesz możesz także stworzyć małą ankietę na własną stronę. Ankieta posłuży Ci do sprawdzenia co inni sądzą np. o Twojej stronie. Ale do czego posłuży Ci formularz zależy wyłącznie od Ciebie a ja jedynie pokażę Ci jak go zrobić.
Formularze to troszeczkę wyższa szkoła jazdy. Jak dotąd nauczyłeś się robić strony w których niestety brakuje akcji. Odwiedzający jedyne co mógł zrobić to przeglądać zawartość serwisu WWW. Natomiast użycie formularzy pozwala na interakcję pomiędzy stroną a użytkownikiem. Jest kilka rodzajów formularzy ze względu na sposób wysyłania. Niektóre mogą ściśle współpracować z serwerem gdzie będą przechowywane (CGI) a inne będą wysyłane bezpośrednio na podany e-mail. My zajmiemy się tym drugim rodzajem formularzy.
Wszystkie elementy formularza możemy umieścić w dowolnym miejscu na naszej stronie pomiędzy flagami <FORM></FORM>. Na formularz składają się różnego rodzaju pola tekstowe oraz listy i pola wyboru. To jakiego typu pól użyjesz zależy wyłącznie od Ciebie oraz od efektu jaki chcesz osiągnąć.
Flagi
Teraz przedstawię flagi odpowiadające za tworzenie pól w formularzach. Zaczniemy od najprostszej, dzięki której użytkownik może wprowadzić tekst.
<TEXTAREA> – przy pomocy tej flagi tworzymy w formularzu pola tekstowe. Charakteryzują się one tym, że są kilku wierszowe a wysokość i szerokość określamy używając parametrów ROWS (liczba wierszy) i COLS (liczba kolumn). Cała flaga wygląda mniej więcej tak:
| <TEXTARE A NAME=”pole_tekstowe” ROWS=”5″ COLS=”50″> Tutaj coś wpisz </TEXTAREA> |
No to po kolei. Przed chwilą stworzyliśmy pierwsze pole. Przy pomocy parametru NAME nadaliśmy mu nazwę: “pole_tekstowe”. Zajmijmy się nim trochę więcej ponieważ jest on najważniejszy ze wszystkich paramterów i nie można go pominąć.
NAME – przy pomocy tego parametru nadajemy nazwę polom formularza. Każde pole musi mieć nazwę. Załóżmy, że w jakimśpolu wymagane jest podanie e-maila wówczas nadajemy dla niego nazwę NAME=”e-mail”. Oczywiście nazwa może być dowolna.
Wróćmy do przykładu. Na koniec określiliśmy rozmiar – wysokość 5 a szerokość 100. Jak widzisz jest to dosyć łatwe. Na pewno zauważyłeś, że pomiędzy <TEXTAREA> i </TEXTAREA> jest umieszczony tekst. Znajduje się on także w utworzonym polu tekstowym. Jest to, można powiedzieć proponowany tekst.Osoba która będzie wypełniała pole może go usunąć. Jednak co zrobić jeżeli chcemy aby nie dało się modyfikować w polu? Wystarczy użyć parametru DISABLE ( <textarea name=”…” disable>…</textarea> ) Zapobiegnie to usunięciu tekstu przez użytkownika. Jedyne co będzie mógł zrobić to dopisać coś dalej 😉
Przed chwilą dowiedziałeś się jak zrobić pole w którym będzie można wpisywać dowolny tekst bez żadnych ograniczeń. Teraz dla odmiany flaga mająca o wiele więcej możliwości… <INPUT> – Tworzy najbardziej różnorodne pola. Jest flagą uniwersalną. Dzięki niej możemy otrzymać niemal dowolne pole. Wszystko zależy od tego jaki typ pola określimy, zaczynając od jednowierszowych pól tekstowych kończąc na polach wyboru i przyciskach.
UWAGA! Flagi <INPUT> nie zamykamy znacznikiem </INPUT>! W związku z czym wszystkie parametry umieszczamy w jednej fladze:
| <INPUT TYPE=”typ pola” NAME=”nazwa”> |
Tak wygląda podstawowy schemat tworzenia pola przy użyciu flagi <INPUT>.Parametr NAME powinieneś już znać, nadaje on nazwę polu. Natomiast cała zabawa zaczyna się dopiero przy określeniu typu pola. Typ określamy używając parametru TYPE. Możemy mu przypisać wartości:
- TYPE=”text” – w utworzonym polu użytkownik może wpisać czysty tekst. Jest to domyślny typ flagi <INPUT>. Dla tego pola można określić rozmiar przy pomocy SIZE=”x”, gdzie “x” to szerokość pola podawana w pikselach.
- TYPE=”password” – w tym przypadku w utworzonym polu tekstowym zamiast tekstu pojawiają się gwiazdki. Wygląda to tak jakby tekst był szyfrowany jednak uwaga! Tekst tak naprawdę nie jest szyfrowany! Tutaj także możesz użyć parametru SIZE do określenia szerokości.
- TYPE=”image” – pole formularza zostanie przedstawione za pomocą obrazka. Źródło obrazka definiujemy za pomocą parametru SRC. Obrazek może być użyty jako przycisk wysyłający formularz. Wraz z wysłaniem formularza wysyłane są także współżędne kliknięcia na obrazek (x,y).
- TYPE=”hidden” – jest to ukryte pole tekstowe do którego użytkownik nie ma dostępu. Przy jego pomocy można do programu odbierającego formularz przesłać specjalne ukryte informacje. Mogą nimi być np. adres strony na której formularz został wypełniony.
- type=”checkbox” class=”img” – tworzy pole o rozmiarach małego kwadraciku. Jest to jeden z tzw.pól wyboru. Napiszę o tym więcej poniżej. Aktywne pole posiada w środku “ptaszka” natomiast nieaktywne pole pozostaje puste.
lub
- type=”radio” class=”img” – działa podobnie jak checkbox z tą różnicą, że w tym przypadku utworzone zostaje puste kółeczko (gdy pole jest nieaktywne) lub kółeczko pełne (pole aktywne)
lub
- TYPE=”button” – jak sama nazwa wskazuje, utworzony zostaje przycisk który także może służyć jako pole wyboru.
- TYPE=”submit” – jest to jeden z przycisków. Odpowiada za wysłanie(submit) formularza w określone miejsce np. na e-mail.
- TYPE=”reset” – to także jest przycisk. Jego kliknięcie powoduje powrót wszystkich pól formularza do pierwotnego stanu. Inaczej mówiąc do wartości domyślnej każdego pola.
Istnieje jeszcze możliwość ustawienia do flagi kilku parametrów. To jakiego paramteru użyjemy zależy od typu pola. Tak więc dla typu “text” i “password” możesz określić rozmiar pola. Do tego celu posłuży nam SIZE. Za jego pomocą określamy długość pola tekstowego. Rozmiar podajemy w pikselach np. <INPUT TYPE=”text” NAME=”jeden” SIZE=”20″> w ten sposób określiliśmy, że utworzone pole o nazwie “jeden” będzie miało rozmiar 20. Należy zwrócić uwagę na to, że to jaką długość pola ustalimy nie ma wpływu na ilość wpisywanego tekstu. Więc jeżeli chcesz ograniczyć długość wpisywanych znaków wystarczy, że wstawisz do flagi <INPUT> parametr MAXLENGTH=”x”, gdzie x to ilość znaków ktore mogą być wpisane w pole ( <INPUT TYPE=”text” NAME=”jeden” SIZE=”20″ MAXLENGTH=”x”>)
Ostatnim parametrem jakim się zajmiemy będzie VALUE. Z j.angielskiego oznacza wartość. Przy jego pomocy możesz przypisać polu wartość. W przypadku pól tekstowych to co umieścisz pomiędzy znakami ” ” będzie się pokazywało jako wartość domyślna pola. Jeżeli więc napiszesz
| <INPUT TYPE=”text” NAME=”przykład” VALUE=”twoje imię”> |
zostanie utworzone pole:
We fladze umieściliśmy parametr VALUE i przypisaliśmy mu wartość “twoje imię”. W związku z tym wartość ta pokazała się w polu. Mam nadzieję, że jest to zrozumiałe 🙂 Jeżeli chodzi o pola wyboru (checkbox i radio) to parametr VALUE przypisuje im wartość w zależności od wybranego pola. Wartość ta nie jest widoczna na stronie. Wysyłana jest bezpośrednio do adresata. Aby lepiej to zrozumieć zapraszam dalej do części poświęconej polą wyboru.
Pola wyboru>
Powinieneś wiedzieć już jak wykonać pola tekstowe. W takich polach użytkownik mógł wpisywać dowolny tekst niezawsze zgodny z tym co oczekiwaliśmy. Jak więc temu zapobiec? Najlepiej wykorzystać pola wyboru (checkbox i radio). Dzięki nim użytkownik będzie mógł wybrać jedną z dopuszczalnych opcji. W polach typu radio użytkownik może wybrać tylko jedną możliwość. W związku z czym tylko jedna odpowiedĄ może być prawidłowa np. Gdzie mieszkasz?
miasto wojewódzkie
miasto powiatowe
miasto
wieś
Jak widzisz jedna odpowiedĄ wyklucza drugą. Pola wyboru budujemy za pomocą flagi <INPUT> (patrz wyżej), całość wygląda tak:
| <INPUT TYPE=”radio” NAME=”miejsce_zamieszkania” VALUE=”wojewodztwo”> |
Opiszmy całą flagę. Na początku określiliśmy typ pola jako radio, możemy także użyć wartości checkbox. To co wybierzesz zależy od Ciebie, mi osobiście bardziej podoba się checkbox 🙂 chociaż radio jest wygodniejsze w zastosowaniu. Dalej nadaliśmy nazwę NAME=”miejsce_zamieszkania”. Nazwy nie nadajemy, dla każdej opcji innej. Wystarczy, że określisz parametr NAME dla zestawu opcji a każdej opcji z osobna przypiszesz inną wartość (VALUE). W tym przykładzie wszystkie pola mają jedną nazwę – “miejsce_zamieszkania”. Zmienia się za to wartość każdego pola: wojewodztwo, powiat, miasto, wies. Taki system przyda się później w odczytywaniu przesłanych formularzy ale o tym napiszę na samym końcu. Jeżeli chcesz zaznaczyć jakąś opcję jako domyślną wystarczy, że we fladze umieścisz parametr CHECKED. Nie przypisujemy mu żadnej wartości. Użytkownik będzie mógł zmienić zaznaczenie. Oto przykład:
Jestem kobietą
Jestem mężczyzną
| <INPUT TYPE=”checkbox” NAME=”płeć” VALUE=”kobieta” CHECKED> Jestem kobietą <INPUT TYPE=”checkbox” NAME=”płeć” VALUE=”mężczyzna”> Jestem mężczyzną |
Jak zapewne zauważyłeś stworzyliśmy pole wyboru dotyczące płci. Nazwaliśmy je “płeć”. Opcja “Jestem kobietą” jest zaznaczona jako domyślna. Jedyny problem z typem checkbox polega na tym, że gdy ktoś zmienia jedno zaznaczone pole na drugie to te pierwsze pole zostaje dalej zaznaczone. W wyniku tego mogą zostać zaznaczone dwie opcje na raz co w powyższym przykładzie w praktyce nie jest chyba możliwe 🙂
No to chyba tyle jeżeli chodzi o pola wyboru. Teraz zajmiemy się już ostatnim rodzajem pól formularza:
Lista wyboru
Lista posiada podobne zastosowanie co pole wyboru. To znaczy, że wypełniającemu formularz podsuwamy już gotowe odpowiedzi z których może wybrać jedną lub więcej. Metoda ta jest dobra jeżeli chcemy zaoszczędzić trochę miejsca. Czemu? Zobacz przykład…
Twój ulubiony… samochód?
Jak widzisz utworzona została lista wyboru kilku marek samochodów. Teraz zastanówmy się jak to zrobić.
Tym razem nie używamy już flagi <INPUT>. Zastosujemy zupełnie nową – <SELECT>. Podstawowy schemat budowy takiej listy wygląda następująco:
| <FORM> <SELECT NAME=”marka”> <OPTION VALUE=”fiat”>Fiat <OPTION VALUE=”ford”>Ford … </SELECT> </FORM> |
Całą listę umieszczamy pomiędzy <SELECT> a </SELECT>. Oczywiście tak jak to było w wcześniejszych przypadkach musimy przypisać parametr NAME. Nazwa może być dowolna, w naszym przypadku jest to “marka”. Do flagi <SELECT> możesz przypisać parametr MULTIPLE jeżeli chcesz aby można było wybrać kilka opcji na raz np. jeżeli ktoś lubi kilka samochodów. Natomiast jeżeli chcesz określić wielkość czcionki wystarczy, że użyjesz SIZE=”x”, gdzie x to wielkość czcionki. Rozmiar możemy podać od 1 do 7.
W ten sposób opisaliśmy sam początek listy. Aby przypisać jakieś opcje ktore będzie można wybrać musimy skorzystać z flagi <OPTION>. Tyle razy ile użyjesz tej flagi tyle opcji pojawi się w liście. Do każdej opcji przypisujemy odpowiednią warość <OPTION VALUE=””>. Wartość powinna się różnić w zależności od opcji. W przykładzie jak zauważyłeś wartościami są: fiat, ford itd. Flagi <OPTION> nie zamykamy </OPTION>. To co umieścimy po fladze będzie się znajdowało w liście jako tekst do wyboru. A co zrobić żeby jakieś pole zaznaczyć jako domyślne ? Wystarczy użyć w wybranej fladze <OPTION> parametr SELECTED. Opcja z takim parametrem jest ustawiona jako domyślna.
W następnym artykule zajmiemy się wysyłaniem formularza.
