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 s malou výhradou. Lze nastavit vnější rozměr, ale ohraničení není viditelné.
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 započteno jen jednou.
Elementy textbox a textarea mají nastavenu vlastnost float: left;, protože jinak vzniká volný prostor výšky 1px nad i pod elementy v některých browserech. Zabraná výška by pak nesouhlasila s nastavenou výškou podle CSS.
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.
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.
Výsledná shoda není zcela dokonalá. Např. v Safari a v Chrome je textarea o 2 pixely menší, než odpovídá stanovenému předpisu. Výška prvků select a submit v Safari závisí na velikosti fontu, v našem případě je výška nižší než předepsaná. Větší fonty než rozměry elementů způsobí ořezání textu. W3C považuje atributy cols a rows v textarea za povinné, element bez těchto atributů není validní i přes to, že skutečné rozměry jsou nakonec stanoveny podle CSS vlastností.
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.
<!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">
updated 18.10.2008