site logo

Formulářové elementy a box model

Sjednotit rozměry formulářových prvků pomocí historických atributů size, rows a cols  je téměř nemožné. To je ukázáno v článcích textBox a textarea. Některé formulářové prvky podle HTML5 dokonce tyto atributy ani nepodporují. V tomto článku si ukážeme jak stanovit rozměry formulářových elementů pomocí CSS a jak se projeví box model v jednotlivých browserech.

obecné porovnání box modelů

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ů.

.textBox {width: 116px; height: 16px; padding: 0 4px; margin: 4px; float: left;}
.textarea {
  width: 120px; height: 64px;
  padding: 0 0 0 4px; margin: 4px;
  float: left;
}
.select {width: 128px; height: 22px; padding: 0; margin: 4px;}
.submit {width: 128px; height: 22px; padding: 0 margin: 4px;}

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.

screenshot stanovení rozměrů formulářových prvků

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 IE6, 7 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">

Internet Explorer od verze 8 zavedl tlačítko Kompatibilní Zobrazení (vedle tlačítka Aktualizovat). Uživatel si může sám přepínat mezi oběma box modely podle toho, který se mu "vyhovuje". Jedinné řešení jak vynutit standardní mód i pro IE8 je zakázat zobrazení tlačítka Kompatibilní Zobrazení a tak znemožnit přepnutí do Quirks módu. To lze provést následujícím kódem, které je umístěn do HTML hlavičky.


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Připomínám, že box model se uplatní u všech HTML prvků, nejen pro prvky formuláře, které jsou probrány na této stránce.

updated 06.01.2011