Barvy a grafika ve formuláři

Včlenění formulářů do WWW stránky není rozdílné od včlenení obrázků nebo textu. Formuláře jsou prvky, které musí být pro dosažení maximálního efektu vytvořeny promyšleně. Na rozdíl od grafiky nebo textu, které mohou a nemusí vyžadovat interakci, formuláře vždy vyžadují od uživatele nějaký druh interakce. Vzhledem komu je nutno začlenění a návrhu formulářů do grafické struktury stránky věnovat náležitou pozornost. Touto technikou:
Vytvoříte pro farmulářová pole obal. Způsobu uspořádání a návrhu formulářových polí dodáte strukturu.
Navrhnete jedinečný vzhled a styl formulářů. Část stránky věnovaná formulářům bude mít stejný vzhled jako zbytek webu.
Začleníte formuláře esteticky do návrhu webové prezentace. Formuláře nemusí být nudné - pokud je oživíte barvami a obrázky, povýšíte obecně estetiku celého návrhu.

Navrhování formulářů
Navrhujete-li formuláře, přihlížejte k následujícímu:

Používejte tabulek k navržení podkladové mřížky, do které budou umístěna pole formulářů a HTML text.

Používejte atribut BGCOLOR tabulkových datových buněk k vytvoření barvy na pozadí polí formuláře.

Ujistěte se, že vzhled a styl formulářů zůstává obecně esteticky konzistentní uvnitř celého návrhu webové prezentace.

Je-li to možné, vložte do struktury formuláře GIFy nebo JPEGy, aby formuláře nevypadaly tak stroze.

Vytvořte obalové pole formuláře.

Navrhněte originální obrázek, který začleníte do formuláře.

Obrázek rozdělte na části

sestavte jej do tabulky. Použijte váš oblíbený grafický editor k rozkouskování obrázku. Ponechte ohraničení buněk. Použijte nulové atributy CELLPADDING a CELLSPACING. Nezapomeňte na zarovnání obrázků v tabulkových buňkách. Pokud je to nutné, definujte barvu pozadí jednotlivých tabulkových buněk.

   

Vytvořte pole formuláře.

Pro odesílací tlačítko použijte tag INPUT takto:
< INPUT TYPE="IMAGE" SRC="umístění_obrázku" BORDER=0>.

Odstraňte ohraničení

tabulky a proveďte závěrečné úpravy.

Příklad
< FORM>
< TABLE width=373 height=151 border=0 
cellpadding=0 cellspacing=0>
< TR>< TD rowspan=2 width=40 height=151 
align=right valign=top>
< IMG src="odeslatl.gif" width=40 height=151 border=0>< /TD>
< TD colspan=2 width=333 height=120 valign=bottom>
< IMG src="odeslath.gif" width=333 height=120 border=0>
< /TD>< /TR>
< TR>< TD width=230 height=31 align=center valign=middle 
bgcolor=#FFFFD6>
< INPUT type="text" size=20>< /TD>
< TD width=103 height=31 valign=top align=left>
< INPUT type="image" src="odeslatp.gif" border=0>< /TD>< /TR>
< /TABLE>< /FORM>
Takhle to vypadá Začátek
Další
Předchozí