Formularze

Pozwalają pobierać dane od użytkownika strony i wysyłać je do przetworzenia na serwerze. Nie można wykorzystać formularzy HTML bez pomocy skryptu po stronie serwera, który odbierze i przetworzy dane. Najpopularniejszym językiem używanym do tego celu jest PHP.

Specyfikacja CSS słabo określa, w jaki sposób mają być stylowane formularze, dlatego formularze w różnych przeglądarkach mogą różnie reagować na nadane style. W praktyce kłopotliwe są wymiary (nie respektujące boxmodelu), interpretacja obramowania kontrolek typu radio oraz pozycja <legend>.

W Sieci jest pełno botów wykorzystujących formularze do spamowania. Ponieważ zabezpieczenie się przed tym jest skomplikowane, polecamy serwis Sblam! oferujący skuteczne, darmowe zabezpieczenie.

Formularz: <form>

Wszystkie elementy formularzy muszą znajdować się wewnątrz tego elementu. <form> jest elementem blokowym i musi zawierać w sobie elementy blokowe, takie jak <div> lub <fieldset>.

Nie można umieszczać formularza w formularzu. Cały formularz musi być wysłany na serwer, nawet jeśli ma zmienić się tylko jego część (jeden formularz może wykonać kilka różnych akcji)

Adres docelowy: action

Atrybut określa adres strony, która ma odebrać dane. Wartość ? oznacza tę samą stronę.

 <form action="?">

Nie da się wysłać formularza do dwóch stron naraz ani wysłać pod różne adresy, zależnie od jego zawartości. Taką funkcjonalność można uzyskać, wysyłając formularz do skryptu, który przeanalizuje jego dane i sam wykona odpowiednie czynności (wczytanie innej strony, przekierowanie.

Metoda: method

Atrybut określający, jaką metodą dane zostaną przesłane.

post
Oznacza, że formularz wykonuje jakąś ważną akcję na serwerze, np. zalogowanie lub rejestrację użytkownika, dodanie artykułu, itp. Dane zostaną przesłane jako treść zapytania HTTP, przez co przesyłane dane będą niewidoczne dla użytkownika (choć to w żaden sposób nie gwarantuje bezpieczeństwa/poufności przesyłanych danych!).
Aby odświeżenie strony nie wysyłało ponownie danych, możesz wykonać przekierowanie statusem 303.
get
Oznacza, że wysłanie formularza nie ma ważnych efektów ubocznych. Tej metody używa się do wyszukiwarek, wyboru wersji pliku, itp. Dane formularza zostaną dołączone do adresu strony docelowej (jako query string w URI) i zostaną pobrane z serwera tak, jak zwykłe odnośniki. Przesyłane są widoczne dla użytkownika, a rezultat działania formularza może być zapamiętany w zakładkach.

Jeśli formularz jest wysyłany metodą get, to nie wpisuj Query String-u w ramach action. Zamiast tego dodaj ukryte pola do formularza.

Format danych: enctype

Atrybut określa w jakim formacie przesłać formularz na serwer. Jeśli formularz zawiera pola przesyłające plik, należy ustawić wartość multipart/form-data.

Weryfikacja poprawności danych: onsubmit

Sprawdzanie po stronie klienta jest opcjonalne, dlatego zawsze należy wykonać pełne sprawdzenie poprawności danych po stronie serwera!

Skrypty JavaScript mogą po stronie klienta sprawdzić poprawność danych w formularzu i ewentualnie wstrzymać jego wysyłanie.

Pola formularza

Nazwy pól: name

Atrybut id w formularzach nie ma specjalnego znaczenia i jest niezależny od name

Każde pole formularza ma swoją nazwę, określaną atrybutem name. Ta nazwa pozwala skryptowi po stronie serwera rozpoznać dane, dlatego przesyłane są wartości tylko tych elementów, które mają nazwę.

PHP pozwala tworzyć tablice z pól, które mają w nazwie znaki []. To jest niestandardowa konstrukcja dająca iluzję tablic tylko w PHP — w XHTML i dla przeglądarek nie ma to żadnego szczególnego znaczenia.

Etykiety: <label> Bug w IE

Dla wszystkich pól formularza (z wyjątkiem przycisków i pól ukrytych) powinno się dodawać etykiety nazywające pole. Można to zrobić na dwa sposoby — poprzez umieszczenie pola wewnątrz elementu <label> lub poprzez nadanie id polu (dowolnego, może być różne od name) i dodanie etykiecie atrybutu for z tą samą wartością.

 <label>Imię <input type="text" name="imie[]"/></label>
 <label for="imie1">Imię</label> <input type="text" name="imie[]" id="imie1"/>

Druga metoda, w połączeniu z CSSowym inline-block pozwala nadać szerokość etykietom i tym samym wizualnie wyrównać pola formularza.

Ten element jest szczególnie ważny dla pól typu checkboxradio, bo powoduje, że kliknięcie etykiety zaznacza pole (tak, jak to ma miejsce w większości systemów operacyjnych).

Pole tekstowe: <input type="text"/>

Pozwala wprowadzić jedną linijkę tekstu. Domyślną wartość podaje się w atrybucie value.

Atrybut maxlength określa maksymalną ilość znaków, jaką wolno wprowadzić. Dozwolony jest dla pól typu „text” i „password”. Powinien być używany tylko wtedy, gdy określona długość jest naprawdę ważna.

Hasło: <input type="password"/>

Wpisywany tekst będzie zamaskowany. Ponadto wiele przeglądarek oferuje zapamiętywanie haseł.

To pole nie szyfruje przesyłanego hasła. Jeśli formularz musi być bezpieczny, to należy go umieścić i wysyłać do strony przesyłanej protokołem HTTPS.

Wieloliniowe pole tekstowe: <textarea>

Tworzy pole, w którym użytkownik może wpisać wiele linii tekstu.

Wymiary podane w CSS mają priorytet nad wymiarami rowscols

Atrybuty rowscols sugerują, ile pole ma mieć linii i ile znaków ma się mieścić w linii.

Domyślny tekst umieszcza się wewnątrz elementu <textarea>. Nie można w nim umieszczać elementów XHTML. Wyjątkowo przejścia do nowej linii w kodzie strony są zachowywane i widoczne w polu tekstowym.

Pole wyboru: <input type="checkbox"/>

Pozwala udzielić odpowiedzi „tak” lub „nie”. Jego wartość jest przesyłana tylko wtedy, gdy zostanie zaznaczone. Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked. W PHP pola zgrupowane w tablicę uzyskuje się poprzez dodanie do nazwy [].

 <input type="checkbox" checked="checked" name="tak[]"/>
 <input type="checkbox" checked="checked" name="tak[]"/>
 <input type="checkbox" checked="checked" name="tak[]"/>

Przycisk opcji: <input type="radio"/>

Pozwala wybrać tylko jeden z elementów o takiej samej nazwie. Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked.

 <label><input type="radio" name="plec" value="k" /> Kobieta</label>
 <label><input type="radio" name="plec" value="m" /> Mężczyzna</label>

Ukryty element: <input type="hidden"/>

To pole, mimo że nie jest widoczne, może być odczytane i zmienione przez zaawansowanych użytkowników, więc nie umieszczaj w nim ważnych danych i nie ufaj bardziej, niż zwykłemu polu tekstowemu.

Wartość umieszczona w atrybucie value zostanie przesłana razem z formularzem, ale nie będzie widoczna dla użytkownika.

Elementy ukryte w inny sposób — przez display:none — pozostaną widoczne w przeglądarkach tekstowych. Widoczność elementu nigdy nie wpływa na to, czy zostanie wysłany.

Listy opcji: <select>, <option>, <optgroup> Bug w IE6

Lista może być wielokrotnego wyboru, jeśli ma atrybut multiple. W przeciwnym wypadku użytkownik może wybrać tylko jedną opcję. Atrybut size ustala ile opcji będzie widoczne naraz. size="1" oznacza listę rozwijaną.

Opcje definiuje się elementami <option>. Mogą one zawierać tylko tekst. Każda z opcji może mieć atrybut value określający jej wartość. Jeśli go nie ma, wartością jest zawartość opcji. Atrybut selected powoduje, że opcja jest domyślnie zaznaczona. disabled nie pozwala wybrać danej opcji.

Opcje można pogrupować elementami <optgroup>. Nazwę grupy podaje się w jej atrybucie label. Grupy nie mogą być wybrane (tylko opcje w nich). Nie można umieszczać grup w grupach.

 <select name="ulubiona-liczba">
  <option>0</option>
  <optgroup label="Nieparzysta">
   <option value="1">Jeden</option>
   <option value="3">3</option>
  </optgroup>
  <optgroup label="Parzysta">
   <option>2</option>
   <option selected="selected">4</option>
  </optgroup>
  <option disabled="disabled">gazylion</option>
 </select>

Przycisk: <button> Bug w IE

Tworzy przycisk, którego etykietą może być kod XHTML umieszczony wewnątrz elementu. Atrybut type decyduje, czy wciśnięcie przycisku wyśle formularz (type="submit"), czy wykona skrypt (type="button"), czy wyczyści formularz (type="reset"). Atrybut value określa co będzie wysłane do serwera, jeśli przycisk zostanie wciśnięty.

 <button type="submit">
  <img src="duzy-czerwony-przycisk.png" alt="Odpal rakiety" />
 </button>

Grupa elementów: <fieldset> + <legend> Bug w IE

Dla przejrzystości formularza warto porozdzielać jego elementy na grupy. Służy do tego element <fieldset>. Technicznie ten element nie zmienia formularza — jest tylko informacją dla użytkowników.

Pierwszym dzieckiem <fieldset> ma być element <legend>. <legend> zawiera nazwę/etykietę dla grupy.

 <fieldset><legend>Dane osobowe</legend>
   <div><label>Imię <input type="text" name="imie"/></label></div>
   <div><label>Nazwisko <input type="text" name="nazwisko"/></label></div>
   <div><label>Data urodzenia <input type="date" name="data"/></label></div>
 </fieldset>

Element ten może zawierać w sobie inne elementy <fieldset>:

 <fieldset><legend>Personalizacja zamówienia</legend>
   <fieldset><legend>Dane osobowe</legend>
      <div><label>Imię <input type="text" name="imie"/></label></div>
      <div><label>Nazwisko <input type="text" name="nazwisko"/></label></div>
      <div><label>Data urodzenia <input type="date" name="data"/></label></div>
   </fieldset>
   <fieldset><legend>Dane teleadresowe</legend>
      <div><label>Ulica <input type="text" name="ulica"/></label></div>
      <div><label>Miasto <input type="text" name="miasto"/></label></div>
      <div><label>Kod pocztowy <input type="text" name="kod"/></label></div>
   </fieldset>
 </fieldset>

Wysyłanie plików: <input type="file">

Wymaga ustawienia enctype

Ten element pozwoli użytkownikowi wybrać plik do wysłania. Niestety, nie da się kontrolować tego elementu — nie ma możliwości zasugerowania nazwy pliku, nie da się sprawdzić wielkości pliku przed wysłaniem go i możliwość zmiany wyglądu za pomocą CSS jest bardzo ograniczona.

Elementy tylko do odczytu: readonly

Elementom formularza można nadać atrybut readonly="readonly". Wtedy przeglądarka nie pozwoli użytkownikowi zmienić jego zawartości. Poza tym zachowanie elementu nie zmieni się i będzie normalnie wysłany na serwer.

Tego atrybutu używa się do oznaczenia elementów, których wartość ma związek z formularzem i została narzucona (np. została wyliczona albo ustalona wcześniej).

  <label>Twoje imię <input name="imie" value="Jan Kowalski" readonly="readonly"/></label>
  <label>Nr telefonu <input name="telefon" value="123-555"/></label>

Element wyłączony: disabled Bug w IE

Element zostanie wyłączony — będzie tylko do odczytu i zostanie zignorowany przy nawigacji z klawiatury i przy wysyłaniu formularza.

Tego atrybutu używa się do oznaczenia elementów, które nie są potrzebne lub nie mogą być użyte w danym momencie (np. użytkownik wybrał, że dana sekcja formularza go nie dotyczy).

 <label>Czy posiadasz samochód? <input type="checkbox" /></label>
 <label>W jakim kolorze? <input type="text" disabled="disabled" />

Ponieważ za pomocą samego XHTML nie da się określić, jak elementy mają ze sobą współgrać (i w powyższym przykładzie element nigdy się nie odblokuje), ten atrybut prawie zawsze ustawia się za pomocą JavaScript ponieważ IE wysyła wszystkie przyciski, a nie tylko kliknięty!


Zmodyfikowano: 01.05.2012, 03:03
submit