Pozn.: Opravil jsem svou milnou informaci, že formulář je sémanticky tabulka. Není to tak. Děkuji panu Málkovi za upřesnění.
V hlavní části se zmíním o rozmístění prvků ve formuláři pomocí CSS, což je asi to podstatné. Dále jen pár věcí ohledně formátování vzhledu různých prvků formuláře. Rozmístění prvků na stránce můžeme provést mnoha způsoby, ale optimální samozřejmě je najít ten nejjednodušší a nejefektivnější.
Hned na začátku se můžete podívat na trošku komplexnější příklad.
Zápis formuláře v HTML
Chceme dosáhnout zobrazení popisku a vedle formulářového prvku vždy ve stejné vzdálenosti (jakoby zarovnáno do dvou sloupců).

Při správném použití HTML využíváme prvek label
pro popisek a vedle libovolný formulářový prvek. Každá položka má být na samostatném řádku, takže jsem ji uzavřel do odstavce p
. Stejně dobře se může použít element div
, či pouze odřádkování br
. Pokud následující kód (bez stylů) zobrazíme v prohlížeči, uvidíme popis a hned vedle vstupní pole.
<form name="form" action="form.html" method="post"> <p><label class="left" for="item1">Položka 1: </label> <input id="item1" name="item1" type="text"></p> <p><label class="left" for="item2">Položka 2: </label> <input id="item2" name="item2" type="text"></p> </form>
Pozn.: daly by se stylovat přímo dané elementy a nepoužívat třídy, ale v mnoha příkladech je to třeba řešit tímto způsobem (viz. příklad)
Pozn. 2: u formulářového prvku musíme použít jak id pro využítí for u label, tak name pro práci s daty prvku
Patřičné CSS
Abychom dosáhli námi požadovaný vzhled, musíme upravit styl jednotlivých elementů. Zde je uvedeno pouze nutné formátování, více naleznete v příkladu.
Element label
nám zajistí dosažení správné mezery – šířky levého sloupce. Je třeba jej vytvořit jako plovoucí float: left
, aby se další prvek zobrazil vedle něj. Zobrazení musíme nastavit na blokové display: block
, jinak se neuplatní ani šířka ani plavání. Použil jsem i nastaveni pozice na relativní position: relative
, viz. Nezobrazení plovoucího objektu v Internet Explorer. Všechny vlastnosti jsem neuplatnil rovnou na element label
, abych mohl využít tento element i bez plavání (viz. příklad).
label { width: 200px; } .left { position: relative; display: block; float: left; }
Výše uvedené by bylo dostačující, aby se formulář zobrazil tak, jak chceme. Ale v případě, že by popisek byl delší a rozdělil se na více řádků, tak by došlo k problémům (kvůli tomu, že je plovoucí a tudíž vyjmutý z toku dokumentu). Proto je třeba na element p
nastavit čekání na konec plavání.
form p { clear: both; }
Pozn.: pokud by byl textový řetězec v popisku bez mezer a delší než stanovená šířka, tak dojde k problémům (v různých prohlížečích odlišným)
Prvky formuláře
Jenom pár poznámek k formátování formulářových prvků.
V Internet Exploreru (do verze 6 včetně) není implementována podpora pro selektory s atributy, takže nemůžeme použít zápis tag[atribut]
, čímž bychom mohli rozlišit textové pole, <input type="text">
, od třeba checkboxu, <input type="checkbox">
. Navíc zrovna v případě checkboxu či radiobuttonu bere IE "zvláštně" obsah tohoto prvku, takže když pro textové pole předefinujeme rámeček, tak se kolem těchto prvků vykreslí ošklivý rám. Proto je třeba stylovat (v tomto případě) tyto prvky zvlášť pomocí třídy.
Můžeme využívat moderní element pro seskupování prvků dokumentu fieldset
spolu s nadpisem legend
. Tyto prvky se dají pěkně upravit pomocí stylů.
Formulářové tlačítko se dá opět pěkně upravit pomocí stylů. Zajímavé řešení je použití barevného přechodu jako obrázku na pozadí. V IE bohužel funguje pseudo třída hover
pouze na element a
, ale v ostatních prohlížečích ji můžeme použít i zde pro změnu zobrazení po najetí myší.
V příkladu jsem použil pseudo třídu focus
na element input
, která zajistí změnění stylu ve chvíli, kdy má prvek focus. Tato zajímavá vlastnost však opět není podporována v IE.
pěkný jednoduchý úvod do problematiky ;-)
Formulář v žádném případě není ze sémantického hlediska tabulka!
odpověď na [2]Vilém Málek: Předpokládám, že máte pravdu, pak by asi špatně odpovídalo provázání label a prvku. Ovšem četl jsem tuto informaci minimálně ve dvou knihách (pokusím se dohledat kde). A když se člověk podívá na papírový formulář, tak jeho struktura odpovídá tabulce.
2 Samuraj: Formuláře se tabulkám podobají vnějším vzhledem, nikoli vnitřním významem a funkcí, ať už jde o formuláře "papírové" nebo elektronické. Ne vše, co se v knihách píše, je pravda a leckdy člověk odhalí nesmysl, pokud se nad danou věcí jen minimálně zamyslí, místo aby ji přijímal jako fakt, který netřeba zvažovat.
Tabulka shrnuje a zprostředkovává speciálním způsobem strukturovanou množinu informací. Zkuste vzít libovolný formulář a přepsat ho do tabulky - aby měl sloupce označující typ informace a řádky, které tu informaci ponesou. To se vám nepodaří, výsledek nebude dávat smysl ;-)
odpověď na [4]Vilém Málek: Děkuji, pěkně vysvětleno.