Tworzenie formularzy w html

Formularze na stronach WWW można obecnie spotkać prawie wszędzie – jedynie proste strony się bez nich obywają. Dzięki nim osoby odwiedzające stronę mogą wykonać wiele czynności, jak np. wysłać wiadomość do właściciela witryny, zarejestrować się, zalogować się do prywatnej części serwisu czy zakupić coś w sklepie internetowym. Dlatego warto dowiedzieć się jak tworzyć formularze w HTML.

Szkielet formularza i sposoby jego wysyłania

Podstawowe ramy formularza wyznacza znacznik <form>. Znacznik ten posiada kilka atrybutów których można użyć. Jednym z nich jest atrybut 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. 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.

Drugim atrybutem który warto zawsze ustawiać, jest method. Może on przyjąć dwie wartości: 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. Zazwyczaj jednak stosuje się też post – więcej o tym za chwilę. Zatem nasz szkielet formularza którego zawartość można wysłać na email będzie wyglądał następująco:

<form action="ktos@gdzies.com.pl" method="post">
Tutaj będzie zawartość formularza
</form>

Warto wspomnieć o tym iż warunkiem zgodności kodu HTML strony ze standardem (X)HTML Strict jest aby zawartość formularza umieścić wewnątrz znacznika będącego pojemnikiem, takim jak np. <> czy <div>. Uwzględniając to zalecenie szkielet formularza będzie wyglądał następująco:

<form action="ktos@gdzies.com.pl" method="post"><div>
Tutaj będzie zawartość formularza
</div></form>

Zawartość formularza jest przed wysyłaniem odpowiednio przetwarzana. Domyślnie dane z formularza kodowane są wg standardu URL Encode, przez co zawartość emaila jest raczej mało czytelna:

imie=Daniel&nazwisko=Fru%BFy%F1ski&strona=https%3A%2F%2Fwebologia.pl

Powyższy ciąg znaków jest to wynik wysłania formularza który zawierał pola imie, nazwisko i adres, do których wpisałem swoje imię, nazwisko i adres strony WWW. Jak widzisz, polskie znaki oraz niektóre znaki nie będące literami lub cyframi zostały zakodowane w postaci %XX, co jest mało czytelne (dla dociekliwych: XX jest to kod znaku w systemie szestnastowym). Nazwy pół są połączone z ich wartościami za pomocą znaków „=”, a wszystkie takie pary są dodatkowo połączone w jeden długi ciąg znaków za pomocą znaków „&”.

Sposób kodowania danych z formularza można określić za pomocą dodatkowego atrybutu enctype. Aby zawartość wysyłanego maila była czytelna, należy mu przypisać wartość text/plain, co w wolnym tłumaczeniu oznacza „czysty tekst”. Po jego dodaniu, szkielet formularza będzie wyglądał następująco:

<form action="ktos@gdzies.com.pl" method="post" enctype="text/plain">
<div>
Tutaj będzie zawartość formularza
</div>
</form>

Zawartość tak przygotowanego i wysłanego formularza powinna wyglądać następująco:

imie=Daniel
nazwisko=Frużyński
strona=https://webologia.pl

Niestety u mnie zamiast polskich znaków pojawiły się krzaczki, których nie udało mi się pozbyć. Testowałem też różne kombinacje czterech przeglądarek WWW (Firefox, Opera, Netscape Browser i IE) i dwóch klientów poczty (The Bat! i Outlook Express), i wszędzie dostawałem podobne rezultaty. Zatem albo u mnie coś jest nie tak, albo to już tak działa 🙂

Kontrolki formularza

Oczywiście każdy formularz poza „szkieletem” powinien coś w sobie zawierać. Poza tekstem który jest zazwyczaj używany do opisania pól formularza, można umieścić kontrolki do wprowadzania tekstu, przyciski opcji (radiowe), przyciski wyboru (checkbox), listy, listy rozwijalne i przyciski (zwykłe i graficzne).

Pole tekstowe – text

Pierwszym elementem formularza który omówię jest pole tekstowe. Do jego wstawienia należy użyć znacznika <input type="text">:

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

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 zalecam korzystanie tylko z 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

Pole tekstowe stworzone za pomocą znacznika <input type="text"> pozwala na wpisanie tylko jednego wiersza tekstu. Czasami jest jednak potrzeba wpisania kilku wierszy tekstu. Wtedy należy użyć znacznika <textarea>:

<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.

Pole do wpisywania hasła – password

W przypadku gdy jednym z pól formularza jest pole do podania hasła (np. w formularzu logowania), wtedy ze względów bezpieczeństwa zalecane jest użycie znacznika <input type="password">. Jest to nieco zmodyfikowana wersja znacznika <input type="text">, która 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

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

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. Jest on bardzo podobny do wcześniej omawianego znacznika <input type="radio">, więc od razu podam przykład użycia:

<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

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”).

Przycisk wysłania formularza – submit

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

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>, który był już omawiany w lekcji opisującej Wstawianie grafiki w HTML. Jeżeli zatem nie pamiętasz niektórych szczegółów, zapraszam do przejrzenia wspomnianej lekcji.

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). W przykładzie poniżej dołączyłem do przycisku pole tekstowe do celów testowych:

<input type="reset">

Podobnie jak przycisk <input type="submit">, ten przycisk może nie mieć podanej nazwy i/lub wartości. Podanie nazwy zazwyczaj jest zbędne, gdyż przycisk ten nie powoduje wysłania formularza. Częściej stosuje się podawanie wartości, gdyż jest ona wyświetlana jako tekst na przycisku (jeżeli się jej nie poda, wyświetli się wartość domyślna zależna od przeglądarki, np. „Zresetuj”, co może być mało oczywiste).

<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 (znaczniki te były opisywane w lekcji opisującej Formatowanie bloków tekstu).

<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>

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>