HTML HTML:formularze Często strony internetowe to nie tylko za- wartość statyczna, jak tekst i obrazki, ale CZEGO SIĘ DOWIESZ Z TEGO ARTYKUŁU: także formularze wysyłające pewne dane nauczysz się tworzyć formularze do pobiera- nia wszelkiego rodzaju informacji od użytko- do skryptów (np. formularze umożliwiające wników zarejestrowanie się na wszelkiego rodzaju stronach). Dane te mogą być następnie WYMAGANA WIEDZA: podstawowa umiejętnoSć posługiwania się przetwarzane, przechowywane, bądz mogą komputerem oraz systemem Windows posłużyć do wysłania wiadomości e-mail. materiał zawarty w poprzedniej częSci kursu Marcin Staniszczak imo że z formularzy najczęściej korzystamy w połączeniu ze skryp- Nie da się jednak w ten sposób przesłać plików, natomiast treść takiego Mtami tworzonymi w takich językach jak PHP czy Perl, to jednak e-maila będzie mało czytelna i będzie miała postać: warto zapoznać się z ich budową, nawet gdy nie zna się żadnego języka nazwa_kontrolki=wartość_wpisana_przez_uzytkownika& skryptowego. Wiele gotowych skryptów można bowiem odnalezć w inter- nazwa_kontrolki2= wartość_wpisana_przez_użytkownika&... necie, a znajomość sposobu budowy formularzy może w znacznym stopniu ułatwić dostosowanie ich wyglądu do własnych potrzeb. GET i POST Szablon formularza Dane z formularzy mogą być przekazywane jedną z dwóch me- Opis każdego formularza musi być umieszczony w znaczniku . Teoretycznie wszystkie znaczniki opisujące poszczególne kontrolki formularza w adresie URL. Adres taki wygląda wówczas podob- formularza będą wyświetlane również wówczas, gdy umieścimy je poza tym nie do tego (zob. też rys. 1): 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 przydat- http://www.twojastrona.com?imie=Jan&nazwisko=Kowalski; ne, gdy zawartość kontrolki nie będzie wysłana do skryptu na serwerze, ale ulica=Piastowska ma być obsłużona przez skrypt JavaScript umieszczony na stronie. Metoda post powoduje ukrycie danych przesyłanych z formula- Znacznik 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) wpi- sać adres w postaci: mailto:twój_adres@email.pl?subject=temat_emaila czyli znacznik form może wyglądać następująco:
INTERNET.lipiec.2006 94 www.mi.com.pl WEBMASTERING HTML Kontrolki formularza submit tworzy przycisk wysyłający formularz do skryptu określone- Aby formularz mógł spełniać swoje zadanie, należy umieścić w nim kontrolki. Do go w parametrze action znacznika form, umieszczenia większości kontrolek wykorzystuje się znacznik . reset tworzy przycisk czyszczący formularz, który wymazuje Oto najważniejsze przyjmowane przez niego parametry: wszystkie wpisane przez użytkownika dane (jeśli pola miały zdefinio- type określa typ wyświetlanej kontrolki (parametr ten zostanie wane wartości w parametrze value, to te wartości zostaną ponownie dokładniej opisany w dalszej części artykułu), przypisane tym polom), name nazwa, pod którą wysyłana będzie wartość danej kontrolki file tworzy pole służące do wybrania pliku z dysku i wysłania go do (każda kontrolka powinna mieć unikalną nazwę), skryptu, value wartość jaką początkowo przyjmuje kontrolka (parametr ten image umieszcza obrazek działający jak przycisk, nie jest wymagany), button tworzy kontrolkę przycisku, checked określa czy przycisk opcji (patrz dalej) ma być zaznaczony hidden tworzy ukrytą kontrolkę jest ona niewidoczna na stronie (jedyną dozwoloną wartością tego parametru jest checked), i służy najczęściej do przekazywania wartości podanej w parametrze value disabled określa czy kontrolka ma być włączona, (jedyną dozwoloną wartością tego parametru jest hidden). size określa w pikselach wielkość kontrolki (w przypadku pól tek- Najczęściej formularz zawiera kontrolki służące do wprowadzania danych stowych oraz pól haseł wielkość jest wyrażana w znakach), i dodatkowo kontrolkę typu submit do ich wysyłania: maxlength określa maksymalną liczbę znaków jakie można wpisać checkbox pole wielokrotnego wyboru; można jednocześnie zazna- Przycisk submit ma nadaną wartość (parametr value). Wartość ta zo- czyć wiele elementów tego typu, stanie wyświetlona na przycisku jako jego opis. Na rys. 2 można przyjrzeć radio pole jednokrotnego wyboru; można jednocześnie zaznaczyć się bliżej wyglądowi poszczególnych kontrolek wraz z opisem. Kontrolki zo- jeden element tego typu, stały umieszczone w akapicie. Pamiętajmy, że poprawnie utworzony formu- Rys. 2. Wygląd poszczególnych kontrolek możliwych do uzyska- nia za pomocą znacznika 2 Rys. 3. Pole textarea zobacz jak ustawia się domyślną zawartość 3 4 INTERNET.lipiec.2006 95 www.mi.com.pl Rys. 4. Listy różnica pomiędzy listami rozwijanymi a przewijanymi WEBMASTERING HTML larz ma kontrolki umieszczone w akapicie, kontenerze (div lub span) bądz Znacznik ten przyjmuje parametry disable oraz value, które mają typowe w znaczniku fieldset (można je także umieszczać w nagłówkach h1-h6, znacz- znaczenie, oraz dodatkowo parametr selected, określający czy dana opcja nikach pre czy address, jednak taka konieczność zachodzi o wiele rzadziej). jest zaznaczona. Samą treść opcji, która ma zostać wyświetlona, podajemy Mimo że input pozwala stworzyć wiele różnorodnych kontrolek, to nie- pomiędzy znacznikiem otwierającym a zamykającym. stety kilku nam ciągle brakuje. Do stworzenia dużych, wielolinijkowych pól Zdefiniowanie parametru size na więcej niż 1 lub parametru multiple na tekstowych służy znacznik . Pozwala on wpi- wartość multiple (to jest jedyna poprawna wartość tego parametru), po- sać większą ilość tekstu (jest na przykład używany do wprowadzania pos- woduje utworzenie listy przewijanej. W celu zaznaczenia wielu pozycji na tów na wszelkiego rodzaju forach internetowych). Znacznik ten przyjmuje liście wielokrotnego wyboru, należy klikać je przytrzymując na klawiaturze następujące parametry: jednocześnie klawisz Ctrl. W każdym innym przypadku utworzona zostanie name to samo znaczenie co w przypadku znacznika , lista rozwijana (różnicę można zaobserwować na rys. 4). A oto przykład rows wysokość określona liczbą wierszy, prostej listy: cols szerokość określona liczbą kolumn, , nie występuje w krótkiej postaci. Domyślną wartość stworzo- Na zakończenie omawiania list warto wspomnieć, że ich elementy można nego w ten sposób pola tekstowego powinniśmy umieszczać pomiędzy jego grupować. Do grupowania elementów listy używa się znacznika znacznikiem otwierającym a zamykającym (zobacz rys. 3): up>... Znacznik ten przyjmuje najczęściej parametr value, bę-
Ważnymi elementami formularzy są listy (rys. 4). Pola przedstawione na tym rysunku różnią się między sobą zarówno wyglądem, jak i zasadą name ma to samo znaczenie co w przypadku znacznika , size wielkość określona w ilościach wierszy; podanie tego paramet- Na rys. 5 znajduje się przykład w jaki sposób przeglądarki internetowe ry oznacza, że chcemy utworzyć listę przewijaną, wyświetlają grupy list rozwijanych oraz przewijanych. multiple oznacza, że lista przewijana ma być wielokrotnego wyboru (jedyną dozwoloną wartością tego parametru jest multiple), Upiększanie disabled oznacza, że chcemy wyłączyć kontrolkę (jedyną dozwoloną Poza typowymi kontrolkami formularz warto wyposażyć w etykiety opisują- wartością tego parametru jest disabled). ce znaczenie poszczególnych kontrolek i elementy grupujące. Do pełnej funkcjonalności list potrzebujemy jeszcze elementów w niej Do tworzenia etykiet służy znacznik . Pozwala on wyświetlanych. Każdy element to osobny znacznik . podpisać kontrolki oraz połączyć etykietę z konkretną kontrolką połączenie Rys. 6. Etykiety oraz elementy grupujące Rys. 5. Listy grupy na listach rozwijanych oraz przewijanych 6 5 INTERNET.lipiec.2006 96 www.mi.com.pl WEBMASTERING HTML
Znacznik fieldset może w formularzu zastąpić znacznik akapitu (p). Na rys. 6 można zobaczyć jak są wyświetlane etykiety oraz elementy grupują- ce przez przeglądarkę Opera. Style umożliwia wybór kontrolki poprzez kliknięcie na etykiecie. Najważniejszym Poszczególne elementy formularza zarówno kontrolki, jak i etykiety czy i najczęściej używanym parametrem etykiety jest for. Określa on identyfika- elementy grupujące można dowolnie formatować z użyciem stylów. War- tor kontrolki, z którym etykieta ma zostać skojarzona. Jako że parametr for to poeksperymentować zwłaszcza z elementami grupującymi. Standardo- odnosi się do identyfikatora kontrolki, przed jego użyciem musimy zadekla- wo wyglądają one mało atrakcyjnie, głównie za sprawą tego, że są auto- rować odpowiedni identyfikator. Służy do tego parametr id (który możemy matycznie rozciągane na całą szerokość okna przeglądarki oraz pozosta- przypisać dowolnemu znacznikowi, co często jest wykorzystywane w połą- wiają zbyt mały margines wewnętrzny pomiędzy swoim obramowaniem czeniu z arkuszami stylów lub skryptami utworzonymi w języku JavaScript). a elementami w nich umieszczonymi. A oto przykład dodania etykiet do prostego formularza: Proponuję poeksperymentować ze stylami width oraz padding i margin.
Formularze można wzbogacić także o elementy grupujące. Element gru- pujący powoduje otoczenie zgrupowanych kontrolek ramką. Ramkę można dodatkowo wzbogacić o etykietę. Do grupowania kontrolek używamy znacznika