Nové tagy a atributy HTML formulářů

27. března 2002

•

HTML 4.0 definuje další tagy a atributy související s formuláři. Možná o nich ani nevíte. Pokud je ale použijete, vaše stránky obohatíte o další zajímavé funkce.

Kompatibilita

Při nástupu novinek, programovacích technologií, upgradů ad. je důležitá kompatibilita se staršími verzemi. Použití těchto nových prvků nijak neovlivňuje zpracování dat z formulářů pomocí serverových skriptů. Ani případné klientské skripty (kontrola správnosti polí Javascriptem) nemusíte měnit. Hlavním úkolem a efektem je možnost vytváření formulářů, se kterými se návštěvníkovi vašich stránek lépe pracuje. Microsoft Internet Explorer 5 a vyšší, tj. pro 97 procent návštěvníků (alespoň mých) stránek, zobrazuje vše, tak jak má. Prohlížeče, které novým tagům nerozumí, je prostě ignorují.

Popisky polí

Jako příklad vezmu obyčejný formulář o jednom vstupním poli <input type=“text“> s popiskou. Jeho zdrojový kód je:

<form>
Jméno:
<input type=“text“ name=“jmeno“>
</form>

A vypadá takto:

Nyní přidám do tagu formulářového pole atribut id. Jeho význam znáte z DHTML. Popisku uzavřu do tagu label s atributem for. Stejnou hodnotou atributu id v tagu formulářového pole a atributu for v tagu popisky je spolu svážu. Do tagu label přidám druhý atribut accesskey, který určí přistupovou klávesu k formulářovému poli. Jakmile návštěvník vašich stránek stiskne klávesu ALT a přístupovou klávesu, umístí se kurzor do formulářového pole. Z Javascriptu to znáte jako metodu focus().

<form>
<label for=“jmeno“ accesskey=“j“>Jméno:</label>
<input type=“text“ name=“jmeno“ id=“jmeno“>
</form>

Z kódu je jasné, jakou přístupovou klávesu jsem zvolil. Stiskněte tedy ALT + J a kurzor se objeví v tomto formuláři:

V prostředí operačního systému je zvykem podtrhnout písmenko, které je pod přístupovou klávesou. Ve formulářích s více poli působí možnost pohybovat se pomocí klávesových zkratek velice efektně. Dále se této zajímavé problematice věnuje na Intervalu článek Klávesové zkratky na www stránkách.

Tlačítka podle přání

Jistě znáte tlačítko na odeslání formuláře <input type=“submit“> a tlačítko na vyčištění formuláře <input type=“reset“>. Formulář může také odesílat tlačítko s obrázkem <input type=“image“>. Pokud použijete <input type=“button“>, získáte tlačítko, jehož popis můžete určit také atributem <input type=“button“ value=“popis“>. Tlačítko však nevykonává žádnou akci. Aby k něčemu bylo, musíte jej události svázat s klientským skriptem, např.: <input type=“button“ value=“popis“ onclick=“javascript:alert(‚Nemačkat‘)“>

Daleko důmyslnější je tag button. Jeho obsah (obrázky, text) se zobrazí jako popis tlačítka. Jakou akci má tlačítko vykonávat, určíte pomocí atributu type, který může nabývat hodnot submit, reset a button.

<button type=“button“ onclick=“javascript:alert(‚Odemknuto‘)“>
<img src=“klic.gif“> Odemknout
</button>

Tlačítko jsem pomocí události svázal s klientským skriptem. Pro další zajímavé informace a návody na téma tlačítka HTML formulářů a Javascript vám doporučuji přečíst si JavaScript – odeslání formuláře.

Pomocí klávesové zkratky ALT + přístupová klávesa můžete také stisknout tlačítko. Upravím kód předchozího příkladu:

<label for=“odemknout“ accesskey=“e“></label>
<button type=“button“ id=“odemknout“ onclick=“javascript:alert(‚Odemknuto‘)“>
<img src=“klic.gif“> Od<u>e</u>mknout
</button>

Takto můžete samozřejmě přistupovat ke všem klasickým tlačítkům <input type=“submit“>, <input type=“reset“>, <input type=“button“> a <input type=“image“>. Jen nemáte možnost podtrhnout v popisu tlačítka přístupovou klávesu.

Přechod mezi prvky formuláře klávesou TAB

Mezi prvky formulářů přechází návštěvník stránky opětovným stiskem TAB v takovém pořadí, jako se vyskytly ve zdrojovém kódu stránky. Pokud potřebujete zvrátit toto někdy nepříznivé pořadí, máte na pomoc atribut tabindex. Hodnota může být kladné nedesetinné číslo. Ta udává, v jakém pořadí se bude přecházet mezi prvky – od nejnižší hodnoty k nejvyšší. Vyzkoušejte TAB v tomto článku. Pěkně jsem to zpřeházel.

Slučování do bloků

Pokud máte formulář s mnoha prvky, můžete je sloučit do bloků třeba podle toho, jak spolu souvisí. K takovému seskupení slouží tag fieldset, do kterého uzavřete celý jeden blok. Můžete mu také přiřadit popisku pomocí tagu legend a před jeho atribut accesskey definovat přístupovou klávesu. Povšimněte si značky <br> uvnitř tagu legend – zde je použita pro zalomení řádku v prohlížečích, které tento tag nepodporují a následující text by byl "přilepen" těsně za nadpisek. Následuje zdrojový kód, ve kterém je vše uplatněno.

<form>
<fieldset>
<legend accesskey=“p“><u>p</u>rvní část<br></legend>
jméno: <input type=“text“ name=“jmeno“><br>
příjmení: <input type=“text“ name=“prijmeni“>
</fieldset>
<fieldset>
<legend accesskey=“d“><u>d</u>ruhá část</legend>
uživatel: <input type=“text“ name=“uzivatel“><br>
heslo: <input type=“text“ name=“heslo“>
</fieldset>
</form>

Aby se orámování bloku nepěkně neroztahovalo po celé šířce obrazovky, je dobré vložit formulář do tabulky nebo do boxu formátovaného pomocí stylů.

Pokud zkombinujete přístupové klávesy k formulářovým polím a tlačítkům, slučování do bloků a třeba změny pořadí při přeskakování klávesou TAB, budou vaše webové formuláře určitě více efektní a přívětivější pro návštěvníky vašich stránek.