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.