#8 Formularze HTML

Zobacz więcej...

Wprowadzenie do formularzy HTML i ich zastosowanie

Formularze HTML umożliwiają stosowanie interaktywnych elementów na stronach WWW. Są one przydatne do gromadzenia informacji o użytkownikach odwiedzających serwis lub do zamawiania towarów w sklepach internetowych.

Formularz funkcjonuje jako elektroniczna ankieta, którą wypełnia się bezpośrednio na stronie. Umożliwia to wpisywanie tekstu, odpowiadanie na pytania oraz zaznaczanie jednej lub kilku możliwości.

• Prosty formularz może być przesłany pocztą elektroniczną e-mail (tzw. prosty formularz pocztowy).
• W przypadku przesyłania poufnych danych (np. numerów kart kredytowych), należy zadbać o bezpieczeństwo, co można osiągnąć za pomocą skryptów wykonywanych po stronie serwera oraz protokołu SSL.
• Do obsługi formularzy i ich odbierania stosuje się programy lub specjalne skrypty wykonywane w przeglądarce, np. JavaScript i PHP (PHP Hypertext Preprocessor).

Definicja ram formularza

Formularz wstawia się na stronę za pomocą znacznika <form>. Element ten musi posiadać znacznik otwierający i zamykający, a wszystkie elementy formularza muszą znajdować się pomiędzy nimi. Formularzy nie można zagnieżdżać (umieszczać jednego w drugim).

Podstawowa struktura znacznika <form>:

• Przesyłanie na e-mail: <form action="mailto:adres e-mail gdzie wysłać formularz" method="post">...</form>.
• Można również podać temat listu: <form action="mailto:adres e-mail?subject=temat" method="post">...</form>.
• Obsługa przez skrypt: jako wartość atrybutu action="..." można podać adres skryptu PHP lub CGI.
• Jeśli formularz jest wysyłany do skryptu PHP lub CGI, jako wartość atrybutu method="..." można również podać "get", co jest często stosowane dla bardzo krótkich formularzy.

Pole tekstowe

Służy do wpisywania np. imienia i nazwiska. Pole tekstowe ma wysokość jednej linii.

• Wprowadzenie pola: <input type="text" name="nazwa"> lub <input name="nazwa">. Nazwa pola powinna być unikalna w obrębie formularza.
• Domyślna odpowiedź: użycie atrybutu value="odpowiedź domyślna" powoduje dołączenie tej wartości, jeśli użytkownik nie wpisze innej.
• Długość pola: atrybut size="k" ustala widoczną długość pola w liczbie znaków (użytkownik może wpisać dowolną ich liczbę, a zawartość będzie się przesuwać).
• Maksymalna liczba znaków: atrybut maxlength="n" określa maksymalną dopuszczalną liczbę znaków, którą można wpisać.
• Blokada i odczyt: pole może być tylko do odczytu (readonly) lub całkowicie zablokowane (disabled). Zablokowane pole nie jest przesyłane z danymi formularza.

Hasło

Pole do wpisywania hasła. Różni się od zwykłego pola tekstowego tym, że wpisywane znaki są niewidoczne, zastąpione gwiazdkami ("*").

• Wprowadzenie pola: <input type="password" name="nazwa">.
• Przesyłanie ważnych haseł w prostym formularzu pocztowym nie jest bezpieczne. Szyfrowanie można uzyskać, używając protokołu SSL, poprzedzając adres skryptu na serwerze przez "https://".

Pole wyboru (wielokrotny wybór)

Umożliwia użytkownikowi wybór kilku bądź jednej odpowiedzi. Pole wyświetlane jest w postaci kwadratu, który można zaznaczyć i odznaczyć.

• Wprowadzenie pola: <input type="checkbox" name="nazwa" value="wartość">Opis pola.
• Wszystkie pola tego typu, dotyczące tego samego pytania, powinny mieć tę samą nazwę, ale atrybut value="..." musi być inny dla każdej odpowiedzi i jest absolutnie konieczny.
• Domyślne zaznaczenie: atrybut checked powoduje domyślne zaznaczenie pola.
• Etykieta: aby kliknięcie opisu powodowało zaznaczenie/odznaczenie pola, należy użyć znacznika <label>.

Pole opcji (jednokrotny wybór)

Wprowadza na stronę WWW "przełącznik". Pozwala na zaznaczenie tylko i wyłącznie jednego z pól w grupie, jako możliwości odpowiedzi na to samo pytanie.

• Wprowadzenie pola: <input type="radio" name="nazwa" value="wartość">Opis pola.
• Pola tego samego pytania muszą mieć taką samą nazwę (name) i inną, konieczną wartość (value).
• Domyślne zaznaczenie: atrybut checked. Nie można zaznaczyć domyślnie dwóch pól tego typu w tej samej grupie.

Lista rozwijalna

Wprowadza rozwijane menu (pole kombi).

• Wprowadzenie listy: <select name="nazwa">, gdzie opcje są definiowane przez znaczniki <option>...</option>.
• Jeśli chcemy przesłać inne wartości niż treść opcji, należy użyć atrybutu value="..." w znaczniku <option>.
• Wielokrotny wybór: atrybut multiple w znaczniku <select> pozwala wybrać kilka opcji, zaznaczając je za pomocą klawisza Ctrl.
• Opcja domyślna: atrybut selected w znaczniku <option>.
• Wysokość pola: atrybut size="w" określa liczbę widocznych wierszy z odpowiedziami.
• Grupowanie opcji: znacznik <optgroup> z atrybutem label grupuje tematycznie opcje w liście rozwijalnej. Nagłówka grupy nie można wybrać.

Obszar tekstowy (wieloliniowe pole)

Wprowadza wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz lub wiadomość.

• Wprowadzenie pola: <textarea name="nazwa" cols="x" rows="y">Domyślny tekst</textarea>. Atrybuty cols (kolumny) i rows (wiersze) określają widoczną szerokość i wysokość.
• Tekst domyślny umieszcza się między znacznikami otwierającym i zamykającym <textarea>...</textarea>.
• Może być ustawione jako tylko do odczytu (readonly) lub zablokowane (disabled).

Selektor plików

Umożliwia użytkownikowi wybranie pliku ze swojego dysku lokalnego. Wprowadza selektor składający się z pola tekstowego na ścieżkę dostępu i przycisku do przeszukania dysku.

• Wprowadzenie selektora: <form action="..." enctype="multipart/form-data"><input type="file" name="nazwa"></form>. Atrybut enctype="multipart/form-data" jest konieczny do wysyłania plików w załączniku, np. w skryptach PHP.
• Filtr typu plików: za pomocą atrybutu accept="lista typów" (np. typów MIME lub rozszerzeń plików) można określić, jakie typy plików są dopuszczalne.

Ukryte dane

Tworzy ukryte pole w formularzu, niewidoczne ani niedostępne dla użytkownika, którego wartość jest przesyłana wraz z formularzem.

• Wprowadzenie pola: <input type="hidden" name="nazwa" value="wartość">.
• Używane jest często do przekazywania informacji pomiędzy klientem a serwerem (w skryptach serwerowych), które mogłyby zostać utracone z uwagi na bezstanowy charakter protokołu HTTP.

Wysłanie formularza

Domyślnie formularz jest wysyłany po naciśnięciu Enter w polu tekstowym lub polu hasła. Zwykle umieszcza się dodatkowy przycisk wysyłający.

• Przycisk tekstowy: <input type="submit" value="wartość">. Atrybut value określa napis na przycisku.
• Przycisk obrazkowy: <input type="image" src="ścieżka do obrazka" alt="informacja alternatywna">. Atrybut alt dostarcza tekst, gdy obrazek się nie wyświetli.
• Przesyłanie wartości przycisku: jeśli przycisk wysyłania ma atrybut name="nazwa", jego wartość jest przesyłana tylko wtedy, gdy ten przycisk został kliknięty do wysłania formularza.

Wyczyszczenie danych

Wyświetla przycisk, którego naciśnięcie powoduje przywrócenie wszystkich pól do wartości początkowych (resetowanie).

• Wprowadzenie przycisku: <input type="reset" value="wartość">.
• Zapobieganie pomyłkom: można upewnić się, czy użytkownik chce wyczyścić formularz za pomocą zdarzenia onreset i funkcji JavaScript, np.: <form action="..." onreset="if (!confirm('...')) return false">.

Przycisk

Znacznik ten jest zbliżony do przycisków wysłania i wyczyszczenia, ale pozwala na umieszczenie wewnątrz grafiki, tabeli i formatowanego tekstu (np. pogrubienia).

• Składnia: <button type="rodzaj">Treść przycisku</button>.
• Typy: type="submit" (wysłanie), type="reset" (resetowanie danych), type="button" (zwykły przycisk bez akcji, do użycia np. w skrypcie JavaScript).

Grupowanie pól

Służy do tematycznego zgrupowania kilku pól formularza, otaczając je ramką.

• Wersja z tytułem: <fieldset><legend>Tytuł</legend>(Pola formularza)</fieldset>.
• Znacznik <legend> musi znajdować się bezpośrednio po znaczniku otwierającym <fieldset>.

Forma Odszyfrowana i Kodowanie

Domyślnie formularze są wysyłane w formie zakodowanej (np. Imi%EA=S%B3awomir...).

• Forma odszyfrowana: użycie atrybutu enctype="text/plain" w znaczniku <form> powoduje, że formularze są przesyłane w formie odszyfrowanej (np. Imię=Sławomir). Jest to przydatne w przypadku prostych formularzy pocztowych.
• Strona kodowa: atrybut accept-charset="strona kodowa" (np. windows-1250) informuje przeglądarkę o kodowaniu używanym przez system odbierający dane, co może zapobiec zniekształceniu polskich znaków diakrytycznych.
• Usuwanie polskich znaków: możliwe jest automatyczne usunięcie polskich znaków diakrytycznych z pól tekstowych i obszarów tekstowych za pomocą skryptu JavaScript wywoływanego przez zdarzenie onsubmit, aby uniknąć problemów w niektórych programach pocztowych.

Interaktywne formularze i skrypty

Przy użyciu języka JavaScript można stworzyć interaktywny formularz. Jednym z ważnych zastosowań skryptów wykonywanych po stronie klienta jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem.

• Walidacja: jeśli dane są obowiązkowe, a użytkownik ich nie wpisze, formularz nie zostanie wysłany (np. skrypt sprawdzający pola typu text, password lub textarea pod kątem pustej wartości).
• Dynamiczne blokowanie/ukrywanie: za pomocą JavaScript można odblokować lub zablokować inne pola formularza po zaznaczeniu określonej opcji wyboru (np. checkbox). Możliwe jest również dynamiczne ukrywanie pól, gdy nie są potrzebne (za pomocą zmiany stylu display).

Alternatywne metody wysyłania formularzy

Prosty formularz pocztowy (oparty na mailto:) może nie działać poprawnie, jeśli użytkownik nie ma skonfigurowanego programu pocztowego.

• Skrypt JavaScript: można użyć prostego skryptu JavaScript, który otwiera okno programu pocztowego użytkownika z wypełnioną treścią na podstawie danych z formularza.
• Skrypty po stronie serwera (np. PHP): aby wysłać formularz na wskazany adres e-mail bez używania programu pocztowego użytkownika, konieczne jest użycie skryptów po stronie serwera, takich jak PHP. Wymaga to, aby serwer obsługiwał PHP, a funkcja mail nie była zablokowana.
• W przypadku wysyłania formularza skryptem PHP, pola wielokrotnego wyboru (<input type="checkbox">) oraz rozszerzona lista rozwijalna (<select multiple>) muszą mieć na końcu nazwy pusty nawias kwadratowy (np. name="Nazwa[]").