site logo

Formulářové elementy - submit, 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.

Následuje živý formulář doplněný o výpis použitých stylů pro porovnání zobrazení v aktuálním browseru se screenshoty z jiných prohlížečů. Poslední řádek je ukázkou použití prvku typu button.

<input type="submit" value="submit">
<input type="submit" value="submit" disabled>
.size92x22 {width: 92px; height: 22px;}
.background {width: 92px; height: 22px; background: #ffa; color: #00f;}
.submit {width: 92px; height: 22px; border: 1px #fff outset;}
.submit:active {border-style: inset;}
<button> ... </button>

Na sreenshotu vlevo je odesílací tlačítko ve Windows7, ostatní jsou z Windows XP. Vzhled elementu závisí na nastaveném motivu Windows, pro IE lze vynutit zobrazení ve stylu klasik v libovolném motivu (menu IE: Nástroje / Možnosti Internetu / Upravit / Povolit styly zobrazení...). Zde najdete ukázky ze starších browserů.

screenshot: formulářový prvek Submit s použitím CSS v různých browserech

V prvním řádku jsou nestylovaná odesílací tlačítka ve stavu, kdy ukazatel myši je nad tlačítkem. Na tuto událost reagují tlačítka v motivu XP a W7 animací, která změní barvu uvnitř rámečku. V motivu klasik událost mouseOver nemá vliv na vzhled tlačítka. Animace stisku tlačítka není jednotná, většinou se změní barva rámečku, některé browsery navíc posunou text doprava a dolů.

Nevím zda způsob animace tlačítek ve Windows ještě někoho ohromí. Mnoho barviček, pohybů a rozmazané rohy. Mě osobně se to zdá jako design pro děti.

Při defaultním zobrazení bez nastavené CSS třídy a atributů rozměry a vzhled elementu submit  závisí na typu browseru a jazykové verzi browseru. Text na tlačítku určuje atribut value. Když je atribut value vynechán, některé browsery zobrazí na tlačítku lokalizovaný text a podle toho nastaví šířku prvku. Tlačítka v Chrome a Safari zabírají větší prostor než tlačítka v ostatních browserech.

Při nastaveném atributu disabled  text tlačítka zešedne jako upozornění, že prvek je vyřazen. Tento atribut je možné nastavit odesílacím skriptem a oznámit tak uživateli, že formulář je již odeslán. 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 až ve CSS třídě pro element submit, (barva není defaultní), změna barvy textu na šedou se provede jen v browseru IE, ostatní browsery nechají nastavenou barvu. Pak barvu textu pro stav disabled musíme nastavit ve skriptu který stav disabled nastavuje.

Nastavení rozměrů tlačítka pomocí CSS nedělá problém v žádném z testovaných prohlížečů. Jen musíme počítat s bílými okraji okolo XP tlačítek, nebo vlevo a nahoře u klasických tlačítek.

Kdybychom chtěli 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. Výsledkem jsou totožná tlačítka, liší se mírně odstínem rámečku šířky 2 pixely.

Odesílací tlačítko s rámečkem šířky 1 pixel s animací pomocí CSS a pseudotřídy active je v předposledním řádku ukázek. Funguje v moderních prohlížečích (od IE8), ve starších se chová starým způsobem. Klidový styl rámečku outset, se při kliknutí na tlačítko (a stavu active) změní na inset. Podobný způsob animace lze použít i pro jiné interaktivní prvky. Bohužel IE8 při kliknutí na text v tlačítku nezachytí stav active a nedojde ke změně stylu rámečku, při kliknutí na prázdné místo tlačítka funguje podle očekávání.

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 IE6 a 7 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. Vertikální zarovnání prvků uvnitř tlačítka ovšem není jednotné.

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.

Element <button> .... </button>

Použití elementu button je lákavé a zároveň problematické. Je to párový element, a do tohoto prvku lze vložit další HTML elementy, prakticky využitelné jsou obrázky, ikony a formátovaný text. Nelze vložit elementy typu <button>, <select>, <input>, <a>. Problematické je to proto, že IE6 a IE7 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:

Element button dokáže vizuálně rozlišít stav disabled pouze v browseru IE, (text zešedne), v Opeře zešedne pozadí a rámeček. V ostatních prohlížečích není možné vizuálně tento stav rozpoznat. Ukázka CSS a HTML kódu pro button podle kterého byly vytvořeny screenshoty i funkční button nahoře.


CSS:
.btn {color: #00f; font: italic bold 15px Times New Roman;
      width: 92px; height: 22px; padding: 0;}
.ico {width: 10px; height: 16px; border: 0; float: left;
      margin: 1px 8px; padding: 0;}

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

Formátování HTML uvnitř buttonu není zdaleka jednoduché jak dokazují rozdíly ve vertikálním zarovnání ve FireFoxu a Opeře na screenshotech. Někdy je nutné napsat celý kód do jednoho řádku, přidat pomocné div, span, nebo explicitně definovat šířku buttonu. Podobné platí i když vkládáme obrázek a text do jedné společné buňky tabulky.

updated 17.03.2010