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.