site logo

Formulářový element - input type="image" a CSS

Formulář lze odeslat pomocí klasického tlačítka input type="submit", nebo pomocí obrázku, či obrázkového tlačítka "input type="image". Pokud chcete mít stejný vzhled tlačítka ve všech browserech a systémech, je nutné pro odeslání formuláře použít element image. Nevýhodou obrázkového tlačítka je chybějící animace při kliknutí, takže ne vždy vypadá a chová se jako skutečné tlačítko.

Následující živý formulář obsahuje dva checkboxy pro "vyřazení" odesílacích prvků a dva prvky image pro odeslání formuláře: jednoduchou ikonu a animované tlačítko. Po odeslání se pod formulářem objeví výpis všech formulářových prvků, tak jak je vidí serverový skript. Ve spodní části tabulky je výpis kódu použitého pro formátování obou prvků image.

HTML:
<input type="image"
 name="image" id="image"
 value="clicked"
 alt="submit form"
 src="../img/mGlass.png">

CSS:
not used





HTML:
<input type="image"
 name="imageButton" id="imageButton"
 alt="submit form"
 src="../img/transparent.gif">

CSS:
#imageButton {background: url(...) 0 0 no-repeat;
              width: 132px; height: 32px;}
#imageButton:hover    {background-position: 0 -32px;}
#imageButton:active   {background-position: 0 -64px;}
#imageButton:disabled {background-position: 0 -96px;
                       cursor: default;}

Při testu formuláře lze zjistit rozdíl mezi odesílacími prvky submit a image. Ve všech prohlížečích element image odesílá souřadnice x, y místa kde došlo ke kliknutí. Browsery FireFox, Chrome a Safari odesílají i dvojici name=value (zde image=clicked) a simulují tak element submit. Druhý prvek (imageButton) nemá specifikováno value (je to nepovinný atribut) a proto se dvojice name=value neodesílá.

Test na serveru který prvek image byl použit k odeslání formuláře nemůže být podle dvojice name=value, to by vyloučilo formuláře odeslané z browserů IE a Opera. Musí se testovat jména prvků se souřadnicemi. Ve skriptech PHP je znak "tečka" nahrazen znakem "podtržítko" (např. image_y=18).

Všiměte si odesílání hodnot checkboxů. Pokud checkbox není zatržený, informace o checkboxu se vůbec neodesílá. Checkboxy jsou použity pro vyřazení prvků image, tedy nastavení do stavu disabled. V základním zobrazení totiž tento stav není nijak indikován.

Zkuste ovládat formulář pomocí klávesnice znaky Tab a Shift + Tab. Uvidíte označení prvku který má focus pomocí ohyzdného tečkovaného okraje okolo prvku. Tento zubatý okraj se objeví v browserech IE a FF dokonce i při ovládání pomocí myši. Ostatní browsery zobrazují hezký barevný okraj jen tehdy kdy to má smysl, tedy když formulářový prvek získá focus pomocí klávesy Tab.

Atributy elementu image

<input type="image" name="..." value="..." src="...">

type="image" je povinný atribut pro tento typ formulářového elementu.

name="..." atribut name je povinný a musí být naplněn unikátním jménem ve formuláři. Hodnota name je použita k vytvoření dvou řetězců, které jsou součástí odeslaného formuláře. Ke jménu je přidán znak tečka, označení souřadnice a hodnota souřadnice v pixelech kde došlo ke kliknutí myší. Náš formulář například odešle: imageButton.x=15 a imageButton.y=32. Když byla použita klávesa Enter k odeslání formuláře jsou souřadnice nulové, tedy imageButton.x=0 a imageButton.y=0.

value="..." je nepovinný atribut. Když je uveden, browsery FireFox, Chrome a Safari navíc odešlou i řetězec name=value. Když tento atribut chybí, řetězec odeslán není. Browsery IE a Opera takový řetězec neodesílají nikdy, bez ohledu na výskyt atributu value. V našem testovacím formuláři tak může bude odeslán řetězec image=clicked.

src="..." určuje cestu k souboru který obsahuje obrázek a který bude zobrazen jako odesílací tlačítko.

disabled je nepovinný atribut a způsobí vyřazení funkce obrázkového tlačítka. Jeho použití nemá viditelný vliv, ovšem obrázek nemůže obdržet focus a tedy formulář nejde odeslat pomocí takto označeného tlačítka.

Experimentální animace elementu image

Formulářová tlačítka type=submit a type=button úspěšně napodobují stisk tlačítka na myši. I když není tato animace zcela jednotná (v některých browserech a systémech se změní jenom rámeček, jindy se posouvá i text vpravo a dolů) je tato zpětná vazba je velmi intuitivní. V případě prvku image takové chování chybí, proto je musíme napodobit.

Pro vykreslení obrázkového tlačítka je použit plně průhledný gif. Pod ním se posunuje pozadí (background) v závislosti na pseudotřídách kaskádových stylů. Ty nastavuje browser a odpovídají aktivitě myši, proto není potřebný javascript. Pozadí je vytvořeno způsobem známým jako sprites, jeden obrázek obsahuje několik dílčích obrázků, které jsou využity samostatně nastavením souřadnic pozadí a omezení zobrazené plochy je dáno velikostí základního prvku (zde image). Řešení má jedinnou nevýhodu: při běžném tisku stránky, kdy se netiskne pozadí, bude místo tlačítka prázdné místo. Pro simulaci chování běžného tlačítka potřebujeme nastavit následující stavy:

rozbalený sprite

Všechny moderní browsery zobrazí potřebné stavy obrázkového tlačítka. Podle očekávání IE dělá problémy se zobrazením, ale odesílání formuláře IE zvládá bezchybně. IE6 zobrazí jen základní stav tlačítka, IE7 přidá stav hover a IE8 umí až po active. Žádný IE neumí stav disabled. Přímo ideálně se navržené tlačítko chová v browseru Opera.

Proč není sprajt použit přímo v elementu image bez nutnosti použít průhledný gif? V podstatě to je možné, ale nastanou problémy s označením focus. Element totiž musí být uzavřen do kontejneru s nastaveným stylem overflow: hidden; aby byla viditelná jen požadovaná část sprajtu a pak dojde i k ořezání části outline (tečkovaný okraj okolo prvku). To by mě ochranáři přístupného webu roznesli na kopytech.

V zásadě je možné přidat další dílčí obrázek do sprajtu pro stav focus a stejný způsob označení přidat do všech dalších prvků formuláře. Takové řešení je již mimo tento jednoduchý popis. Formuláře, zejména ty rozsáhlejší, jsou obvykle ovládány pomocí klávesnice a proto zachování označení focus je důležité.

Je zajímavé, že ochranářům přístupnosti nevadí chybné zobrazení focus v browserech IE a FF, které zobrazují focus i když k aktivaci prvku je použito ukazovací zařízení (myš). Nevadí jim ani vysloveně hnusný způsob fokusu v těchto browserech.

updated 11.05.2010