site logo

Jednotný vzhled formuláře a fokus prvků

V minulých kapitolách jsme si ukázali možnosti které máme při stylování jednotlivých formulářových prvků. Zkušenosti nyní využijeme k návrhu mini formuláře, který bude vypadat shodně ve všech browserech. Dále si ukážeme jak zvýraznit formulářové prvky které mají focus a jak odstranit nehezké tečkované obrysy prvků.

radio  

Kompaktní živý mini formulář vpravo, obsahuje všechny formulářové prvky kromě <input type="file"> a <input type="image">. Pro zjednodušení je vynechán popis významu jednotlivých políček formuláře. Pro rozsáhlé formuláře na intranetu je nutné co nejvíce využít prostor, proto jsou položky těsně vedle sebe.

Cílem formuláře je vyzkoušet označení elementů pomocí CSS vlastnosti outline a porovnat jednotný vzhled formuláře v různých prohlížečích. Formulář je možné vyplňovat libovolným textem, nelze jej odeslat ke zpracování.

Formulář je umístěn do tabulky s atributem cellspacing="1px". Spolu se šedým pozadím tabulky to zajistí jednopixelové rámečky okolo formulářových prvků. Prvky formuláře jsou přepnuty do standardní podoby klasik díky vlastnosti background, a jsou zbaveny původních rámečků. Formulář lze formátovat i do elementů div, princip je stejný.

screenshot: porovnání formuláře v různých browserech

Následuje výpis CSS kódu pro nastavení stylu formulářových prvků. Úvodní deklarace DOCTYPE přepne IE do standardního módu, pak je možné použít jednotný box model pro výpočet velikostí prvků. Použitý font je předepsán pro formulářové elementy přímo, protože se nepřebírá z prvků body, nebo html, ačkoli lze použít i univerzální selektor *{}. Pro každý prvek je vytvořena CSS třída s názvem podle formulářového prvku. To nám umožní zobrazit upravený formulář i ve starších browserech.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<style type="text/css">
input, select, textarea {font: normal 13px Arial, SansSerif, Verdana;}

.textBox  {width: 104px; height: 18px; margin: 0; border: 0; padding: 0 4px;
           float: left; background: #ffc;}
.textArea {width: 108px; height: 74px; margin: 0; border: 0; padding: 0 0 0 4px;
           float: left; overflow: auto; background: #ffc; resize: vertical;}
.select   {width: 112px; height: 20px; border: 0; margin: 0; background: #ffc;}

.checkBox  {margin: 2px 5px 0 5px; padding: 0; float: left;}
.radioBt   {margin: 2px 5px 0 5px; padding: 0; float: left;}

.submit {width: 112px; height: 22px; border: 1px outset #fff;}
.submit:active {border-style: inset;}
input[type="submit"]::-moz-focus-inner {border: none;}
</style>

Poznámky k jednotlivým prvkům

Formulářové prvky často zabírají okolo sebe prázdný, nevyužitý prostor. Prázdný prostor je různý podle typu prvků a závisí na typu browseru. Odstranit tento prázdný prostor nastavením margin: 0; se podaří jen někdy. Většinou je nutné použít vlastnost float pro odstranění tohoto, zde nežádoucího, prostoru.

.textBox

Prvek <input type="text"> má stejný rozměr ve všech testovaných browserech. Vyšší elementy v některých browserech, které zabírájí větší prostor se podařilo sjednotit díky vlastnosti float: left;, případně margin: 0;. Nastavením padding: 0 4px; jsme dosáhli toho, že textový kurzor nezmizí při pravém okraji. Vnitřní šířka prvku je stanovena width: 104px;. Celková šířka elementu je 104+2*4=112 pixelů.

.textArea

I v tomto případě bylo použito k odstranění volného prostoru okolo prvku v IE a Safari vlastnosti float: left;. Nastavení padding 0 0 0 4px; zajistí odsazení textu jen na levé straně prvku a ovlivní nastavení vnitřní šířky prvku na width: 108px;. Celková šířka je prvku 108+4=112 pixelů. Svislá rolovací lišta se objeví po vyčerpání volného místa v prvku <textarea> díky vlastnosti overflow: auto.

.select

Browsery IE 6 a 7 vykreslí prvek <select> včetně rámečku. Experimentální bezrámečkový select  zde nebyl použit, protože toto řešení nedovoluje využít označení aktivního prvku pomocí CSS vlastnosti outline. Starší browsery mají někdy problémy s určenou výškou prvku a nastaví skutečnou výšku bez ohledu na předpis. Šířka se počítá podle tradičního box modelu, proto je určena přes celou šířku formuláře: 112 pixelů.

.checkBox a .radioBt

Svislé zarovnání elementů <input type="checkbox">  a <input type="radio">  je jednotné díky vlastnostem padding: 0; float: left; Zarovnání vzhledem k doprovodnému textu je zajištěno nastavením vlastnosti margin.

.submit

Rozměry elementu <input type="submit"> jsou určeny podle tradičního box modelu, proto jsou předepsány vnější rozměry. Rámeček tlačítka je určen vlastností border: 1px outset #fff;. Kliknutím na tlačítko, se uplatní pseudotřída active a vlastnost border-style se změní na inset a zamění barvy rámečku. Tečkovaný rámeček okolo textu uvnitř tlačítka ve FireFoxu se odstraní specifickou vlastností -moz-focus-inner {border: none;}. Pro tento případ je použit selektor podle atributu.

Bohužel v IE8 při kliknutí přímo na text v tlačítku nedojde ke změně vlastnosti border-style. Kliknutí na volné místo tlačítka vyvolá chování podle očekávání. Starší IE na změnu rámečku nereagují vůbec.

Elementy formuláře a fokus

Interaktivní prvky webové stránky (hyperlinky a prvky formuláře) mohou získat tzv. focus. V jednu chvíli může mít fokus pouze jeden prvek na stránce. Přesun fokusu na další prvek se provádí klávesou Tab. Do prvku který má fokus je směrován text z klávesnice, a je užitečné když je takový prvek viditelně označen.

V browserech IE, FireFox a Opera poznáme formulářové prvky input=text a textArea, které mají fokus podle blikajícího textového kurzoru, ostatní prvky jsou označeny tečkovaným obrysem. Browsery Chrome a Safari označují prvek, který má fokus velice efektním způsobem: okolo aktivního prvku zobrazí viditelný barevný rámeček. jak je vidět na následujícím screenshotu.

označení formulářového prvku pomocí focus

Hledat aktivní prvek ve větším formuláři s desítkami textových polí podle blikajícího textového kurzoru není jednoduché. Rovněž tečkovaný obrys spíše hyzdí řadu jinak hezkých webových stránek. Naštěstí moderní browsery umožní úpravu vzhledu prvku který má focus. CSS vlastnost outline je pro tento účel výhodná protože nezmění rozložení a velikost prvků stránky.

Ostatní CSS vlastnosti jako změna fontu, přidání border může ovlivnit rozložení prvků na stránce. Změna pozadí formulářového prvku zase způsobí i přepnutí prvku do vzhledu klasik. Naopak pro odkazy může změna barvy pozadí vylepšit vzhled a zároveň odstraní tečkované obrysy.


<style type="text/css">
.
.
input:focus    {outline: 1px solid #962; outline-offset: -1px;}
select:focus   {outline: 1px solid #962; outline-offset: -1px;}
textarea:focus {outline: 1px solid #962; outline-offset: -1px;}
</style>

Pseudo-třída focus se uplatní jen u elementu který má právě přidělen fokus. Původní označení fokusu se nahradí novým způsobem: hnědý obrys šířky 1 pixel. FireFox a Opera si navíc ponechá původní označení tečkovaným okrajem což je poněkud matoucí. Můžeme nastavit barvu, typ a šířku obrysu prvku. Kromě IE se dá uplatnit i vlastnost outline-offset pro nastavení odsazení od vnější hrany prvku.

Použití vlastnosti outline není úplně bez problémů. Pokud jsou formulářové prvky příliš blízko a šířka outline přesáhne jejich rozestup, část obrysu která zasahuje nad další formulářový element je oříznuta. Správně je outline zobrazeno jen v Opeře. IE6 a IE7 nezobrazí CSS focus vůbec, IE8 neumí zpracovat offset.  Chrome a Safari má defaultní nastavení outline-offset: -2px;. Nastavení outline-offset: -1px; zajistí překrytí tečkovaných obrysů prvků checkbox a radio ve FF a Opeře, outline-offset: -3px; překryje tečkovaný rámeček na tlačítku v Opeře. FF umožní odstranit označení na tlačítku specifickou vlastností -moz-focus-inner {border: none;}.

Pro zrušení tečkovaných obrysů hyperlinků (anchor) se často doporučuje nastavit a:focus {outline: none;}. To ale není úplně čisté řešení, pak totiž vůbec nevidíme který prvek má fokus. Lépe je nastavit tenký obrys s neutrální barvou, nebo nastavit barvu pozadí odkazu a:focus {outline: none; background: #ccc;}.

Ani aktivace fokusu není jednotná v různých prohlížečích. Fokus okolo formulářových elementů a odkazů se v IE a FF objeví vždy po klávese Tab, nebo po kliknutí myší. Chrome a Safari aktivuje fokus formulářových prvků vždy, ale odkazy aktivuje jen po klávese Tab. Jak jednoduché a elegantní. Proč tohle neumí i IE a FF?

updated 20.05.2010