www.SAMURAJ-cz.com 

16.12.2017 Albína Translate to English by Google     VÍTEJTE V MÉM SVĚTĚ

Články

Formátování formuláře v CSS

Středa, 24.05.2006 10:29 | Samuraj - Petr Bouška |
Prvky formuláře většinou chceme zarovnat do dvou či více sloupců, proto se dříve často používalo formátování pomocí tabulky (stejně jako pro layout). Není to správné řešení a já se pokusím vysvětlit, jak můžeme formátovat formulář čistě pomocí CSS (a také velmi jednoduše).

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

Formátování formuláře

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.

zobrazeno: 14101krát | Komentáře [7]

Autor:

Související články:

Formuláře

Formuláře jsou součástí téměř každého webu. Pokud formuláře vytváříme, tak narazíme na řadu oblastí jako je bezpečnost, jednoduchá použitelnost apod.

Pokud se Vám článek líbil, tak mne potěšíte, když uložíte odkaz na některý server:

Pokud se chcete vyjádřit k tomuto článku, využijte komentáře níže. Pokud chcete poradit s nějakým problémem či diskutovat na nějaké téma, tak použijte fórum.

Komentáře

  1. [1] dakarin

    pěkný jednoduchý úvod do problematiky ;-)

    Úterý, 06.06.2006 10:06 | odpovědět
  2. [2] Vilém Málek

    Formulář v žádném případě není ze sémantického hlediska tabulka!

    Čtvrtek, 15.06.2006 10:40 | odpovědět
  3. [3] Samuraj

    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.

    Čtvrtek, 15.06.2006 10:58 | odpovědět
  4. [4] Vilém Málek

    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 ;-)

    Pátek, 16.06.2006 00:56 | odpovědět
  5. [5] Samuraj

    odpověď na [4]Vilém Málek: Děkuji, pěkně vysvětleno.

    Pátek, 16.06.2006 08:05 | odpovědět
  6. [6] nbv

    [strong][/strong][em][/em][link][/link]:-O:-(;-):-)

    • na komentář odpověděl [7]Jan
    Středa, 29.07.2009 11:32 | odpovědět
  7. [7] Jan

    odpověď na [6]nbv: METALLICA

    Středa, 29.07.2009 11:33 | odpovědět
Přidat komentář

Vložit tag: strong em link

Vložit smajlík: :-) ;-) :-( :-O


Ochrana proti SPAMu, zdejte následující čtyři znaky image code

Nápověda:
  • maximální délka komentáře je 2000 znaků
  • HTML tagy nejsou povoleny (budou odstraněny), použít se mohou pouze speciální tagy (jsou uvedeny nad vstupním polem)
  • nový řádek (ENTER) ukončí odstavec a začne nový
  • pokud odpovídáte na jiný komentář, vložte na začátek odstavce (řádku) číslo komentáře v hranatých závorkách