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.