Detaily formulářů, zdokonalení vzhledu

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 Internet Explorer verzí 5 a 4, které navíc dovolují úpravu formulářů pomocí CSS.)

Fieldset

<fieldset>

<legend>Nadpis skupiny</legend>

Jméno <input size=10> 

Příjmení <input size=10><br>

Email <input size=10>

</fieldset>

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.

Label

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 "Jméno" si můžete zkusit, zda to váš prohlížeč podporuje:

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:

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:

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í.

Protože mě jiné použití opravdu nenapadá (a nikdy jsem to nepoužil), zkonstruujte si příklad za domácí úkol. Jako hodnota se prý udává přirozené číslo, jejichž množina je pro každý formulář (tag <form>) nezávislá.

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).

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

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.

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é).

<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

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.