Formularze w HTML

Stanowią interfejs użytkownika umożliwiający wprowadzanie danych i przekazywanie ich do skryptów CGI - obsługa po stronie serwera. Możliwe jest także ich ulepszenie przy pomocy Java Script. Zwiększa się wówczas możliwość obsługi po stronie klienta. Przykładowo za pomocą JS możemy sprawdzać poprawność danych oraz aktualizować pola, reagując na działania użytkownika w sposób natychmiastowy. Formularze są używane do zbierania danych, przyjmowania poleceń CGI, a także do sterowania działaniem aplikacji.

     Aby dane z formularza HTML mogły zostać przetworzone, przeglądarka wysyła je poprzez żądanie HTTP. Skrypt CGI analizuje dane dopiero po ich dotarciu do serwera.

Żądanie GET

Elementy generowane przez formularz umieszczane są w łańcuchu zapytania, który jest częścią URL-a przekazywanego w wierszu żądania.

Żądanie POST

Elementy generowane przez formualrz umieszczane są w treści żądania HTTP. 

Kodowanie

Zanim przeglądarka wyśle do serwera dane z elementami formularza, musi je zakodować. Obecnie istnieją dwie różne formy kodowania:
1 - application/x-www-form-urlencoded - kodowanie domyślne,
2 - multipart/form-data - używana głównie z formularzami umożliwiającymi wysyłanie pliku do serwera Web.

Każdy element formularza HTML ma dwa atrybuty: nazwę i wartość.

Kodowanie application/x-www-form-urlencoded
a - przeglądarka odczytuje nazwy i wartości każdego elementu formularza.
b - koduje zebrane pary wg reguł kodowania w URL'ach, np. "To kot Ali!" zakodowany będzie "To+kot+Ali%21".
c - przeglądarka łączy każdą parę nazwa-wartość znakiem równości, natomiast poszczególne pary znakiem "&".

Przykładowy formularz umieszczony na stronie WWW.

<FORM ACTION="/cgi/register" METHOD="POST">
   <P>
        Imie i nazwisko: <INPUT TYPE="TEXT" NAME="naz_imie"><BR>
        Adres e-mail: <INPUT TYPE="TEXT" NAME="email"<BR>
   </P>
  <INPUT TYPE="SUBMIT" VALUE="Zarejestruj">
</FORM>

Po naciśnięciu przycisku zlecenia wysyłki - Zarejestruj, przeglądarka koduje elementy tego formularza dla danych JakiesImie, JakiesNazwisko oraz ktos@gdziestam.com w postaci:
naz_imie=JakiesImie+JakiesNazwisko&email=ktos%40gdziestam.com

Ze względu na użytą metodę POST łańcuch zostałby dołączony do żądania HTTP jako treść wiadomosci wyglądającej następująco:
POST /cgi/register HTTP/1.1
Host: AdresSerweraWeb
Content-Length: 62
Content-Type:  application/x-www-form-urlencoded

naz_imie=JakiesImie+JakiesNazwisko&email=ktos%40gdziestam.com

Jeżeli metodą byłoby GET, to żądanie zostałoby sformułowane następująco:
GET /cgi/register?naz_imie=JakiesImie+JakiesNazwisko&email=ktos%40gdziestam.com HTTP/1.1
host: AdresSerweraWeb

Znaczniki formularzy

Znacznik <FORM> </FORM>

Między nimi umieszczamy wszystkie pozostałe elementy formularza.

Atrybuty <FORM>

METHOD: Metoda żądania HTTP - GET/POST. Wielkość liter nie ma znaczenia. Domyślnie przyjmowana wartość GET, jeśli nie podana.
ACTION: Określa zazwyczaj URL skryptu CGI, który powinien odebrać żądanie HTTP.
ENCTYPE: Atrybut ten ma znaczenie tylko dla metody POST (żądania GET nie mają części zasadniczej). Standardowo i domyślnie application/x-www-form-urlencoded. Jedynie do wysyłania plików używany jest multipart/form-data.
onSubmit: Dotyczy obsługi zdarzeń i określa kod JavaScriptu, który powinien być wykonany podczas zlecania wysyłania formularza.

UWAGA: Dokument może zawierać wiele formularzy, ale nie można zagnieżdżać ich jeden w drugim!

Znacznik <INPUT>

<INPUT TYPE="typ" NAME="nazwa" VALUE="wartosc"> - schemat ogólny wspólny dla wszystkich typów.

Atrybuty wspólne <INPUT>

TYPE: Typ elementu formularza.
NAME: Nazwa elementu. Bardzo istotna, gdyż skrypt CGI sięga do wartości poprzez nazwę.
VALUE: Wartość zależna od typu elementu.

Typy znacznika <INPUT>

Pola tekstowe-text 

Jest to typ domyślny. Pominięcie atrybutu TYPE da nam właśnie ten typ pola.
Dodatkowe atrybuty:
VALUE: Określa tekst wyświetlany w polu tekstowym. Domyślnie pusty łańcuch.
SIZE: Określa szerokość w znakach pola tekstowego. Domyślnie 20. Przeglądarki różnie interpretują to w zależności od wybranej czcionki.
MAXLENGTH: Maksymalna liczba znaków pola. Domyslnie bez ograniczeń.
onFocus, onBlur, onChange: Procedury JScriptowe obsługi wywoływane podczas tych zdarzeń.

Pola haseł-psassword

Podobny do pola tekstowego, te same atrybuty. Zamiast znaków wyświetla gwiazdki. Zabezpiecza jedynie przed podejrzeniem. Wartość nie jest szyfrowana podczas transferu do serwera WWW, hasła jawnie wchodzą w skład łańcucha zapytania żądania GET.

Pola ukryte-hiden

Niewidoczne dla użytkownika. Nie zapewniają jednak bezpieczeństwa - wystarczy edytować źródło HTML. Przydatne przy przesyłaniu informacji pomiędzy formularzami. Pola te mają atrybuty tylko NAME i VALUE.

Pola wyboru-checkbox 

Służą do wskazania przez użytkownika danej możliwości wyboru. Jeśli nie jest zaznaczone, to ani jego nazwa ani wartość nie są zwracane. Możliwe jest użycie kilku pól o tej samej nazwie.
Atreybuty pól wyboru:
VALUE: Określa wartość, która jest włączana do żądania, gdy pole wyboru jest zaznaczone. Jeśli atrybut nie zostanie podany, wartością zwróconą przez pole jest "ON". Jeśli pole nie zostanie zaznaczone, to nie zostaną wysłane ani nazwa, ani jego wartość.
CHECKED: Wskazuje, że pole wyboru powinno być domyślnie zaznaczone. Atrybut pominięty - pole nie zaznaczone.
onCheck: Atrybut obsługi JScript wskazujący kod w JS, który powinien zostać wykonany po zaznaczeniu pola.

Przyciski opcji-radio 

Podobne do pól wyboru, ale działają niezależnie, mają te same atrybuty co pola wyboru. Jeżeli jedno jest zaznaczone (CHECKED) - pozostałe odznaczone. Pomicięcie VALUE nie ma sensu, bo skrypt CGI nie będzie w stanie rozróżnić, który z grupy przycisków opcji jest "ON" - wszystkie zwrócą tą wartość. Użycie CHECKED w kilku przyciskach opcji o tej samej nazwie nie jest poprawne.

Przyciski zlecania wysyłki-submit 

Służy do wysyłania zawartości formularza. Po kliknięciu na przycisk, przeglądarka uruchamia skojarzoną z przyciskiem JScriptową procedurę obsługoi OnSubmit, formatuje żądanie HTTP, a następnie wysyła je do URL podanego w atrybucie ACTION formularza. Przy wysyłaniu formularza uwzględniana jest nazwa i wartość tylko klikniętego przycisku - jeśli jest ich więcej niż jeden tego typu.
Atrybuty:
VALUE: Określa tekst, który powinien zostać wyświetlony na przycisku oraz wartość przypisywaną do elementu wysyłanego zwrotnie z formularzem. Jeśli wartość zostanie pominięta, przeglądarka oparza przycisk etykietą domyślną "Wyślij" lub  "Submit" i nie wyśle jego nazwy ani wartości.
onClick: JScriptowa procedura obsługi wykonywana po kliknięciu przycisku. Zwrócenie przez kod false powoduje anulowanie wysyłania.

Przyciski zerowania-reset 

Umożliwia przywrócenie domyślnych wartości wszystkich pól formularza. Użycie go nie pociąga za sobą reakcji ze strony skryptów. Umieszczenie na jednym formularzu kilku takich przycisków nie jest błędem, ale jest zbyteczne.
Atrybuty:
NAME: Ani nazwa, ani wartość nie są przekazywane. Zastosowanie wyłącznie w JS.
VALUE: Etykieta tekstowa.
onClick: Określa kod w JScripcie wykonywany po kliknięciu nań. Zwrócenie false powoduje anulowanie operacji zerowania.

Przyciski graficzne-image

Funkcję przycisków mogą pełnić obrazki. Działanie nie różni się od działania przycisków zlecania wysyłki. Dają większą swobodę co do wyglądu przycisku.
Atrybuty:
VALUE: Wysyłany przez przeglądarki tekstowe jako wartość elementu.
SRC: Określa URL obrazka.
onClick: Określa kod w JScripcie wykonywany po kliknięciu nań. Zwrócenie false powoduje anulowanie operacji zerowania.

Przyciski zwykłe-button 

Brak specjalnychfunkcji.
Atrybuty:
NAME: Określa nazwę przycisku, ale nigdy nie jest włączany do wysyłanego żądania, więc zastosowanie ogranicza się do JScript.
VALUE: Określa napis na przycisku.
onClick: Określa kod JS uruchomiony po kliknięciu. Wartość zwracana przez ten kod nie pociąga za sobą żadnych skutków.

Nowym elementem HTML 4 jest znacznik BUTTON, który jest podobny do klasycznego INPUT, ale pozwala wprowadzić do "klikalngo" przycisku znacznie więcej elementów.  <BUTTON>Treść przycisku</BUTTON>

Znacznik <SELECT>  </SELECT>

SELECT służy do tworzenia list, gdzie użytkownicy mogą wybierać spośród określonych pozycji. Można utworzyć listę przewijaną oraz listę rozwijaną. W przypadku list przewijanych można umożliwić wybór kilku pozycji naraz. Pozycje kodowane są jako osobne pary nazwa-wartość jakby były określone za pomocą kilku osobnych elementów formularza. 

Atrybuty <SELECT>

SIZE: Liczba widocznych wierszy listy. 1 oznacza postać listy rozwijanej.
MULTIPLE: Umożliwia zaznaczenie kilku pozycji jednocześnie. Możliwe gdy wartość SIZE jest większa niż 1.

Znacznik <OPTION> </OPTION>

Znacznik <SELECT> nie ma atrybutu VALUE. Każdą ewentualną wartość należy objąć znacznikiem <OPTION>.
Atrybuty:
SELECTED: Dana pozycja jest pozycją domyślną, zaznaczoną. Nieobowiązkowy. Podczas wysyłania formularza, razem z wartością utworzoną przez zaznaczone opcje wysyłana jest także nazwa znacznika <SELECT>.
VALUE: Określa wartość przekazywaną wtedy, gdy dana opcja jest zaznaczona. Jeśli atrybut pominięty, domyslnie tekst zawarty między znacznikami <OPTION> i </OPTION>

Znacznik <TEXTAREA> </TEXTAREA>

Umożliwia wprowadzanie kilku wierszy tekstu. Obszar tekstowy zdefiniowany między znacznikiem otwierającym i zamykającym. Brak jest atrybutu VALUE. Tekst domyślny umieszcza się między znacznikiem otwierającym i zamykającym. Inaczej niż w przypadku innych znaczników, białe znaki (spacje, przejście do nowego wiersza) nie są ignorowane. 

Atrybuty <TEXTAREA>

COLUMNS: Szerokość obszaru tekstowego w znakach. Interpretowany różnie, w zależności od przeglądarki i wyboru czcionki.
ROWS: Liczba wierszy wyświetlanych w obszarze tekstowym.
WRAP: Nie jest ujęty w HTML4. Co ma zrobić przeglądarka gdy tekst dojdzie do prawej krawędzi pola (zawijać, czy nie). Nadanie wartości "virtual" - zawijanie w obszarze tekstowym, wysyłany bez znaków podziału wiersza, "physical" - zawijanie ale z wysyłaniem znaków podziału wiersza, "none" - przewijanie w poziomie, domyślne.