Formularze#
Nawigacja po formularzu#
Przemieszczanie się po kontrolkach formularza zazwyczaj wykonywane jest za pomocą myszki. Dodatkowo, przy domyślnych ustawieniach można w tym celu wykorzystać klawisz tabulatora (Tab), który powoduje przejście do kolejnych pól. Powracanie odbywa się za pomocą kombinacji Shift+Tab. Taki sposób wypełniania formularzy znacznie przyspiesza proces, ponieważ nie trzeba się odrywać od klawiatury, aby przenieść dłoń na myszkę.
Wykorzystując specyficzne atrybuty możemy zmienić kolejność poruszania się po polach formularza oraz przywołać konkretne pole za pomocą unikatowego skrótu z klawiatury.
Tabulator#
Normalnie porządek aktywacji kolejnych pól formularza z użyciem tabulatora jest zgodny z porządkiem umieszczenia kontrolek formularza w kodzie źródłowym strony. Zwykle jest to zupełnie naturalna kolejność. Czasami jednak istnieje konieczność jej zmiany. Przykładem mogą być formularze budowane w oparciu o tabele, gdzie pola formularza umieszcza się w kilku kolumnach i wierszach. W takim przypadku domyślna kolejność aktywacji kontrolek będzie następowała wierszami (poziomo), zgodnie z kolejnością umieszczania komórek tabeli w kodzie źródłowym. Za pomocą atrybutu tabindex="" można z góry określić kolejność aktywacji każdego pola:
<input type="text" name="pole" tabindex="wartość">
gdzie "wartość" to liczba z przedziału od 0 do 32767.
Ustalanie ostatecznej kolejności rządzi się następującymi zasadami:
- Elementy z atrybutem
tabindex="0"(zero) zachowują się identycznie, jakby w ogóle nie miały przypisanego tego atrybutu. - Elementy bez atrybutu
tabindex="..."są aktywowane zawsze po tych, które posiadają niezerową wartość tego atrybutu - w kolejności występowania w kodzie źródłowym dokumentu. - Elementy z taką samą wartością
tabindex="..."są aktywowane w kolejności występowania w kodzie źródłowym. - Możliwe jest opuszczanie wybranych liczb w numeracji
tabindex="...". Nie ma również wymogu rozpoczynania numeracji od 0 ani od 1. - Elementy zablokowane atrybutem
disabled="disabled"nie są uwzględniane w porządku aktywacji, ponieważ w ogóle nie można ich wybrać. - Elementy tylko do odczytu (
readonly="readonly") są normalnie aktywowane, ale oczywiście nie można do nich nic wpisać.
Atrybut tabindex można zastosować dla znaczników: A, AREA, BUTTON, TEXTAREA, SELECT, INPUT oraz OBJECT.
Przykład formularza opartego na tabeli, gdzie elementy są aktywowane wierszami (domyślne):
<form action="">
<table border="1">
<tr>
<td><input type="text" name="pole1" /></td>
<td><input type="text" name="pole4" /></td>
<td><input type="text" name="pole7" /></td>
</tr>
<tr>
<td><input type="text" name="pole2" /></td>
<td><input type="text" name="pole5" /></td>
<td><input type="text" name="pole8" /></td>
</tr>
<tr>
<td><input type="text" name="pole3" /></td>
<td><input type="text" name="pole6" /></td>
<td><input type="text" name="pole9" /></td>
</tr>
</table>
</form>Efekt (wprowadź kursor w jedno z pól i nawiguj za pomocą TAB lub Shift+Tab):
Ten sam przykład, jednak tym razem elementy są aktywowane kolumnami:
<form action="">
<table border="1">
<tr>
<td><input type="text" name="pole1" tabindex="1" /></td>
<td><input type="text" name="pole4" tabindex="4" /></td>
<td><input type="text" name="pole7" tabindex="7" /></td>
</tr>
<tr>
<td><input type="text" name="pole2" tabindex="2" /></td>
<td><input type="text" name="pole5" tabindex="5" /></td>
<td><input type="text" name="pole8" tabindex="8" /></td>
</tr>
<tr>
<td><input type="text" name="pole3" tabindex="3" /></td>
<td><input type="text" name="pole6" tabindex="6" /></td>
<td><input type="text" name="pole9" tabindex="9" /></td>
</tr>
</table>
</form>Efekt (wprowadź kursor w jedno z pól i nawiguj za pomocą TAB lub Shift+Tab):
Klawisz skrótu#
Kolejną możliwością zwiększającą nawigowanie po kontrolkach formularza jest opcja przypisania klawisza skrótu do danego pola. W tym celu posługujemy się atrybutem accesskey="":
<input type="text" name="pole" accesskey="wartość">
gdzie "wartość" to klawisz, który wywoła daną kontrolkę w kombinacji z innymi przyciskami sterującymi. Przy doborze najlepiej kierować się następującymi wytycznymi:
- Wartością atrybutu jest pojedynczy znak. Nie da się wskazać specjalnych klawiszy, takich jak Shift, Esc, Enter, itp.
- Dozwolone są litery z alfabetu angielskiego oraz cyfry. Ze względu na to, że skróty literowe kolidują z własnymi skrótami wielu przeglądarek zaleca się używanie wyłącznie cyfr.
Przyciski sterujące są zależne od systemu operacyjnego oraz stosowanej przeglądarki. Pod systemem z rodziny Windows najczęściej jest to kombinacja:
- Produkty Mozilli (w tym Firefox) - Lewy Alt + Shift + accesskey (w starszych wersjach bez Shifta)
- Google Chrome - Lewy Alt + accesskey. Dla liter zajętych przez samą przeglądarkę można stosować Lewy Alt + Shift + accesskey.
- Opera - Lewy Shift + Esc, accesskey
- Internet Explorer - Lewy Alt + accesskey
Atrybut accesskey można zastosować dla znaczników: A, AREA, BUTTON, LABEL, LEGEND, TEXTAREA oraz INPUT.
Wywołanie skrótu powoduje przeniesienie zogniskowania do danego pola. Jeżeli będzie to pole tekstowe, pojawi się w nim kursor tekstowy, natomiast dla pola wyboru (oraz opcji) spowoduje to jego zaznaczenie/odznaczenie. W przypadku odnośnika, przeglądarka przejdzie pod wskazany dokument. O dostępnych klawiszach skrótu informuje się zwykle poprzez podkreślenie litery w opisie pola, która stanowi skrót. Prosty przykład:
<form action="" method="post">
<fieldset>
<legend>Wypełnij ankietę</legend>
Wpisz swoje imię i nazwisko [<span style="text-decoration: underline;">1</span>]
<input name="imie" size="40" type="text" accesskey="1" />
<p>Kobieta [<span style="text-decoration: underline;">2</span>]
<input type="radio" name="plec" value="kobieta" accesskey="2" />
Mężczyzna [<span style="text-decoration: underline;">3</span>]
<input type="radio" name="plec" value="mezczyzna" accesskey="3" />
</p>
<p>Który znasz język?</p>
<input type="checkbox" name="jezyk" value="angielski" accesskey="n" />A<span style="text-decoration: underline;">n</span>gielski<br />
<input type="checkbox" name="jezyk" value="niemiecki" accesskey="e" />Ni<span style="text-decoration: underline;">e</span>miecki
<p><a href="../../index.html" accesskey="g">Strona <span style="text-decoration: underline;">g</span>łówna</a></p>
</fieldset>
</form>Efekt: