Detaily formulářů

zdokonalení vzhledu a pohodlí

Standard jazyka HTML 4.0 přinesl do oblasti formulářů několik nových nápadů, které jsou už implementovány v nových prohlížečích. (Tím myslím dnes nejrozšířenější prohlížeče Mozillu a Internet Explorer verzí 6, 5 a 4, které navíc dovolují úpravu formulářů pomocí CSS.) 

Fieldset - Label - Optgroup - Accesskey - Tabindex - Disabled & readonly - Vzhled pomocí CSS

Fieldset

Fieldset je skupina polí obalená slabým rámečkem. Příklad:

<fieldset>
<legend>Nadpis skupiny</legend>
Jméno <input size=10> 
Příjmení <input size=10><br>
Email <input size=10>
</fieldset>

Takto se to zobrazí: 

Tag <legend> musí následovat okamžitě za fieldset, přičemž jeho obsahem je nadpis toho rámečku. Toto umístění působí nenásilně i v prohlížečích, které tagy <fieldset> a <legend> nepodporují. Šířka rámečku je standardně 100%, takže je dobré upravit <fieldset> stylem nebo to dát do tabulky. IE vykresluje slabý šedý rámeček, Mozilla dělá rámeček tlustý. To se dá nastavit stylem.

Label

Popisek pole. Příklad:

<label for="jm">Jméno:</label> <input size=10 id="jm" name="jmeno">

je pouze složitější obměnou zápisu 

Jméno: <input size=10 name="jmeno">

Jediný rozdíl je v tom, že při kliknutí na popisek v tagu <label> se aktivuje políčko formuláře. Popisek se s políčkem propojuje pomocí atributů for a id. Dalších výhod tohoto zápisu se patrně dočkáme v nových prohlížečích. Kliknutím na "Klikněte sem" si můžete zkusit, zda to váš prohlížeč podporuje: 

Klikněte sem:

Skupina voleb Optgroup

<select name="stat" size="1">
<optgroup label="Evropa">
<option value="GB">Velká Británie</option>
<option value="DE">Německo</option>
<option value="FR">Francie</option>
<option value="CZ">Česko</option>
<option value="SK">Slovensko</option></optgroup>
<optgroup label="Amerika">
<option value="USA">USA</option>
<option value="CD">Kanada</option>
<option value="MX">Mexiko</option>
</optgroup>
<optgroup label="Asie">
<option value="RU">Rusko</option>
</optgroup>
</select>

Tag <optgroup> v nabídce <select> umožňuje sdružovat jednotlivé volby to skupin. Podporují to šestkové verze prohlížečů. Ostatní verze tag <optgroup> ignorují a zobrazují volby <option> normálně pod sebe. Zobrazit příklad.

Accesskey

Jiným způsobem, jak aktivovat formulářové pole bez kliknutí do něj, je použití horké klávesy Alt + písmeno. Písmeno se zadává jako hodnota atributu accesskey, kupříkladu políčko: 

<u>J</u>méno: <input type=text accesskey="j">

se zobrazí úplně normálně, ale při stisku kombinace Alt + j (na české klávesnici levý alt) se políčko aktivuje pro zápis:

Jméno:

Accesskey se dá využít i u odkazů (tag <a>), takže se po stisku Alt + klávesa rovnou sleduje odkaz. Je dobrým zvykem aktivní písmenko podtrhávat nebo jinak zvýraznit, aby uživatel pochopil, že může ťuknout klapku.

Tabindex

Zkušení uživatelé webu při vyplňování formulářů rádi používají klávesu tab (tabulátor) pro přeskakování mezi políčky formuláře. Pokud ale někdo zkonstruuje příliš komplikovaný příšerný formulář (nejčastěji pomocí vnořených tabulek), tak se pak tabulátor z pohledu uživatele chová nevypočitatelně (protože sleduje posloupnost HTML kódu, nikoli optickou posloupnost). V takových případech se hodí použít tabindex jako atribut formulářových polí. 

<input tabindex="1" type="text" name="Jméno">

Tento příklad je užitečný i v jiném případě, totiž pokud na stránce je nějaké velmi důležité formulářové pole, které ale následuje po mnoha odkazech. Typickou ukázkou je vyhledávací políčko v katalozích typu Seznamu. Kdyby se k vyhledávacímu políčku chtěl uživatel proťukat tabulátorem, tak to bude trvat dlouho. Pokud ale bude mít nastaven tabindex="1", tak se políčko aktivuje po prvním stisku tabulátoru.

Pokus o příklad:

Při stisku tabulátoru se projdou všechna políčka, která mají tabindex nastavený a pak se teprve aktivují ta bez tabindexu. Jako hodnota tabindexu se udává přirozené číslo, jejichž množina je společná pro celou stránku. Pokud se něčemu nastaví tabindex nula, nelze to tabulátorem aktivovat (obvykle nedůležitá boční políčka).

Disabled & readonly

Přidání atributu disabled (bez hodnoty) do formulářových polí je učiní nepřístupnými, takže se nedají aktivovat. U některých typů polí se zákaz projeví vizuálně zešedivěním (např. checkbox), u jiných jen tím, že do nich nelze kliknout (type=text).

<input type=text size=10 disabled>
<input type=checkbox disabled>

Jiným typem zákazu je atribut readonly (jen číst), který umožňuje aktivaci, ale nedovolí změnu: 

<input type=text size=10 value="pokus" readonly>

Taková pole se používají buďto jako obměna skrytých polí (ovšem nejistě, protože starší prohlížeč zákaz ignorují), nebo jako zpestření klientských skriptů (JavaScriptu nejčastěji). Hodnoty polí a nastavení zákazu se totiž dají JavaScriptem měnit. 

Má-li políčko nastaveno disabled, formulář jej neodesílá. Políčka read-only posílá. Potřebujete-li mít nepřístupné políčko, které se bude odesílat, ale bude šedivé, přidejte mu styl.

Vzhled pomocí CSS

Kaskádové styly (CSS) se na formátování formulářových polí používají zřídka. Je to překvapivé, neboť to přináší řadu zajímavých vizuálních efektů. 

Netscape Navigator 4 zcela ignoruje styly u formulářových polí. Uživatelé Netscape (kterých je dnes už ale nepatrně) tak zůstávají o efekty ochuzeni (funkce ovšem zůstává a to je důležité).

Příklad jednoduchého zbarvení vstupního pole:

<input type="text" size="10" style="border: 2px solid blue; background-color: yellow">

Pěkné, ne? A to není všechno. Dají se nastavovat i vlastnosti písma uvnitř pole (barva, font), zarovnání obsahu, obrázek na pozadí, prostě skoro všechno. Pohrajte si. Inspiraci najdete na přehledu CSS vlastností a hodnot. Při udání rozměrů se dají dokonce aplikovat i grafické filtry. 

Automatizace vzhledu

Abyste nemuseli nastavovat vzhled přímým stylem u každého políčka, můžete si založit stylopis a napsat do něj třeba: 

<style>
input, textarea, select {background-color: #ffffcc; color: navy; border: 1px solid red}
input.tlacitko {background-color: navy; color: #ffffcc; font-weight: bold; cursor: hand}
</style>

Kdykoliv se pak ve stránce objeví tag <input>, má nažloutlé pozadí a tmavě modrý rámeček, vnitřní písmo červené (pěkný blivajz, ale to je jen pro představu). Takové formátování se ale nemusí hodit na potvrzovací tlačítko <input type="submit">, protože by pak vypadalo stejně jako vstupní pole. Proto doporučuji vytvořit si třídu (class) .tlacitko a označit jí to, co jsou tlačítka: <input type=submit class="tlacitko">, aby se pak zobrazila jinak (pozadí navy a písmo nažloutlé).

Záludnosti

• Výška a šířka polí se dá řídit pomocí CSS, ale ve starších prohlížečích má větší prioritu nastavení z HTML (atribut size).
• Pro zatrhávací políčko <input type="checkbox> se nedá nastavit barva vnitřního čtverečku -- zůstává stále bílý. Jediný použitelný trik je zprůhlednění bílé barvy pomocí filtru chroma: 
  {filter: chroma(color=#ffffff); width: 1em; height: 1em}
  přičemž rozměry se udávají pro jistotu, aby filtr fungoval. Ale i to funguje jen v IE. 
• Rozbalovací nabídka select na sebe nenechává CSS působit správně. Dokonce tam nefunguje ani předchozí trik s filtrem nebo barvení rolovací lišty. Důvod: tyto prvky přebírají prohlížeče od operačního systému, který css ignoruje. Nová Mozilla si kreslí select a checkbox sama, tam ty problémy nejsou.

Stejně jako jinde, i u krášlení formulářových polí platí poučka, že všeho moc škodí. Hlavně si dávejte pozor, aby vaše formuláře vypadaly stále jako formuláře.

Předchozí: Formuláře v HTML, Další: Parazitní formuláře 
Vizte též: Úvod do formulářů, CSS - Kaskádové styly, Barvení rolovací lišty v IE 5.5, CSS - přehled vlastností a hodnot
Odkazy ven: Stylování label od Pixyho (anglicky), Proč nestylovat formuláře také od Pixiho, česky.