Formuláře

V dnešním díle "Průvodce světem webdesignu" se podíváme na formuláře. Napsat kvalitní formulář, který je validní, přístupný, nepoužívá tabulky a neotravuje uživatele, vyžaduje trochu cviku. Představím vám proto dvě vzorová řešení a popíšu na nich techniku tvorby dobrého formuláře.

Obecné pravdy:

U formuláře je velmi důležité, aby byl pro uživatele příjemný a neotravoval ho. Toho dosáhneme správným vzhledem formuláře, jeho rozdělením na témata pomocí tagu fieldset (v případě rozsáhlejších dotazníků rozdělěním na několik stránek), a dodržením několika pravidel:

Snažíme se NEpředvyplňovat formulářová pole. (mazání předvyplňeného textu uživatele zdržuje)
V případě, že uživatel udělá ve formuláři chybu a my vrátíme uživatele zpět, aby chybu napravil, nezobrazíme formulář prázdný, ale s daty, které už vyplnil!!
V případě, že se jedná o přihlašovací formulář, přesměrujeme uživatele po přihlášení na stránku, kterou původně požadoval
Tvoříme formuláře bez tabulek, pouze pomocí validního (X)HTML a CSS. Formulář musí být použitelný i s vypnutými styly.
V případě, že rozdělíme formulář na více stránek (kroků), zobrazíme viditelně stav vyplnění formuláře (1/5 atd.)
Otázky podobného charakteru slučujeme do jednoho tagu fieldset.

Tagy použíté v příkladech:

Rozdělení tagů: Tagy s obsahem (<div>text</div>) Tagy prazdne (<br />)

form – formulář – tag, který sdružuje všechna pole jednoho formuláře. Vstupní pole, která uzavírá se odesílají najednou.

fieldset - skupina formulářových polí – sdružuje pole a graficky je ohraničuje rámečkem

legend - popisek skupiny formulářových polí

label - popisek pole

input – vstupní pole (prázdný tag)

br – odřádkování (prázdný tag)

div - blok

První vzorový příklad:

Tento příklad má jednodušší HTML a mírně složitější CSS než druhý příklad. Využívá techniku tečení, proto není vhodný pro zastaralé prohlížeče (Netscape, IE 5). Dále je pak potřeba nastavit relativni (nebo pevnou) šířku prvku label. Proto se tento příklad nehodí pro formuláře s velmi rozdílnou délkou popisů.

<form>
<fieldset>
<legend>Formulář</legend>
<label for="name">Jméno: </label><input type="text" name="name" id="name" />
<br /><label for="pass">Heslo: </label><input type="password" name="pass" id="pass" />
<br /><div class="submit"><input type="submit" value="Přihlásit" /></div>
</fieldset>
</form>

Technika zobrazení: Prvku label a input nastavíme vlastnost float na left. Tím tyto prvky odtečou na levou stranu. Prvku label pak nastavíme vlastnost clear na both. Ta zapříčiní, že se tento prvek nezařadí za předchozí tekoucí prvek, ale zařadí se až pod něj (počká až se tekoucí prvky před ním ukončí). Dále pak nastavíme prvku label šířku (width) například 5em a zarovnání textu (text-align) doprava. Tím už jsme téměř hotovi. Ještě dodáme vnitřní a vnější okraje a je hotovo. Ukázka prvního vzorového řešení

Druhý vzorový příklad:

Druhý příklad využívá pouze zarovnání a vnější a vnitřní okraje.

<form>
<fieldset>
<legend>Formulář</legend>
<div><label for="name">Jméno: </label><input type="text" name="name" id="name" /></div>
<div><label for="pass">Heslo: </label><input type="password" name="pass" id="pass" /></div>
<div class="submit"><input type="submit" value="Přihlásit" /></div>
</fieldset>
</form>

Technika zobrazení: Celý obsah prvku fieldset je zarovnán doprava. Prvek input má nastavený pravý vnější okraj (margin-right) a tím se posouvá blíže ke středu. Prvek label má pro změnu nastavený pravý vnitřní okraj (padding-right), aby se nelepil na vstupní pole. Stačí ještě doplnit vlastnost margin-top, aby se jednotlivé řádky nelepily na sebe a je hotovo. Ukázka druhého vzorového řešení

Závěr

Oba tyto příklady nejsou samospasitelné a nedají se brát jako hotové řešení pro jakékoliv použití. Jsou to pouze ukázky technik, kterými by se měli formuláře tvořit.