Formulářové elementy a CSS, souhrn
Běžné webové formuláře např. v blogu nepotřebují mít shodný vzhled v různých prohlížečích. Dokonce malé odlišnosti působí pozitivním dojmem. Webové a intranetové aplikace jsou něco jiného. Základ netvoří texty, ale tabulky, grafy, menu a formuláře. Často je formulář součástí protokolu, nebo grafu a musí být připraven s přesností na pixel.
Top management firmy nezajímají názory webových teoretiků: "nestylujte formuláře!!!". Mírně odlišný vzhled reportů je pro tyto lidi důkaz Vaší neschopnosti. Ostatně soudím, že i lehce odlišný vzhled webové aplikace uživatele nejen zmate a zkomplikuje orientaci, ale v konečném důsledku zhorší její použitelnost.
Cílem studie v tomto článku je zjistit, zda je možné vytvořit formulář vypadající shodně v běžných prohlížečích. K tomuto účelu byl vytvořen kompaktní miniformulář obsahující všechny formulářové prvky kromě input type="file". Vynecháme zde "labelování" jednotlivých políček formuláře.
Miniformulář vpravo je živý a je možné jej vyplňovat libovolným textem a testovat. Nelze jej odesílat ke zpracování, nebo provádět validaci vložených hodnot. Cílem je získat obraz ve vašem browseru a tento porovnat se screenshoty na případnou shodu nebo rozdíly.
Formulářové prvky nejdříve zbavíme jejich rámečků a pak vytvoříme nový rámeček pomocí tmavého pozadí tabulky. Jednopixelová mezera mezi formulářovými prvky, která tvoří rámeček je dosažena díky atributu cellspacing="1px" v elementu table. Formulář lze formátovat i do elementů div, princip zůstavá stejný. Některé prvky formuláře mají nastavenu vlastnost background, která přepne specifický vzhled těchto prvků do standardní podoby klasik. Takové prvky se lépe stylují pro jednotnou podobu v browserech.
Pevně formátovaný formulář musí použít jednotný box model pro výpočet velikostí prvků. Proto přepneme IE do standardního módu prologem uvedeným v úvodu ukázky kódu. Dále stanovíme pevnou velikost písma v pixelech. Font pro formulářové prvky není zděděn, musíme jej předepsat tak jak je v ukázce. Podle velikosti písma určíme jednotnou výšku prvků (v našem příkladu 18 pixelů). Nejmenší možná výška pro daný font je 16 pixelů aby nedošlo k ořezání dolní části znaků.
Při snižení výšky texboxu pod jistou hranicí dochází v IE k zajímavému efektu. Text v nestylovaném elementu při přesunu textového kurzoru pulzuje o několik pixelů nahoru a dolů. Tento jev jsem podrobně nezkoumal.
Nejdříve určíme padding pro prvky textbox a textarea tak, aby nedocházelo ke zmizení textového kurzoru na pravé straně textboxu. K této hodnotě dopočítáme width tak, aby byla správně zaplněna celková šířka buňky. Pro prvky select a submit určíme šířku shodně se šířkou buňky, protože pro tyto prvky se box model počítá jinak. Takto formátované prvky nám umožní vytvořit řádkový i sloupcový formulář. Praktické ukázky formulářů jsou v následujících článcích.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<style type="text/css">
input, select, textarea, td {font: normal 13px Arial; color: black;}
table {table-layout: fixed; width: 113px;}
td {width: 113px; padding: 0; margin: 0; border: 0; background: #e7e7e7;}
.textBox {width: 105px; height: 18px; margin: 0; border: 0; padding: 0 4px;
float: left; background: #ffa;}
.textArea {width: 109px; height: 74px; margin: 0; border: 0; padding: 0 0 0 4px;
float: left; background: #ffa; overflow: auto;}
.selectBlock {width: 113px; height: 18px; border: 0;
position: relative; overflow: hidden;}
.selectInput {width: 117px; height: 22px; top: -2px; left: -2px;
position: absolute; color: black; background: #ffa;}
.checkBlock {width: 109px; height: 18px; margin: 0; padding: 0 0 0 4px;}
.checkInput {width: 15px; height: 14px; margin: 0 7px; padding: 0;}
.button {width: 113px; height: 22px; background: #ddd; border-width: 1px;}
</style>
Poznámky k jednotlivým prvkům
input type="text"
Prvek má stejný rozměr ve všech testovaných browserech. Vyšší elementy v IE a Safari, které zabírájí o 2 pixely větší svislý prostor se podařilo sjednotit díky vlastnosti float: left;. 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: 105px;. Celková šířka je 105+2*4=113 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: 109px;. Celková šířka je prvku 109+4=113 pixelů. Rolovací lištu v Opeře nejde pomocí CSS odstranit.
select
Pro bezrámečkový prvek select, bylo zvoleno experimentální řešení. Select je vykreslen včetně rámečku, ale rámeček je skrytý za rozměrově menším prvkem div, který původní rámeček překrývá. Protože rámeček má šířku 2 pixely, jsou rozměry prvku select větší o 4 pixely v obou směrech.
Vadou na kráse je bug v browseru FireFox 2, který způsobí že vykreslený prvek select je o 2 pixely vyšší než bylo předepsáno v CSS a tlačítko má odříznutou spodní hranu. Od verze FireFox 3 již počítá výšku správně.
input type="checkbox" a input type="radio"
V článku checkbox a radio jsme si ukázali, že tyto prvky jsou v podstatě nestylovatelné. Podařilo se umístit tyto prvky společně s textem do řádku výšky 18 pixelů, ale nedaří se uspokojivé vertikální zarovnání textu a prvků. Problematické jsou změny rozměrů prvků, najít skutečný prostor který potřebují a nastavit zarovnání.
input type="submit"
Tento prvek dělá nejmenší problémy při sjednocení vzhledu formuláře. Přepnutí na vzhled klasik použitím vlastnosti background: #ddd; značně zjednodušší situaci. Další zjednodušení přináší fakt, že rozměry prvku jsou počítány podle jiného box modelu. Vše co potřebujete je stanovit konečné rozměry prvku.
updated 15.12.2007