site logo

Problémy formulářových elementů

Článek uvádí přehled chyb, problémů a odlišností formulářových elementů v různých browserech. Přestože neexistuje žádný standard jak mají formulářové prvky vypadat a jak se mají chovat, najdete řadu problémů, které komplikují vytváření cross browser  formulářů.

Zde nenajdete hodnocení jak jednotlivé browsery uplatňují nejnovější vlastnosti stylů na formulářové prvky, ale spíš výčet chyb a problémů, které již dávno měly být odstraněny. Následující tabulka uvádí souhrn počtu nalezených problémů (velmi subjektivní hodnocení). Detailní popis jednotlivých formulářových prvků včetně živých ukázek, screenshotů a uplatnění CSS najdete v příslušných kapitolách vpravo.

element IE Firefox Opera Chrome Safari
type="text" 211  
textarea 311  
select      
type="checkbox", type="radio" 21 11
type="file" xxxxx
type="submit"      
type="image"      

input type="text"

Textový kurzor zmizí při zarovnání textu vpravo, nebo při dlouhém textu přes celou šířku elementu. Chyba se projeví v browserech IE a Opera, příčinou je nastavení vlastnosti padding: 0; která bývá součástí CSS reset frameworků. To lze napravit nastavením padding: 0 1px 0 0; .

textarea

W3C HTML validátor vyžaduje uvedení atributů cols a rows. Stejné atributy ale v různých prohlížečích vytvoří různě velké elementy. Pro nastavení velikosti je lépe použít CSS (W3C by mělo zrušit povinnost tyto atributy uvádět). Prázdný prostor okolo elementu v Chrome a Safari musíme odstranit pomocí vlastnosti float: left;. Pomocí float lze odstranit prázdný prostor i ve starších prohlížečích a také okolo elementů input type="text".

Oba elementy input type="text" i textarea v browserech IE a FF při nastavení atributu readonly umožní vložit textový kurzor do elementu a pohybovat tímto kurozrem pomocí kurzorových kláves. To navodí pocit, že text je možné editovat. IE navíc v tomto stavu při použití klávesy Backspace načte předchozí stránku. To je již úplně matoucí. Totéž platí i pro element input type="text".

select

IE6 a IE7 neumí pracovat s rámečkem elementu select. Nejde nastavit šířku, typ, barvu, nebo jej zrušit. IE6 navíc není možné ani překrýt, vždy vyplave nahoru. Teprve IE8 umí to co ostatní browsery zvládají již dávno. S jistým omezením lze rámeček odstranit i v IE6 browseru.

input type="checkbox", input type="radio"

Pouze browser Opera dokáže nastavit velikost a barvou těchto prvků. Ostatní browsery zobrazují prvky jako ikony z windows se všemi nedostatky (nelze upravit velikost, vzhled, barvy). Událost onChange je v IE při změně stavu checkboxu vyvolána se zpožděním, nikoli při změně stavu checkboxu, ale až při kliknutí mimo element (ztrátě fokusu).

input type="file"

Zdá se, že na tento formulářový prvek tvůrci browserů zapoměli. Je složen ze dvou prvků: textboxu a tlačítka, a proto je obtížné použití stylů k úpravě vzhledu. Editování textu názvu souboru a cesty k tomuto souboru umožní jenom Opera a IE. Ostatní browsery po kliknutí na tento prvek vyvolají vždy dialogové okno pro výběr souboru a tak zamezí editování názvu souboru. Safari a Chrome navíc vůbec nezobrazí cestu k souboru. Editování názvu souboru nemusí být ani žádoucí, soubor vybraný pomocí dialogu totiž zaručeně existuje a pak není zapotřebí validace, stačí testovat zda obsah prvku není prázdný. Tlačítko v tomto prvku je tedy zbytečné.

Odstranění tlačítka a aktivace dialogu pro výběr souboru vždy při kliknutí na tento element by zjednodušilo element na úroveň běžného prvku type="text" a konečně by bylo možné použít CSS k úpravě vzhledu tohoto jinak nestylovatelného prvku.

input type="submit"

Úprava vzhledu pomocí CSS nedělá problémy, ve starších browserech je potřeba použít vlastnosti float pro odstranění prázdného prostoru okolo prvku, ostatně jako u jiných formulářových prvků. Malé rozdíly jsou ve způsobu animace stisku tlačítka. FF a Opera potřebuje specifické nastavení pro odstranění focus (nehezký tečkovaný rámeček).

input type="image"

Ve všech prohlížečích element image odesílá souřadnice x, y místa kde došlo ke kliknutí. FireFox, Chrome a Safari navíc odesílají i dvojici name=value a simulují tak element submit  (jen pokud je uvedeno value). Tato skutečnost ale nemůže být využita pro cross-browser řešení.

nastavení fontu

Font, který je použit ve formulářových elementech většinou nejde zdědit předpisem fontu pro styl globálních prvků html, nebo body. Pro nastavení fontu je nutné použít hvězdičkového zápisu *{} (univerzální selektor), nebo v deklaraci vyjmenovat všechny formulářové elementy.


<style type="text/css">

* {font: normal 13px Arial, SansSerif, Verdana;}
input, textarea, select {font: normal 13px Arial, SansSerif, Verdana;}

</style>

background

Nastavení vlastnosti background  ve formulářových elementech obvykle způsobí přepnutí vzhledu prvků do podoby classic, tedy zobrazení s pseudo 3D rámečky bez zaoblených okrajů. V případě prvků checkbox a radio v browserech FF, Chrome a Safari to ale neplatí.

focus

Označení prvku, který má focus a do kterého je směrován text z klávesnice je velmi elegantně a uživatelsky přívětivě vyřešeno v browserech Chrome a Safari. Ostatní browsery neoznačují prvky type="text" a textarea vůbec, okolo ostatních nakreslí nehezký a rušivý tečkovaný obrys. Chrome a Safari rozlišuje zda je element aktivován klávesou Tab, nebo kliknutím myši. Pak není nutné kreslit označení okolo odkazů na které klikáte myší. Podrobný popis najdete v kapitole fokus elementů.

validace

Národní zvyklosti zápisu některých údajů mohou způsobit problémy, které nesouvisí přímo s browserem. Validace čísel, která jsou zapsána pomocí desetinné čárky nemusí vždy dávat očekávané výsledky. Rovněž validace datumu zapsaného evropským způsobem musí být jiná než doporučují americké skripty.

vykreslování elementů

Starší verze Safari a Opera používaly své vlastní formulářové elementy vykreslené browserem, nikoli prvky převzaté z Windows. Nové verze vykreslují opět omalovánky a ztratily tak hodně ze své přitažlivosti. Ostatně soudím, že browser je důležitější než operační systém a není žádný důvod proč kopírovat Windows GUI.

updated 04.06.2010