Formulářové elementy a box model
Box model určuje pravidla výpočtu rozměrů HTML prvků na základě vlastností CSS. Protože pro formulářové prvky neplatí žádná závazná pravidla jak nastavit rozměr podle CSS vlastností, většinou se doporučuje použití historických atributů size, rows a cols. Jak dopadne takto "sjednocená" velikost elementů jsme si ukázali v článcích textBox a textarea. V tomto článku si ukážeme zda a jak jednotlivé browsery umí dodržet nepovinný box model u formulářových prvků.
Existují dva box modely. Standardní browsery používají W3C box model, Internet Explorer používá tradiční box model. IE6 a výše můžeme přepnout do standardního režimu pomocí úvodní deklarace DOCTYPE a zajistit tak standardní box model ve všech běžných browserech.
W3C považuje předepsanou šířku width jako vnitřní šířku elementu, ke které se postupně oboustranně připočítávají hodnoty padding, border a margin. Součtem všech těchto hodnot dostaneme celkovou šířku, kterou element obsadí. Totéž platí i pro výpočet výšky prvků.
V tradičním box modelu, který používá Internet Explorer, šířka width určuje šířku elementu včetně rámečku border a vnitřního odsazení padding. Element pak obsadí celkovou šířku width + 2*margin a výšku height + 2*margin.
Při práci s obrázky (img) je více intuitivní W3C box model, jindy při práci s tabulkami, nebo formulářovými elementy se zdá více intuitivní tradiční model. V zásadě je ale jedno podle kterého box modelu se rozměry počítají, důležité je aby tento model byl jednotný ve všech prohlížečích. Ostatně nově připravovaná vlastnost CSS box-sizing umožní zvolit vhodný box model podle potřeby.
Následuje živá ukázka některých formulářových prvků formátovaných pro potřebu vysvětlení počítání box modelu. Ukázka zobrazí některé formulářové prvky podle Vašeho aktuálního browseru, a můžete ji porovnat se screenshotem dále. Pozadí formulářových prvků je šedé, aby byly viditelné bílé části prvků.
Screenshot formuláře, zvětšený na 200% pochází z IE7, XP motiv klasik. Vnitřní odsazení padding prvků textbox a textarea je dokreslen v grafickém editoru světle modrou barvou, aby byl jasně odlišený. Rámeček prvků je ponechán defaultní a v tomto stavu je ve všech browserech kreslen v šířce 2 pixely. Vnější odsazení margin je nastaveno pro všechny prvky na 4 pixely.
Podle vztahu k box modelu můžeme formulářové prvky rozdělit do dvou skupin.
1. Formulářové elementy, které se chovají podle W3C box modelu: input type="text", input type="file", textarea a form.
2. Další skupinu tvoří prvky input type="submit", select (včetně tlačítek reset a button), které se chovají vždy a všude podle tradičního box modelu. Do této skupiny lze zařadit i prvky checkbox a radio. Ty bývají zobrazeny jako bitmapový obrázek (někdy zoomovaný) na který nelze aplikovat žádný model. Skutečně renderované prvky checkbox a radio s možností úpravy vzhledu pomocí CSS umí jen Opera. Potom rozměry perfektně odpovídají tradičnímu box modelu.
Při stanovení vizuální šířky elementů z první skupiny musíme vycházet z nastaveného
vnitřního odsazení padding a z rámečku border. Nastavená vnitřní
šířka width pak musí být menší o tyto hodnoty, tak jak je naznačeno v
následující rovnici:
vizuální šířka = CSS width + 2*padding + 2*border
Textarea má nastaven padding jen na levé straně protože padding na pravé straně způsobí posunutí svislé rolovací lišty v některých browserech. Proto je v předcházející rovnici padding započten jen jednou.
Dosáhnout požadované vizuální šířky prvků ve druhé skupině, která vykresluje prvky podle tradičního box modelu je velmi jednoduché. Nastavíme požadovanou šířku width. Ostatní CSS vlastnosti jako border, případně padding šířku neovlivní. Připomínám, že oba prvky jsou vykresleny podle tradičního modelu jak ve standardních browserech, tak i v IE, který je přepnut do standardního režimu.
Stanovení výšky formulářových prvků je podle stejného principu. Je ale potřeba vzít v úvahu výšku použitého fontu, tak aby stanovená výška i použitý font byly ve vhodném poměru. Nastavení fontu formulářových prvků proveďte pomocí hvězdičkového zápisu *{} (univerzální selektor), nebo v CSS deklaraci vyjmenujte všechny formulářové elementy.
Uvedené výpočty platí jen pokud počítáme rozměry v pixelech. Jakmile zkusíte jiné jednotky, např. procenta, výsledky nejsou předvídatelné, zejména v případě IE.
Element textarea je ve Chrome a Safari vykreslen o 2 pixely menší, než odpovídá stanovenému předpisu. To je dáno tím, že WebKit počítá s defaultní šířkou rámečku tohoto prvku 3 pixely, ostatní browsery počítají 2 pixely. Pokud explicitně nastavíte šířku border pomocí CSS např. textarea {border: 2px lightgray inset;} je shoda rozměru dokonalá. Když stanovíte rozměry prvku textarea pomocí CSS a chcete mít validní stránku podle W3C, přidejte i atributy cols a rows.
Abychom dosáhli stejného rozměru elementů ve standardních browserech i v Internet Exploreru, musíme přepnout IE do standardního (strict) módu. Teprve pak se v IE uplatní box model podle W3C. Přepnutí je provedeno na prvním řádku HTML kódu uvedením některé z následujících definic. První definice je pro kód XHTML, druhý pak pro HTML kód, který v poslední době prožívá jistou renezanci. Třetí, jednoduchý kód je pro standardní mód podle specifikace HTML5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>
updated 06.01.2011