Często strony internetowe to nie tylko zawartość statyczna, jak tekst i obrazki, ale także formularze wysyłające pewne dane do skryptów (np. formularze umożliwiające zarejestrowanie się na wszelkiego rodzaju stronach). Dane te mogą być następnie przetwarzane, przechowywane, bądź mogą posłużyć do wysłania wiadomości e-mail.
Mimo że z formularzy najczęściej korzystamy w połączeniu ze skryptami tworzonymi w takich językach jak PHP czy Perl, to jednak warto zapoznać się z ich budową, nawet gdy nie zna się żadnego języka skryptowego.
Wiele gotowych skryptów można bowiem odnaleźć w internecie, a znajomość sposobu budowy formularzy może w znacznym stopniu ułatwić dostosowanie ich wyglądu do własnych potrzeb.
Szablon formularza
Opis każdego formularza musi być umieszczony w znaczniku {html}
{/html}. Teoretycznie wszystkie znaczniki opisujące poszczególne kontrolki formularza będą wyświetlane również wówczas, gdy umieścimy je poza tym blokiem, jednak nie będzie można w prosty sposób wysłać ich zawartości do skryptu.
Umieszczenie kontrolek poza formularzem może być jednak przydatne, gdy zawartość kontrolki nie ma być wysłana do skryptu na serwerze, zamiast tego ma być obsłużona przez skrypt JavaScript umieszczony na stronie.
Znacznik {html}
Zawartość formularza może zostać wysłana także bezpośrednio na nasz adres e-mail. Należy wówczas w polu action (zamiast adresu skryptu) wpisać adres w postaci:
mailto:twój_adres@email.pl?subject=temat_emaila
czyli znacznik form może wyglądać następująco:
Nie da się jednak w ten sposób przesłać plików, natomiast treść takiego e-maila będzie mało czytelna i będzie miała postać:
nazwa_kontrolki=wartość_wpisana_przez_uzytkownika&nazwa_kontrolki2= wartość_wpisana_przez_użytkownika&...
GET i POST
Dane z formularzy mogą być przekazywane jedną z dwóch metod – get lub post. Metoda get powoduje przesłanie zawartości formularza w adresie URL. Adres taki wygląda wówczas podobnie do tego.
http://www.twojastrona.com?imie=Jan&nazwisko=Kowalski;ulica=Piastowska
Metoda post powoduje ukrycie danych przesyłanych z formularza przed użytkownikiem – dane te zostają przesłane w nagłówku (nie musimy wiedzieć czym jest nagłówek http, aby korzystać z formularzy czy HTML-a.
Może się wydawać, że zawsze lepiej przesyłać dane metodą post, bo po co zaśmiecać adres URL? Trzeba jednak pamiętać, że metoda post uniemożliwia skopiowanie adresu z przesyłaną treścią – dlatego właśnie, na przykład, Google przesyła zapytanie metodą get (dzięki temu adres prowadzący do wyników wyszukiwania można swobodnie skopiować i wysłać do znajomego czy też dodać do ulubionych).
Kontrolki formularza
Aby formularz mógł spełniać swoje zadanie, należy umieścić w nim kontrolki. Do umieszczenia większości kontrolek wykorzystuje się znacznik {html}{/html}. Oto najważniejsze przyjmowane przez niego parametry:
- type – określa typ wyświetlanej kontrolki (parametr ten zostanie dokładniej opisany w dalszej części artykułu),
- name – nazwa, pod którą wysyłana będzie wartość danej kontrolki (każda kontrolka powinna mieć unikalną nazwę),
- value – wartość jaką początkowo przyjmuje kontrolka (parametr ten nie jest wymagany),
- checked – określa czy przycisk opcji (patrz dalej) ma być zaznaczony (jedyną dozwoloną wartością tego parametru jest checked),
- disabled – określa czy kontrolka ma być włączona,
- size – określa w pikselach wielkość kontrolki (w przypadku pól tekstowych oraz pól haseł wielkość jest wyrażana w znakach),
- maxlength – określa maksymalną liczbę znaków jakie można wpisać w polu,
- tabindex – określa kolejność przechodzenia pomiędzy kontrolkami umieszczonymi na stronie, za pomocą klawisza Tab.
Typ kontrolek ustala się za pomocą parametru type. Parametr ten może przyjąć jedną z następujących wartości:
- text – jednolinijkowe pole służące do wprowadzania tekstu,
- password – pole używane do wprowadzania hasła (tekst jest maskowany, najczęściej zamiast tekstu wyświetlane są gwiazdki),
- checkbox – pole wielokrotnego wyboru; można jednocześnie zaznaczyć wiele elementów tego typu,
- radio – pole jednokrotnego wyboru; można jednocześnie zaznaczyć jeden element tego typu,
- submit – tworzy przycisk wysyłający formularz do skryptu określonego w parametrze action znacznika form,
- reset – tworzy przycisk czyszczący formularz, który wymazuje wszystkie wpisane przez użytkownika dane (jeśli pola miały zdefiniowane wartości w parametrze value, to te wartości zostaną ponownie przypisane tym polom),
- file – tworzy pole służące do wybrania pliku z dysku i wysłania go do skryptu,
- image – umieszcza obrazek działający jak przycisk,
- button – tworzy kontrolkę przycisku,
- hidden – tworzy ukrytą kontrolę – jest ona nie widoczna na stronie i służy najczęściej do przekazywania wartości podanej w parametrze value (jedyną dozwoloną wartością tego parametru jest hidden).
Najczęściej formularz zawiera kontrolki służące do wprowadzania danych i dodatkowo w kontrolkę typu submit do ich wysyłania:
Przycisk submit ma nadaną wartość (parametr value). Wartość ta zostanie wyświetlona na przycisku jako jego opis. Na rys. 1 można przyjrzeć się bliżej wyglądowi poszczególnych kontrolek wraz z opisem.
Kontrolki zostały umieszczone w akapicie. Pamiętajmy, że poprawnie utworzony formularz ma kontrolki umieszczone w akapicie, kontenerze ({stala}div{/stala} lub {stala}span{/stala}) bądź w znaczniku fieldset (można je także umieszczać w nagłówkach h1-h6, znacznikach pre czy address, jednak taka konieczność zachodzi o wiele rzadziej).
Mimo że input pozwala stworzyć wiele różnorodnych kontrolek, to niestety kilku nam ciągle brakuje. Do stworzenia dużych, wielolinijkowych pól tekstowych służy znacznik {html}{/html}.
Pozwala on wpisać większą ilość tekstu (jest na przykład używany do wprowadzania postów na wszelkiego rodzaju forach internetowych). Znacznik ten przyjmuje następujące parametry:
- name – to samo znaczenie co w przypadku znacznika {html}{/html},
- rows – wysokość określona liczbą wierszy,
- cols – szerokość określona liczbą kolumn,
- disabled – określa czy kontrolka ma być włączona (jedyną dozwoloną wartością tego parametru jest disabled),
- readonly – zawartość pola jest tylko do odczytu (nie może być modyfikowana przez użytkownika); jedyną dozwoloną wartością tego parametru jest readonly.
Brakuje parametru value? Znacznik ten, w przeciwieństwie do znacznika {html}{/html}, nie występuje w krótkiej postaci. Domyślną wartość stworzonego w ten sposób pola tekstowego powinniśmy umieszczać pomiędzy jego znacznikiem otwierającym a zamykającym:
Ważnymi elementami formularzy są listy (rys. 2). Pola przedstawione na tym rysunku różnią się między sobą zarówno wyglądem, jak i zasadą działania, jednak konstrukcja obu niewiele się różni od strony HTML-a. Listy tworzy się za pomocą znacznika {html}{/html}. Przyjmuje on następujące parametry:
- name – ma to samo znaczenie co w przypadku znacznika {html}{/html},
- size – wielkość określona w ilościach wierszy; podanie tego parametry oznacza, że chcemy utworzyć listę przewijaną,
- multiple – oznacza, że lista przewijana ma być wielokrotnego wyboru (jedyną dozwoloną wartością tego parametru jest multiple),
- disabled – oznacza, że chcemy wyłączyć kontrolkę (jedyną dozwoloną wartością tego parametru jest disabled).
Do pełnej funkcjonalności list potrzebujemy jeszcze elementów w niej wyświetlanych. Każdy element to osobny znacznik {html}{/html}. Znacznik ten przyjmuje parametry disable oraz value, które mają typowe znaczenie, oraz dodatkowo parametr selected, określający czy dana opcja jest zaznaczona. Samą treść opcji, która ma zostać wyświetlona, podajemy pomiędzy znacznikiem otwierającym a zamykającym.
Zdefiniowanie parametru size na więcej niż 1 lub parametru multiple na wartość multiple (to jest jedyna poprawna wartość tego parametru), powoduje utworzenie listy przewijanej. W celu zaznaczenia wielu pozycji na liście wielokrotnego wyboru, należy klikać je przytrzymując na klawiaturze jednocześnie klawisz Ctrl. W każdym innym przypadku utworzona zostanie lista rozwijana. A oto przykład prostej listy:
Na zakończenie omawiania list warto wspomnieć, że ich elementy można grupować. Do grupowania elementów listy używa się znacznika {html}{/html}. Znacznik ten przyjmuje najczęściej parametr value, będący nazwą grupy.
Użycie znacznika {stala}optgroup{/stala} sprowadza się do umieszczenia pomiędzy znacznikiem otwierającym a zamykającym znaczników option, które mają należeć do tworzonej grupy. Poniżej znajduje się przykład z pojazdami, które pogrupowaliśmy tym razem na samochody oraz motocykle:
Upiększanie
Poza typowymi kontrolkami formularz warto wyposażyć w etykiety opisujące znaczenie poszczególnych kontrolek i elementy grupujące.
Do tworzenia etykiet służy znacznik {html}{/html}. Pozwala on podpisać kontrolki oraz połączyć etykietę z konkretną kontrolką – połączenie umożliwia wybór kontrolki poprzez kliknięcie na etykiecie. Najważniejszym i najczęściej używanym parametrem etykiety jest for. Określa on identyfikator kontrolki, z którym etykieta ma zostać skojarzona. Jako że parametr for odnosi się do identyfikatora kontrolki, przed jego użyciem musimy zadeklarować odpowiedni identyfikator.
Służy do tego parametr id (który możemy przypisać dowolnemu znacznikowi, co często jest wykorzystywane w połączeniu z arkuszami stylów lub skryptami utworzonymi w języku JavaScript). A oto przykład dodania etykiet do prostego formularza:
Formularze można wzbogacić także o elementy grupujące. Element grupujący powoduje otoczenie zgrupowanych kontrolek ramką. Ramkę można dodatkowo wzbogacić o etykietę. Do grupowania kontrolek używamy znacznika {html}
