Vizuální návrh HTML formuláře

Obsah lekce:

Formuláře a CSS

Když začneme vytvářet webové aplikace, tak brzy zjistíme, že standardní zobrazení formulářových prvků je účelné a přehledné (je-li formulář zobrazen samostatně), ale jakmile je potřeba formulář vizuálně upravit do přijatelné podoby pro konkrétní webdesign nastává problém.

CSS nepředepisuje vzhled formulářových prvků, není jasné zda tyto prvky mají převzít systémové zobrazení, nebo zda web je samostatná platforma a vzhled formulářových prvků má být jednotný pro všechny prohlížeče. Přestože neexistuje žádný předpis, nebo doporučení jak mají formulářové prvky nastavit vzhled podle CSS, jednotlivé prohlížeče různým způsobem podporují styly.

Někteří webdesignéři doporučují formuláře nestylovat vůbec. Pokud máte představu blogovacího, nebo kontaktního formuláře, obsahujícího jen několik vstupních polí a formulář se musí zobrazovat v jakémkoli browseru, je opravdu lépe nestylovat. Nicméně, pokud budeme stylovat s rozmyslem a máme možnost výsledný formulář otestovat na více prohlížečích a ideálně i platformách, pak i jednoduché stylovaní může vzhledu webu hodně prospět.

Na intranetu (co je to intranet) je situace jiná. Mnohdy to jsou velmi rozsáhlé formuláře (desítky až stovky prvků), jindy se formulář musí přizpůsobit složitější tabulce kde jsou společně zobrazeny výstupní i editovaná data. Nestylované pseudo-3d formulářové prvky zabírají hodně místa a vypadají poněkud archaicky.

Element form a CSS

Formulář s následující CSS modifikací elementu form:

• margin: 0 auto;
• background: #ccc;
• border: 1px solid #aaa;

Formulář by měl být konzistentní v použití jednotného typu písma, ale font se zde nedědí podle elementu body, nebo html. Nejde nastavit ani jednotně ve stylu pro prvek form. Abychom dosáhli jednotného výsledku musí být typ písma nastaven nějakým takovýmto pravidlem:

Pokud chceme vzhled formuláře co nejvíce sjednotit, tak můžeme předchozí definici rozšířit o další elementy jako je label, fieldset, legend apod.

Element input type="text" a CSS

Formulářový prvek <input type="text" ... /> je nejčastěji používaný element ve formulářích. Používá se pro vkládání kratších textů jako jsou jména, adresy, čísla, datumy apod.

Nyní si uvedeme modifikaci textového input boxu, která se zdá býti funkční téměř bez výjimky napříč prohlížeči. Jejím hlavním úkolem bude "likvidace" pseudo 3d vzhledu tohoto formulářového prvku. Takto nastylovaný prvek lze následně vložit do konteineru (například div), který bude mít design podle našich požadavků.

Poznámka k atributu size input boxu. Jedná se o starší způsob definice velikosti fomulářového prvku input text. Takto definovaný rozměr nezaručí stejnou velikost v jednotlivých prohlížečích a je podstatně lepší ji nastavit pomocí CSS (stejně jako výše).

Element textarea a CSS

Formulářový prvek textarea je používán pro delší, víceřádkové texty, obvykle předem neznámého rozsahu. Na Internetu jsou to většinou boxy pro komentáře k článkům, dotazníky apod.

Nyní si uvedeme modifikaci elementu textarea, která se zdá býti funkční téměř bez výjimky napříč prohlížeči. Jejím hlavním úkolem bude "likvidace" pseudo 3d vzhledu tohoto formulářového prvku. Takto nastylovaný prvek lze následně vložit do konteineru (například div), který bude mít design podle našich požadavků.

Poznámka k atributům rows a cols (určují počet řádků a sloupců v prvku rows) prvku textarea. Jedná se o starší způsob definice velikosti fomulářového prvku textarea. Takto definovaný rozměr nezaručí stejnou velikost v jednotlivých prohlížečích a je podstatně lepší ji nastavit pomocí CSS (stejně jako výše).

Element select a CSS

Formulářový prvek select je používán pro výběr z několika možností, či pro jednoduché menu.

Tento prvek vykazuje značnou nejednotnost stylovaného vzhledu v různých prohlížečích. Zde bychom se měli držet pouze změny písma v souladu s ostatními formulářovými prvky, případného podbarvení a okraje, který ale není zcela korektně zobrazován. Můžeme nastavit šířku a výšku, ale musíme si být vědomi toho, že je velikost dostatečná, aby zůstal čitelný obsah. V našem případě jsme nastavili pouze šířku.

Elementy checkbox, radio a CSS

Formulářové prvky checkbox a radio je sloužící pro výběr možností je lépe nestylovat vůbec. Konec.

Zajímavé řešení s použitím těchto prvků lze realizovat pomocí javascriptu (více na adrese http://swatelier.info/at/formulare/checkBox.htm v sekci "Experimentální checkbox").

Element input type="submit" aneb odesíláme formulář

Formulářový prvek input type="submit" slouží pro odeslání formuláře na server.

Submit tlačítko lze ještě vylepšit o další dvě vlastnosti - dá se doplnit o obrázek, který může mít pěkný ilustrační charakter nebo o dynamický efekt při najetí myší na tlačítko (tlačítko například změní barvu).

Domácí úkol

Vytvořte nějak barevně laděnou internetovou stránku s formulářem, který vhodně ostylujete (do vloženého CSS souboru) a doplníte odesílací tlačítko o obrázek a nějakou dynamickou změnu jeho stavu při najetí myší.

Další čtení

Otázky

1. Popište, jaké máme možnosti při stylování formulářů pomocí CSS.
2. Jaké hlavní problémy nastávají při stylování formulářů?