Pokročilé formuláře

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 prohlížečích

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

Nadpis skupiny Jméno Příjmení
Email

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 ve starších prohlížečích, které by tagy <fieldset> a <legend> snad nemusely podporovat. Šíř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 border.

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 (skočí na něj focus). Popisek se s políčkem propojuje pomocí atributů for a id. Dalších výhod tohoto zápisu se možná dočkáme v budoucích prohlížečích. Kliknutím na "Klikněte sem" si můžete zkusit, zda to váš prohlížeč podporuje: 

Skupina voleb Optgroup

Zobrazení selectu s OPTGROUP v šestkové verzi prohlížeče<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.

U tagu optgroup lze pomocí CSS změnit barvu a řez písma a barvu pozadí, ale nic víc (stejně jako u option).

Pokud máte knížku PHP od Jirky Koska, tak tam je na straně 121 obrázek víceúrovňových voleb dělaných pomocí optgroup. Nevím, kde ho vzal, takhle víceúrovňově to nikde nefunguje.

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.

Accesskey byl navržen pro zvýšení přístupnosti stránek, ale poněkud snižuje jejich použitelnost.

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 také užitečný i v jiném případě, totiž pokud je na stránce 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 v Exploreru).

<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 background-color.

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ů. Aktualizováno 2004: na druhou stranu se dnes stylování formulářů raději moc nedoporučuje.

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

Select skoro nefunguje

Rozbalovací nabídka <select> na sebe nenechává CSS působit správně. Nefunguje na ni skoro žádný css styl, ani barvení rolovací lišty. Jediné, co se dá nastavit, je barva písma a pozadí tagu <option>. Select se stále drží nahoře a ignoruje z-index. Důvod problémů: tento prvek 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.

Vzhled formulářů nikdy neovládnete

Každý prohlížeč a operační systém ukazuje formulářové prvky jinak. Pokud nastavíte vzhled tak, aby se vám líbil ve Windows třeba ve Firefoxu, vůbec to pak nemusí vypadat stejně ani na Macu nebo v Internet Exploreru. Asi nejlepší přehled, jak vypadají formuláře v různých prohlížečích najdete na stránce Styling even more form controls (anglicky).

Accent-color

Při měnění barev formulářových prvků můžete zkoušet hrát si s novou CSS vlastností accent-color. Měla by přebarvovat některé výchozí vzhledy prvků. Novinka 2021. Například accent-color: red; u tagu <input type="checkbox"> zobrazí vnitřek zatrhávacího políčka červeně.

Vertical-alight

Přibližně od roku 2023 se dá u formulářů používat CSS vlastnost vertical-align, tedy otočit je na výšku.

To vypadá jako... formulář

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.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.