Formularze


Formularze to taki element strony www, który pozwala na przesłanie konkretnych informacji dalej… np. wysłanie maila, złożenie zamówienia, zarejestrowanie się na stronie, wypełnienie ankiety itp.

Jak to wygląda

Podstawowe ramy formularza wyznacza znacznik <form>.

Znacznik ten posiada następujące atrybuty:

  • action – jest to atrybut obowiązkowy, który określa gdzie mają zostać wysłane dane z formularza. Jego wartością może być dowolny adres URL lub nazwa pliku ze skryptem przetwarzającym. Zazwyczaj wstawia się tu adres rozpoczynający się od http:// lub https://, wymaga to jednak posiadania skryptu który uruchomi się na serwerze i przetworzy przesłane dane (np. skrypt napisany w PHP). Jeżeli nie masz możliwości skorzystania z takiego skryptu, możesz skorzystać z możliwości wysłania zawartości formularza na adres email, podając swój adres email w formacie mailto:ktos@gdzies.com.pl. Jeżeli skrypt przetwarzający dane formularza znajduje się w tym samym pliku co formularz to pole zostawiamy puste.
  • method – czyli sposób w jaki wysyłane są dane: get albo post. W przypadku gdy chcesz wysłać dane z formularza na swój adres email, użyj post (get nie działa poprawnie w takim wypadku – w emailu nic nie będzie). Jeżeli natomiast dane chcesz wysłać do skryptu na serwerze, możesz użyć dowolnej z tych dwóch wartości. W skrócie: dane w post są ukryte, w get – widoczne.

Zatem nasz szkielet formularza którego zawartość można wysłać na email będzie wyglądał następująco:

 

<form action="mailto:adres e-mail?subject=temat" method="post">
    <div>(Tutaj umieszcza się pola formularza)</div>
</form>

Pola formularza:

Pole tekstowe – text

Do jego wstawienia należy użyć znacznika <input type="text">:

 

<input type="text" name="imie">

 Wygląda ono tak:

Znacznik <input> jest używany także do tworzenia wielu innych elementów formularza – zależy to od wartości atrybutu type (tutaj jest on ma przypisaną wartość text). Drugim atrybutem który użyłem jest name – określa on nazwę pola formularza; to ona pojawia się po lewej stronie znaku równości. Przy tworzeniu nazw używamy tylko liter łacińskich (czyli bez polskich znaków jakich jak np. ą czy Ę), cyfr i znaku podkreślenia. Co do pozostałych znaków – mogą one działać, ale nie muszą – zależy to od tego jak zostało napisane oprogramowanie które będzie je przetwarzać. Jeżeli chcesz możesz to sprawdzić osobiście czy będą one działać czy nie; możesz też profilaktycznie ich unikać tak jak ja to robię 😉

Jeżeli chcesz, możesz do tak wyświetlonego pola tekstowego wpisać jakiś swój tekst który pojawi się po wyświetleniu strony (jest to wygodne gdy np. wyświetlasz formularz po raz kolejny, i nie chcesz aby ktoś wypełniał wszystkie pola od nowa). Do tego celu służy atrybut value:

 

<input type="text" name="imie" value="Daniel">

Możesz także ograniczyć ilość znaków które można wprowadzić do pola za pomocą atrybutu maxlength (np. na kod pocztowy wystarczy 6 znaków):

 

<input type="text" name="kod_pocztowy" maxlength="6">

 

Wielowierszowe pole tekstowe – textarea

Gdy potrzebujemy wpisać więcej danych niż jeden wiersz używamy:

 

<textarea name="tresc" rows="5" cols="50">Fragment tekstu</textarea>

 

Znacznik ten jest nieco inny od znacznika <input> – nie wymaga atrybutu type. Podobnie jednak jak tamten znacznik posiada atrybut name określający nazwę pola w formularzu (jest to cecha wspólna wszystkich znaczników – elementów formularza). Dodatkowo posiada on jeszcze dwa atrybuty: rows – określający ilość wierszy tekstu, i cols – określający ilość kolumn. Dodatkowo istnieje różnica w sposobie podawania tekstu który ma zostać domyślnie wyświetlony – wpisuje się go pomiędzy znacznik otwierający a zamykający.

Zadanie:

Znajdź informacje na temat maksymalnej ilości znaków jakie można wpisać w input oraz w textarea.

 

Pole do wpisywania hasła – password

<input type="password"> wyświetla zamiast wpisywanych znaków gwiazdki, zatem osoba postronna która akurat będzie w pobliżu nie będzie mogła zobaczyć hasła.

 

<input type="password" name="haslo" value="TajneHaslo">

Jeżeli chcesz, możesz coś wpisać jako wartość domyślną do tego pola. Pamiętaj jednak że będzie to przesyłane w postaci nie zakodowanej, i każdy kto zerknie do kodu strony może to hasło zobaczyć. Z tego powodu odradzam wpisywanie wartości domyślnej do tego pola.

 

Pole jednokrotnego wyboru – radio

Kolejnym elementem który można wstawić wewnątrz formularza jest pole jednokrotnego wyboru (radio, rabiobutton). Wstawia się go za pomocą znacznika <input type="radio">:

 

<input type="radio" name="odpowiedz" value="tak">Tak<br>
<input type="radio" name="odpowiedz" value="nie">Nie<br>
<input type="radio" name="odpowiedz" value="niewiem">Nie wiem

Tak to wygląda:

Tak

Nie
Nie wiem

Znacznik ten posiada znane już atrybuty type, name i value. Zauważ że wszystkie trzy znaczniki podane w powyższym przykładzie posiadają tą samą przypisaną nazwę – w ten sposób przeglądarka rozpoznaje grupę przycisków, z których tylko jeden można będzie zaznaczyć na raz. W momencie wysłania formularza wartość zaznaczonego przycisku zostanie wysłana razem z jego wartością, np. odpowiedz=tak. Jeżeli żaden z przycisków nie zostanie zaznaczony, nic nie zostanie wysłane.

Czasami możesz chcieć aby jeden z przycisków był domyślnie zaznaczony – do tego służy atrybut checked:

 

<input type="radio" name="odpowiedz" value="tak" checked>Tak<br>
<input type="radio" name="odpowiedz" value="nie">Nie<br>
<input type="radio" name="odpowiedz" value="niewiem">Nie wiem
Tak
Nie
Nie wiem

 

Pole wielokrotnego wyboru – checkbox

Następnym znacznikiem który można użyć do budowy formularza jest <input type="checkbox">. Służy on do tworzenia pól wielokrotnego wyboru.

 

<input type="checkbox" name="zainteresowania" value="sport" checked>Sport<br> 
<input type="checkbox" name="zainteresowania" value="ksiazki">Książki<br> 
<input type="checkbox" name="zainteresowania" value="komputery" checked>Komputery
Sport
Książki
Komputery

W przypadku tego znacznika przeglądarka wysyła parę nazwa=wartość dla każdego pola które zostało zaznaczone (jeżeli nic nie zostało zaznaczone, to nic nie wyśle).

Pole listy i listy rozwijalnej – select

Do formularza można także wstawić pola listy (listbox) i pola listy rozwijalnej (combobox). Obydwa można utworzyć za pomocą znacznika <select>. Znacznik ten posiada atrybut size, który określa ile elementów ma być widocznych, czyli inaczej wysokość listy. Jeżeli ustawisz go na 1, to otrzymasz pole listy rozwijalnej; jeżeli natomiast użyjesz wartości większej od 1, otrzymasz zwykłe pole listy.

Wszystkie elementy listy umieszcza się wewnątrz znacznika <select>, ograniczając je dodatkowo znacznikami <option>.

 

Przykład listy rozwijalnej (combo):

<select name="jezyk" size="1">
    <option>Polski</option>
    <option>Angielski</option>
    <option>Niemiecki</option>
    <option>Francuski</option>
</select>

Przykład pola listy (listbox):

<select name="jezyk" size="3">
    <option>Polski</option>
    <option>Angielski</option>
    <option>Niemiecki</option>
    <option>Francuski</option>
</select>

Na liście rozwijalnej (combo) domyślnie wybrany jest pierwszy element. Jeżeli chcesz aby domyślnie nic nie było wybrane, dodaj tam na początku pusty element.

Wartością która zostanie wysłana do serwera po wybraniu któregoś z elementów jest zawartość znacznika <option> </option>. Jeżeli chcesz aby były przesyłane inne wartości, możesz je podać za pomocą atrybutu value (przykład jest tylko dla listbox, ale dla combobox jest tak samo):

 

<select name="jezyk" size="3">
<option value="pl">Polski</option>
<option value="en">Angielski</option>
<option value="de">Niemiecki</option>
<option value="fr">Francuski</option>
</select>
W polu listy (listbox) można domyślnie zaznaczyć tylko jeden element. Możesz to zmienić poprzez dodanie do znacznika <select> atrybutu multiple. Atrybut ten nie wymaga podania żadnej wartości. Po jego użyciu, będzie możliwe zaznaczenie większej ilości elementów poprzez klikanie na nich z naciśniętym klawiszem Control na klawiaturze.
<select name="jezyk" size="3" multiple> 
<option>Polski</option> 
<option>Angielski</option> 
<option>Niemiecki</option> 
<option>Francuski</option> 
</select>
Dla każdej z list (listbox i combobox) można określić który element ma być domyślnie wybrany. Służy do tego atrybut selected, który należy umieścić we właściwym znaczniku <option>. Nie wymaga on podawania wartości. W przypadku gdy używać pola listy (listbox) i atrybutu multiple, możesz użyć tego atrybutu kilkakrotnie aby zaznaczyć kilka elementów listy:
<select name="jezyk" size="3" multiple>
<option selected>Polski</option>
<option selected>Angielski</option>
<option>Niemiecki</option>
<option>Francuski</option>
</select>

Pole ukryte – hidden

Istnieje też specjalny typ pola formularza – pole ukryte. Możesz go zastosować w przypadku gdy chcesz przechować w formularzu pewną wartość której będziesz później potrzebować, ale nie chcesz aby ona była wyświetlana. Służy do tego znacznik <input type="hidden">. Pamiętaj jednak iż zawartość tego znacznika może każdy podejrzeć (a nawet jak się postara, to też zmodyfikuje w dowolny sposób), więc ze względów bezpieczeństwa polecam nie wstawiać tutaj byle czego, i sprawdzać to co zostało wysłane do serwera (ta uwaga dotyczy wszystkich danych które pochodzą „z zewnątrz”).

 

<input type="hidden" name="id" value="123">

Przycisk wysłania formularza – submit

Po wypełnieniu formularza, użytkownik będzie chciał go wysłać. Aby mu to umożliwić, należy użyć znacznika <input type="submit">:

<input type="submit">

Znacznik ten może być użyty bez atrybutów name i value. W przypadku gdy nie poda się pierwszego z nich, przeglądarka nie dołączy tego elementu do listy par nazwa=wartość które zostaną wysłane. Gdy natomiast nie podasz wartości dla atrybutu value, przeglądarka użyje swojego domyślnego opisu przycisku (np. IE wyświetla enigmatycznie brzmiący napis „Prześlij kwerendę”).

 

<input type="submit" name="wyslij" value="Wyślij">

Graficzny przycisk wysyłania formularza – image

Drugą metodą wysyłania formularza jest przycisk graficzny. Tworzy się go za pomocą znacznika <input type="image">. Znacznik ten jest hybrydą znacznika <input> i znacznika <img>.

Znacznik ten może być użyty następująco:

 

<input type="image" src="webdir.gif" alt="Wyślij">

 

Warto zauważyć że po kliknięciu na taki obrazem przeglądarka wyśle także współrzędne kliknięcia, w postaci dodatkowych parametrów x i y. Jeżeli do tego przycisku graficznego przypiszesz jakąś nazwę za pomocą atrybutu name (np. wyslij), to przeglądarka wyśle współrzędne jako parametry wyslij.x i wyslij.y.

Trzecią metodą wysyłania formularza jest naciśnięcie klawisza Enter na klawiaturze w momencie gdy aktywne jest któreś z pól formularza. Co ciekawe, formularz nie musi mieć przycisku <input type="submit"> aby ta metoda zadziałała.

 

Przycisk czyszczenia formularza – reset

Kolejnym znacznikiem który jest od czasu do czasu stosowany jest znacznik <input type="reset">. Jego naciśnięcie spowoduje usunięcie wszystkich wartości wpisanych do formularza i zastąpienie ich wartościami domyślnymi (czyli takimi które pojawiły się zaraz po załadowaniu strony).

 

<input type="reset" value="Wyczyść formularz">

 

Przyciski ogólnego zastosowania

Oprócz wymienionych przycisków submit i reset, możliwe jest także wstawienie „zwykłych” przycisków. Można je utworzyć na dwa sposoby: za pomocą znacznika <input type="button"> lub za pomocą <button>:

 

<input type="button" value="Przycisk 1"><br> 
<button>Przycisk 2</button>

 

Domyślnie naciśnięcie żadnego z nich nie spowoduje wykonania się jakiejś akcji (np. wysłania formularza) – aby coś się stało, należy to oprogramować korzystając ze skryptu JavaScript.

Warto też wspomnieć, że przycisk stworzony za pomocą znacznika <button;> </button;> pozwala umieścić na nim nie tylko tekst, ale też np. obrazek:

 

<button><img src="webdir.gif" width="101" height="77" alt="Kliknij tutaj"></button>

Wysyłanie plików na serwer – file

Ostatnim elementem formularza który omówię jest pole wyboru pliku który ma zostać wysłany na serwer. Służy do tego celu znacznik <input type="file">:

 

<input type="file" name="plik">

Użycie tego znacznika jest jednak nieco trudniejsze od pozostałych, gdyż dodatkowo trzeba ustawić typ kodowania formularza na multipart/form-data za pomocą atrybutu enctype znacznika <form>:

 

<form action="wyslij_plik.php" method="post" enctype="multipart/form-data">
<div> Tutaj będzie zawartość formularza </div>
</form>

Dodatkowo wymagana jest odpowiednia obsługa tak przesłanego pliku na serwerze. Na szczęście współczesne języki takie jak np. PHP załatwiają większość „czarnej roboty”, więc jest to stosunkowo proste.

Kilka przydatnych trików

Oprócz wymienionych powyżej znaczników, jest jeszcze kilka innych które przydają się podczas konstrukcji formularzy. Pierwszym z nich jest znacznik <fieldset>, który wraz ze znacznikiem <legend> pozwala tworzyć ramki z tytułem.

<fieldset>
<legend>Wybierz odpowiedź</legend><br> 
<input type="radio" name="odpowiedz" value="tak">Tak<br> 
<input type="radio" name="odpowiedz" value="nie">Nie<br> 
<input type="radio" name="odpowiedz" value="niewiem">Nie wiem 
</fieldset>
Wybierz odpowiedź

Tak
Nie
Nie wiem

Drugim przydatnym znacznikiem jest <label>. Pozwala on na tworzenie opisów tekstowych, których kliknięcie spowoduje uaktywnienie określonej kontrolki. Aby to zrobić, musisz przypisać kontrolkom które masz w formularzu identyfikatory za pomocą atrybutów id (każda musi mieć inny identyfikator, nawet jeżeli mają te same nazwy nadane atrybutem name). Następnie identyfikatory te użyj jako wartości atrybutu for znacznika <label>. W tym znaczniku też, pomiędzy tagiem otwierającym a zamykającym umieść tekst który ma być opisem kontrolki. Całość powinna wyglądać w ten sposób:

<input type="radio" name="odpowiedz" id="odp_tak" value="tak">
<label for="odp_tak">Tak</label><br> 
<input type="radio" name="odpowiedz" id="odp_nie" value="nie">
<label for="odp_nie">Nie</label><br> 
<input type="radio" name="odpowiedz" id="odp_niewiem" value="niewiem">
<label for="odp_niewiem">Nie wiem</label>


* materiały zostały opracowane na podstawie informacji ze strony http://www.poradnik-webmastera.com/

 

Zadanie:

Na podstawie danych ze strony http://slawekrokicki.vizz.pl/technikum_cwiczenia/cwiczenia/html/cwiczenie_8.html wykonaj zamieszczone tam zadania