CGI - Common Gateway Interface (Uniwersalny Interfejs komunikacyjny) to ujednolicona metoda przesyłania informacji pomiędzy serwerem a skryptem. Skrypt CGI to program, najczęściej pisany w języku programowania Pearl, który porozumiewa się z serwerem w standardowy (CGI) sposób.

W formularzu każdy element musi mieć nazwę oraz wartość. Przesyłane dane są identyfikowane przez nazwę, a wartości to dane wpisywane przez projektanta strony WWW lub jej użytkownika. Po kliknięciu na przycisk dostarczający do serwera przesyłane są pary nazwa-wartość każdego elementu formularza. Skrypt CGI odbiera te pary i segreguje je tak, by można je odczytać i zrozumieć. Do zadań skryptów CGI należy pobranie wszystkich par nazwa-wartość i rozdzielenie ich na niezależne elementy. Oprócz tego wykonują one na tych parach różne operacje, jak wyświetlenie, pomnożenie wartości pól, przesłanie wiadomości przez e-mail itp. Można tworzyć skrypty, które będą obsługiwać pogawędki, książki gości, liczniki czy gry.

Skryty CGI mogą udostępnić serwer intruzom. Dlatego nie wszyscy dostawcy Internetu dopuszczają korzystanie z nich. Istnieje jednak możliwość wykorzystania skryptu znajdującego się na wyspecjalizowanym serwerze.

Aby korzystać ze skryptów CGI trzeba je najpierw zdobyć lub napisać samemu. Najłatwiej jest po prostu ściągnąć skrypt z jednej z wielu stron WWW poświeconych tej dziedzinie. Po znalezieniu interesującego skryptu należy pamiętać zmienić w nim ścieżki dostępu, tak aby pasował do tworzonej strony. I na samym końcu oczywiście dołączyć skrypt do formularza.

Formularz składa się z 3 ważnych części. Należą do nich: znacznik FORM - zawiera adres URL skryptu CGI, służącego do obsługi przesyłanych danych; elementy formularza, czyli pola tekstowe i listy; oraz przycisk powodujący przesyłanie na serwer danych z formularza.

Zawartość formularza umieszcza się pomiędzy znacznikami <FORM></FORM>. Następnie ważna jest akcja wykonywana przez komputer, po tym jak użytkownik zechce przesłać informacje do autora. Dlatego w definicji formularza powinno znaleźć się polecenie ACTION=akcja. Trzeba określić, w jaki sposób przeglądarka użytkownika będzie się komunikować z serwerem, zależnie od tego, czy ma ona przesyłać czy odbierać informacje. Należy wybrać jedną z dwóch możliwości: POST lub GET. Opcjonalnie można dodać temat listu, czyli subject po znaku zapytania, wtedy autor formularza otrzyma go właśnie z taką informacją w polu tematu listu. Ostatecznie wyglądałoby to tak w przypadku, gdy użytkownik miałby wysłać informacje za pomocą poczty elektronicznej:

Przykład:

W takim przypadku autor formularza dostałby w swojej skrzynce wiadomość z plikiem, w którym zamieszona byłaby informacja:

Istnieje możliwość nie zagłębiania się w skrypty CGI i otrzymywania danych z formularzy (w postaci nie do końca sformatowanej) pocztą elektroniczną pod wskazany adres.

<FORM METHOD=POST ACTION="mailto:adres@email.pl" ENCTYPE="text/plain">, gdzie:

ENCTYPE="text/plain" odpowiada za poprawne kodowanie danych
ACTION= mailto:adres@email.pl to adres poczty elektronicznej, pod który będą wysłane dane.

Przykład:

W przypadku nie zmienienia wpisu przez użytkownika autor otrzyma plik z informacjami:

imie=podaj imie
nazwisko=podaj nazwisko
wiek=ile masz lat

UWAGI:
• Starsze przeglądarki nie obsługują tej funkcji.
• Po kliknięciu na przycisk SUBMIT użytkownik otrzyma informacje, że jego/jej adres e-mail będzie przesłany razem z danymi, które  nie będą zaszyfrowane.

Pole tekstowe zawierają się w jednej linii tekstu, najczęściej wykorzystywane są do wpisania nazwiska, adresu i innych tego typu informacji. Pole tekstowe definiujemy następująco:

<INPUT TYPE="text" NAME="nazwa">, gdzie nazwa to tekst, identyfikuje on dane wprowadzone przez użytkownika, dane na serwerze oraz w skrypcie.

Opcjonalne atrybuty to:

VALUE="wartość", gdzie wartość to dane, które będą początkowo wyświetlone w polu, zostaną one przesłane na serwer, jeśli użytkownik nie wpisze niczego innego.
SIZE="n", gdzie n to szerokość pola wyrażona w znakach.
MAXLENGHT="n", gdzie n to maksymalna liczba znaków, które mogą być wprowadzone w polu.

Przykład:

<INPUT TYPE="text" NAME="miasto" VALUE="gdzie mieszkasz?" SIZE="20" MAXLENGHT="40">

UWAGI:
• Domyślnie wartość atrybutu SIZE wynosi 20. Ilość znaków wpisanych przez użytkownika mogą przekroczyć tą wartość, ale nie więcej niż określona atrybutem MAXLENGHT.
• Nawet jeśli w polu nie zostanie wpisana żadna wartość, to i tak odpowiadający mu atrybut NAME zostanie przesłany na serwer ( wraz z pustą wartością atrybutu VALUE).
• Parametr TYPE określa rodzaj pola, bez niego domyślnie pole będzie polem tekstowym.

Różnica pomiędzy polem hasła a polem tekstowym polega na tym, że po wpisaniu w polu hasła znaków, widoczne są one jako gwiazdki; jednak dane przy wysyłaniu na serwer nie są szyfrowane.

<INPUTE TYPE="password" NAME="nazwa">, gdzie nazwa to tekst, który będzie służył do identyfikacji danych na serwerze i w skrypcie.

Podobnie jak w polu tekstowym można dodać trybuty:

Przykład:

<INPUT TYPE="password" NAME="haslo" SIZE="10" MAXLENGHT="20">

Podaj hasło: 

Dzięki przyciskom radiowym (ang. radio buttons) można wprowadzić przełącznik, który da użytkownikowi możliwość wyboru jednej z wartości. Kliknięcie na wartoć powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Typ ten czyli TYPE="radio" stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne.

Nazwą pola jest "nazwa", VALUE przybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwości "checked", pole to będzie domyślnie zaznaczone.

Przykład:

Podaj swój wiek

Obszary tekstowe umożliwiają wprowadzanie dłuższego pola, często używane są do komentarzy lub pytań. Mogą zajmować one obszar całej strony, lub ich rozmiar może się zwiększać w miarę wpisywania do nich nowych informacji. Do wprowadzenia obszarów tekstowych służy znacznik TEXTAREA.

<TEXTAREA NAME=nazwa>, gdzie nazwa to tekst identyfikujący dane na serwerze i w skrypcie;

Dodatkowo można użyć atrybutów:

UWAGI:
• W jednym bloku tekstowym użytkownik może wprowadzić do 32700 znaków, w razie potrzeby pojawiają się paski przewijania.

W przypadku pola wyboru (ang. checkbox) użytkownik ma także do wyboru kilka opcji, lecz zasadnicza różnica pomiędzy nim, a przyciskiem opcji polega na tym, że może on zaznaczyć tyle pól ile zechce. TYPE="checkbox" wprowadza pole w postaci kwadratu, kliknięcie na nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Po zdefiniowaniu kilku pól, użytkownik będzie mógł zaznaczyć parę z nich lub wszystkie.

<INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość">, gdzie nazwa identyfikuje dane grupy pól wyboru;  wartość zostanie wysłana na serwer zaraz po zaznaczeniu.

W razie potrzeby można użyć atrybutu CHECKED, aby domyślnie jedno z pól wyboru było zaznaczone po załadowaniu strony przez przeglądarkę.

NAME jest nazwą pola. Każdy kolejny INPUT zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych. VALUE zmienia się, zależnie od wartości. Wartość ta zostanie przesłana do autora. W kolejnych wierszach musimy wpisać różne wartości. Za poleceniem INPUT wpisujemy jeszcze raz "nazwę", aby była widoczna dla czytelnika.

Jakie znasz języki obce:

Można tworzyć rozwijane menu, zawierające kilka opcji, z których użytkownik może wybrać jedną lub kilka. Tworzy się je za pomocą dwóch znaczników - SELECT oraz OPTION. Wspólny dla wszystkich opcji atrybut NAME określa się w znaczniku SELECT, a poszczególne atrybuty VALUE - w znacznikach OPTION.

Składnia menu jest następująca:

W znaczniku SELECT można użyć następujące atrybuty:

SIZE="n", gdzie n jest liczba pozycji widocznych po załadowaniu strony w przeglądarce
MULTIPLE - dzięki temu użytkownik będzie mógł zaznaczyć więcej niż jedną pozycję w menu.

Przykład:

Wybierz z listy jaką przeglądarkę używasz:

Oraz w znaczniku OPTION:

UWAGI:
• W przypadku, gdy wartość atrybutu SIZE jest większa od ilości opcji w menu, użytkownik może usunąć zaznaczenie wszystkich opcji klikając na pustym obszarze poniżej nich.
• Bez określenia atrybutu SIZE w menu, użytkownik nie będzie mógł z niego praktycznie nic wybrać.

Przy definiowaniu menu z dużą ilością opcji do wyboru warto pogrupować je w kategorie i umieścić w podmenu. Po stworzeniu menu, przed pierwszym znacznikiem OPTION należy umieścić:

Po ostatnim znaczniku OPTION w danej grupie należy wpisać </OPTGROUP>. Dla każdego podmenu należy postępować podobnie.

Przykład:

Istnieje możliwość, aby użytkownik strony WWW przesłał nie tylko sam formularz, ale cały plik. Aby umożliwić przesłanie pliku należy użyć metody POST w znaczniku FORM, oraz nie zapomnieć o określeniu ENCTYPE w znaczniku INPUT. Przy tworzeniu pola przesyłu powstaje pole, gdzie użytkownik wprowadza ścieżkę dostępu i nazwę pliku, oraz przycisk przeglądaj, by mógł on wyszukać ten plik.

<INPUT="file" NAME="tytuł" SIZE="n">,gdzie:

INPUT="file" służy do stworzenia pola przesyłu pliku oraz przycisku Przeglądaj.

NAME="tytuł", tytuł jest dla serwera identyfikatorem przesyłanego pliku.

SIZE="n" określa ilość n znaków, w których zostaje wprowadzona nazwa i ścieżka dostępu do pliku.

W poleceniu definiującym formularz powinien się znaleźć wpis:
<FORM ENCTYPE="multipart/form-data" ACTION=... >

Przykład:

Wyślij ten plik <INPUT type=file name=plik size="20">

Wyślij ten plik

UWAGI:
• Tylko Netscape potrafi wysłać tekstowy załącznik. Internet Explorer, nawet w najnowszej wersji, nie dołącza plików.
• Atrybut SIZE jest opcjonalny. Domyślnie jest to 20, lecz jednak lepiej jest wybrać większą liczbę znaków dla ścieżek dostępu.

W formularzu HTML można zawrzeć nie widoczne dla użytkownika pola, zwane polami ukrytymi. Nie jest to popularne, choć dość przydatne może się stać dla autora strony. W polach tych zapisywane są informacje wcześniej podane przez wypełniającego formularz. Dzięki temu użytkownik poproszony o wypełnienie następnego formularza nie będzie musiał podawać drugi raz tych samych danych. Zamiast tego autor będzie zapisywał w polach ukrytych informacje z wcześniej wypełnionych formularzy, łącząc je z podanymi przez użytkownika w bieżącym formularzu.

<INPUT TYPE="hidden" NAME="nazwa" VALUE="wartość">, gdzie nazwa jest identyfikatorem przechowywanych danych; a wartość to informacja która ma być przechowywana.

Przykład:

<INPUT TYPE="hidden" NAME="poznan" VALUE="miasto">

UWAGI:
• Nie ma znaczenia, w którym miejscu zostaną zdefiniowane pola ukryte, wystarczy że zostaną zapisane miedzy znacznikami <FORM></FORM>. Nie są one widoczne w przeglądarce.
• W przypadku, gdy wartości atrybutów NAME oraz VALUE złożone są ze znaków alfanumerycznych, nie trzeba zawierać ich w cudzysłowach.

Aby formularz był przydatny należy umieścić w nim przycisk dostarczający, dzięki któremu użytkownik wyśle dane do serwera. Taki przycisk tworzy się następująco:

Przykład:

<INPUT TYPE="submit" VALUE="przycisk">

A tu przykład przycisku, dzięki któremu można przesłać autorowi wiadomość:

UWAGI:
• Bez określenia VALUE na przycisku wyświetli się napis "Submit Query".
• Bez podania wartości atrybutu NAME para nazwa-wartość nie będzie przesłana do skryptu. Jednak informacje o przycisku dostarczającym nie są potrzebne.

W HTML 4 dodano kilka znaczników, które umożliwiają stworzenie bardziej interesujących przycisków dostarczających. Można dodawać ilustracje, zmieniać czcionkę czy kolor tła.

Do tworzenia tych przycisków służy wpis:

Opcjonalnie można dodać atrybut STYLE, który zmienia wygląd tekstu na przycisku.

Przykład:

STYLE="font=19pt Arial New; background:green

Definicja znacznika BUTTON mogłaby wyglądać następująco:

Po zakończeniu definiowania znacznika BUTTON można wprowadzić tekst, który ma być widoczny na przycisku. Następnie należy wpisać:

<IMG SRC="obrazek.jpeg">, gdzie obrazek.jpeg to ilustracja, która ma być widoczna na przycisku.

Całość powinna być zakończona zamykającym znacznikiem </BUTTON>.

Przykład:

UWAGI:
• Można stworzyć przycisk bez ilustracji  pomijając sekcje znacznika <IMG SRC="obrazek.jpeg">.
• Do tej pory znacznik BUTTON był obsługiwany tylko przez Internet Explorer 4, jednak jest już on częścią standardu języka HTML 4.

Ułatwieniem w formularzu będzie umieszczenie przycisku RESET, który zmaże całą zawartość formularza i umożliwi użytkownikowi wypełnienie go od początku. Po kliknięciu na taki przycisk wpisane elementy formularza będą wymazane i zostaną im przywrócone wartość domyślne, określone w definicji formularza.

Przycisk RESET tworzy się następująco:

<INPUT TYP="reset" VALUE="nazwa przycisku">, gdzie nazwa przycisku to napis, który zostanie wyświetlony na nim.

Jeżeli użytkownik zmieni zdanie może wymazać wpisany adres.

UWAGI:
• Atrybut VALUE nie jest konieczny, domyślnie wyświetlany jest napis Reset.

Aktywny obrazek to połączenie elementu umożliwiającego wprowadzenie danych oraz przycisku dostarczającego. Kliknięcie na taki obrazek powoduje przesłanie na serwer współrzędnych położenia wskaźnika myszki określonych za pomocą dwóch par nazwa-wartość. W takich parach nazwy generowane są przez dodanie wyrażeń "x" i "y" do wartości atrybutu NAME. Wartości tych par określają poziome i pionowe położenie wskaźnika myszy w obszarze obrazka.

<INPUT TYPE="image" NAME="nazwa" SRC="adres URL obrazka">

Przykład:

UWAGI:

• Dane na serwer są wysyłane automatycznie zaraz po kliknięciu na aktywny obrazek. Dlatego lepiej jest umieścić go na końcu formularza, aby po wypełnieniu całości dane zostały wysłane na serwer.

• Umieszczenie przycisku SUBMIT w takim przypadku nie jest konieczne.

Jeżeli tworzymy formularz służący do zbierania wielu informacji, zorganizowanie jego elementów ułatwi poprawne wypełnienie go przez użytkownika. Elementy formularza można pogrupować za pomocą znacznika FIELDSET, który wpisywany jest za znacznikiem <FORM>, ale przed definicjami poszczególnych elementów.

UWAGI:
• Nie trzeba wpisywać legendy.
• Nie wszystkie przeglądarki rozpoznają poprawnie znaczniki odpowiedzialne za organizację formularza.

Użytkownicy, którzy korzystają z klawiatury do obsługi przeglądarki, mogą poruszać się po elementach formularza za pomocą klawisza TAB, od góry do dołu. Można zmienić tę kolejność poprzez dodanie atrybutu TABINDEX w elementach formularzy (a także w definicjach połączeń i map internetowych). Wtedy elementy na stronie, czy w formularzu będą wybierane od najniższego numeru określonego w TABINDEX.

Do określenia kolejności dla klawisza TAB używa się atrybutu TABINDEX w definicji elementu.

Przykład:

<INPUT type=radio value=wartość name=nazwa checked tabindex=0>

UWAGI:
• Wartości w TABINDEX mogą zawierać się w przedziale od 0 do 32767.
• Domyślnie kolejność dla TAB'a jest odpowiednia dla elementów w dokumencie HTML.

• Atrybutu TABINDEX w formularzach można używać dla pól tekstowych, pól haseł, pól wyboru, przycisków radiowych, bloków tekstu, menu i przycisków.

• Niezależnie od zdefiniowanych atrybutów TABINDEX pierwsze naciśniecie TAB wybiera adres aktualnej strony, drugie wybiera element z najniższym numerem TABINDEX na tej stronie.

W HTML 4 wprowadzono możliwość definiowania klawiszy skrótów dla fragmentów strony, w tym także formularzy. Wciśnięcie kombinacji klawiszy spowoduje wybranie danego elementu do wprowadzania danych (w przypadku pól tekstowych) luz zaznaczenie elementu (np. przycisku radiowego). Należy pamiętać, aby nie wprowadzać klawiszy skrótów, które już wcześniej odpowiedzialne są za jakąś funkcje np. CTRL+N (który służy do otwierania nowego okna w przeglądarce Microsoftu). Do zdefiniowania klawiszu skrótu dla elementu formularza używa się znacznika ACCESSKEY wewnątrz danego elementu.

Przykład:

Poznań, skrót ALT+U <INPUT type=radio value=poznan name=miasto ACCESSKEY="U">

UWAGI:
• Aby w Windows zadziałały klawisze skrótów należy nacisnąć ALT razem z daną literą.
• Klawisze skrótów nie działają poprawnie w większości przeglądarek.

Formularz można uczynić nieaktywnym dzięki znacznikowi DISABLED, na przykład do czasu gdy użytkownik nie wpisze wszystkich danych. Atrybut ten można dodawać do dowolnego elementu formularza, jednak najkorzystniejsze będzie użycie go razem ze znacznikiem INPUT, definiującego przycisk dostarczający.

Przykład:

<INPUT DISABLED NAME="nazwisko" VALUE="podaj nazwisko" size="20">

Czasem przydatne może się okazać uniemożliwienie wprowadzania zmian użytkownikowi, na przykład przy żądaniu potwierdzenia pewnych danych lub wprowadzenia ich ponownie, nie wymazując poprzednich. W takim wypadku elementy, które nie mają ulec zmianie zaznaczane są jako "tylko do odczytu". W znaczniku definiującym element należy wpisać READONLY.

Przykład:

W taki pole nie ma możliwości nic wpisać:<INPUT READONLY NAME="pusty" VALUE="" size="20">

UWAGI:
• Atrybut READONLY można używać łącznie z polami tekstowymi, polami haseł, polami wyboru, przyciskami radiowymi i blokami tekstowymi.