Formulářové elementy - submit, image, button a CSS
Odesílací tlačítka formuláře můžeme vytvořit více způsoby. Kromě elementu input type="submit", lze použít obrázkové tlačítko input type="image", nebo element button. Tlačítka submit a button jsou animovaná, ale způsob animace se liší podle typu browseru i podle typu elementu. Někde se mění jen rámeček, jinde se posune i vnitřní obsah tlačítka, Safari změní barvu celého tlačítka.
Screenshoty odesílacích tlačítek jsou jen ukázkou stylování tlačítka typu submit, nikoli vyčerpávající sbírka všech možností použití stylů. Poslední řádek je ukázkou použití prvku typu button. Následuje kód použitých CSS stylů pro získání screenshotů.
<input type="submit" />
.size100x22 {width: 100px; height: 22px;}
<input type="submit" class="size100x22" disabled="disabled" />
.background {width: 100px; height: 22px; background: #ffa;}
<button type="button"> ... </button>
Defaultní zobrazení bez nastavené CSS třídy a atributů. Rozměry i vzhled elementu submit závisí na typu browseru. Světlý rámeček okolo některých variant prvku určuje defaultní margin, tedy potřebný prostor, který tyto prvky zabírají. Když do atributu value zadáme velmi dlouhý text, vykreslení kulatých rohů v XP bude zkreslené. Napravíme to expilcitním uvedením rozměru width ve vlastnostech stylu.
Nastavení rozměrů tlačítka nedělá problém v žádném z testovaných prohlížečů. Pro nastavení rozměrů používejte vlastnosti stylu, nikoliv atributy. Podle definice formulářové prvky mají používat rozměrový atribut size, který udává počet "průměrných znaků". Takto předepsaná šířka se nemusí shodovat v různých browserech. Safari zobrazuje tlačítko v aktivním stavu tedy "stisknuté".
Při nastaveném atributu disabled text tlačítka zešedne jako upozornění, že element je vyřazen. Tento atribut můžeme nastavit odesílacím skriptem a oznámit tak uživateli, že formulář je již odeslán a také stav disabled zamezí dalšímu odeslání. Bohužel se tím zamezí i odeslání informace o odesílacím tlačítku. Více najdete v článku odeslání formuláře.
Pokud je nastavena barva textu color až ve CSS třídě pro element submit, (barva není zděděna) pak změna barvy textu na šedou se provede jen v browseru IE7 a Opeře, ostatní browsery nechají barvu nastavenou ve stylu CSS a stav disabled není zcela rozeznatelný.
Pro případ kdy chceme sjednotit podobu formuláře přes různé platformy nastavíme vlastnost CSS background. To způsobí přepnutí vzhledu tlačítka na typ klasik podobný Win2000. Výsledkem nejsou totožná tlačítka v různých browserech, ale jsou docela podobná.
Poslední řádek ukázky odesílacích tlačítek je vytvořen elementem Button. Do tohoto prvku můžeme vložit obrázek (ikonu) i text. Bohužel chybné zpracování atributů elementu button při odeslání formuláře v IE omezuje praktické použití na formuláře s jedním odesílacím tlačítkem, kdy serverový skript netestuje jméno odesílacího prvku.
Atributy elementu submit
<input type="submit" name="inpSubm" value="uložit do databáze" />
Součástí množiny formulářových dat odeslaných na server je i sub-řetězec name=value prvku submit, ale jen za předpokladu že formulář byl odeslán tímto tlačítkem. Podle uvedené deklarace elementu submit by to byl řetězec inpSubm=uložit do databáze. To je výhodné když je ve formuláři více odesílacích tlačítek a každé tlačítko má vyvolat jinou akci na serveru. Pak každé tlačítko má unikátní hodnotu value (tím i popis).
V českých verzích windows pokud atribut value není použit, browsery IE a FireFox použijí defaultní hodnotu value, což je text Odeslat dotaz, browsery Safari a Opera používají anglický originál Submit. Zejména druhé slovo českého překladu je v některých případech nesmyslné, proto atribut value vždy uvádějte.
Atributy elementu image
<input type="image" src="...." name="imgSubm" value="odeslat" />
Obrázkové tlačítko se často používáno (i zneužíváno) když autor touží vytvořit odesílací tlačítko přesně podle svých představ. V ukázkách screenshotů příklad není. Kliknutí myší není doprovázeno animací, to se někdy nahrazuje JavaSkriptovými funkcemi a stylováním okrajů.
Součástí dat odeslaného formuláře jsou řetězce name.x=X a name.y=Y, kde X,Y jsou souřadnice obrázku v pixelech, kde došlo ke kliknutí myší. Podle naší ukázky tágu tedy např.: imgSubm.x=15 a imgSubm.y=32. V případě kdy byla použita klávesa Enter k odeslání formuláře jsou souřadnice nulové, tedy imgSubm.x=0 a imgSubm.y=0. FireFox a Safari navíc odesílá i řetězec name=value, tedy imgSubm=odeslat podle ukázky kódu, ale jen v případě kdy je atribut value uveden.
Když je ve formuláři více odesílacích obrázkových tlačítek, pak každé tlačítko musí mít unikátní jméno name, aby serverový skript mohl rozlišit kterým tlačítkem byl formulář odeslán. Když je použita klávesa Enter pro odeslání formuláře jsou odeslány data prvního obrázkového tlačítka. Tento typ tlačítka nedokáže vizuálně odlišit stav disabled, ale tlačítko v tomto stavu je vyřazeno a tedy nefunkční. Jeli první obrázkové tlačítko disabled a druhé je funkční, pak klávesou Enter nelze formulář odeslat ve FireFoxu a Opeře, zatímco v IE a Safari je formulář odeslán s daty druhého tlačítka.
Element <button> .... </button>
Použití elementu button je lákavé a zároveň nešťastné. Protože je to párový element, láká do tohoto prvku vložit další HTML elementy, prakticky využitelné jsou zejména obrázky, ikony a formátovaný text. Nelze vložit jen elementy typu <button>, <select>, <input>, <a>. Nešťastné je proto, že IE6 neumí odeslat formulářová data tohoto prvku ve formě name=value. Základní atribut type určuje chování prvku button a může nabývat následující stavy:
- type="submit"
Defaultní hodnota pro FireFox, Operu a Safari. Kliknutí vyvolá odeslání formuláře a správně doplní hodnotu name=value tlačítka kterým byl formulář odeslán. Prohlížeč IE odešle obsah elementu (vč. celého tágu pro obrázek), nikoli jeho value. Pokud je více elementů button type="submit" ve formuláři, IE odešle informace o všech buttonech a na serveru nejde určit které tlačítko odeslání iniciovalo. - type="button"
Defaultní hodnota (když atribut type je vynechán) v IE. Kliknutí nevyvolá odeslání formuláře v žádném z testovaných browserů. Doporučené použití je jako samostatné tlačítko pro spouštění klientských skriptů, např. JavaSkriptová kalkulačka, nebo pro menu aplikace. Odeslání formuláře lze zajistit jen ve spojení s JavaSkriptem, který současně vyřeší chybné zpracování elementu v IE a také zajistí validaci formuláře. Bez zapnutého JavaSkriptu pak takový formulář nelze odeslat. Více ve článku odeslání formuláře. - type="reset"
Resetování formulářů se již nepoužívá, proto celkem nevýznamné.
Ukázka CSS a HTML kódu pro button podle kterého byly vytvořeny screenshoty i funkční button nahoře.
.btn {color: #00f; font: italic bold 15px Times New Roman;
width: 80px; height: 22px; padding: 0 8px;}
.ico {width: 10px; height: 16px; border: 0; float: left;}
<button type="button" name="subm" value="save" class="btn">
<img src="../files/iconExclam.png" class="ico" />
Button
</button>
Za zmínku stojí použítí stylu float: left; pro obrázek. Když je uvnitř elementu použit obrázek i text, zarovnání se provede na typografické linky textu a pak nám nepomůže vlastnost vertical-align. Plovoucí obrázek je vyjmut z vazby na typografické linky a tak lépe využije výšky konteineru. Totéž platí i když vkládáme obrázek a text do jedné společné buňky tabulky. Formátování HTML uvnitř buttonu není zdaleka jednoduché. Někdy je nutné napsat celý kód do jednoho řádku, vynechat pomocné div, span, nebo explicitně definovat šířku buttonu.
updated 29.11.2007