site logo

Formulářový element <form>

Jednotlivé formulářové prvky musí být uzavřeny do prvku form, který ohraničuje oblast formuláře. Prvky které leží mimo oblast formuláře nejsou součástí formuláře a nebudou odeslány. Uvnitř formuláře nesmí být další formulář, ale na jedné stránce může být více samostatných formulářů. Odeslán je jen jeden formulář, ten který byl aktivován pomocí submit. V článku jsou popsány možnosti použití stylů a atributů prvku form, další články se věnují ostatním formulářovým prvkům.

Velmi odlišné pojetí webových formulářů zavedl Microsoft ve svém ASP.NET. Proto, to co je zde a dále uvedeno nemusí platit pro formuláře vytvářené pomocí nástrojů MS.

Element form a CSS

Formulář by měl být konzistentní v použití jednotného typu písma, ale font se nedědí podle elementu body, html, dokonce ani z prvku form. Abychom dosáhli jednotného výsledku musíme v každém formulářovém prvku deklarovat CSS třídu, nebo musí být nastaven jednotně pro všechny formulářové prvky podle příkladu.


input, select, textarea {font: normal 100% Arial, SansSerif, Verdana;}

form {margin: 0 auto;
      background: #ccc;
      border: 1px solid #aaa;}

Element form se při použití CSS vlastností chová stejně jako jiné HTML elementy podle W3C box modelu. Je možné nastavit pozadí, rámeček, je vhodné nastavit margin, protože defaultní hodnoty této vlastnosti se mohou lišit v různých browserech. Jak ovlivní barva pozadí zobrazení některých formulářových prvků vidíte na následujícím obrázku.

screenshot: vliv pozadí formuláře na zobrazení formulářových prvků

Screenshot je zvětšen na 200% aby byl viditelný kontrast rámečků prvků a pozadí formuláře. Prvky v motivu klasik mají bílou barvu rámečku dole a vpravo, která na bílém pozadí splyne s pozadím a část prvků zmizí. Celé prvky jsou zobrazeny na šedém pozadí. V motivu XP barva pozadí nemá vliv na zobrazení a celé prvky jsou jasně vymezeny. Windows7 přináší světle šedé rámečky a formulář je dobře viditelný na pozadí bílém.

Jakou barvu pozadí formuláře tedy zvolit? Opravdu je dobře přenechat vykreslování formulářových prvků na OS? Naštěstí existuje možnost upravit formulářové elementy pomocí kaskádových stylů a navrhnout vzhled formuláře nezávisle na omalovánkách Microsoftu.

Atributy elementu form

<form method="..." name="..." action="..." onsubmit="...">

Řada atributů je společná pro většinu HTML elementů a zde je jenom vyjmenujeme pro pořádek. id pro práci s java skriptem, class pro určení CSS třídy, style pro definování CSS vlastností inline, title pro vytvoření tooltipu a další národní atributy jako lang a dir. Další skupinou atributů jsou skriptované události od myši, nebo klávesnice. Kromě společných atributů mají některé elementy ještě atributy specifické pro element.

method="get"

Je to defaultní metoda, kdy formulářová data jsou odeslána jako součást URL adresy. Za adresu je přidán znak otazník a následují formulářová data ve formě name=value. Jednotlivé položky formuláře jsou odděleny znakem "&". Obsah formuláře se následně objeví v adresním řádku a proto se někdy tvrdí, že tato metoda je méně bezpečná.

Metoda get se používá v případech kdy odeslání formuláře nezpůsobí změnu obsahu databáze. Prakticky to jsou dotazy jejichž výsledkem jsou vrácená data podle specifikace ve formuláři.

Některé zdroje udávají maximální délku URL včetně formulářových dat okolo 4 kB. W3C udává maximální délku dokonce jen 200 Bajtů v případě, že odesíláme data obsahující znaky s diakritikou.

Kdysi jsem použil tuto metodu pro odeslání seznamu vybraných datových souborů, ze kterých bylo potřeba provést dlouhodobou statistiku. Testy byly bezchybné, praktické výsledky někdy chybné. Ukázalo se, že dlouhé seznamy souborů byly ořezány díky použité metodě a statistika nebyla provedena ze všech souborů. Řešením byla změna metody odesílání formuláře.

method="post"

Metoda post se doporučuje v případech kdy formulářová data způsobí změnu obsahu databáze, tedy vzniká nový záznam (řádek), nebo je přepsán existující záznam následkem editování, případně při požadavku na smazání záznamu. Další aktivity kdy je doporučeno použití metody post je přihlašovací formulář, odeslání objednávky, nebo emailu. Při použití metody post není omezena délka formulářových dat.

Obě metody mají ještě další odlišnosti. Stránka získaná metodou get obsahuje v URL i formulářová data a proto je možné ji uložit do oblíbených položek, a později stránku znovu získat bez vyplňování formuláře. To neznamená, že vždy získáme totožnou stránku, to záleží na nastavení pamětí cache, většinou ji serverový skript nastaví na okamžité vypršení pak získáte tutéž stránku s aktualizovanými daty. Při použití metody post není možné uložit formulářová data do oblíbených položek a navíc do paměti cache se data neukládají.

name="...", id="..."

Zatímco každý formulářový prvek (radio, select, ..) musí mít atribut name definován a jeho hodnota musí být unikátní jméno, v případě elementu form tento atribut povinný není a zůstává jen pro zpětnou komaptibilitu. Atribut name pro element form totiž není součástí formulářových dat a není ani odeslán.

V případě, že JavaScript, nebo CSS se odkazuje na element form, je preferován atribut id i name. Tady někde asi začíná matení pojmů. Pamatujte si: name potřebuje server aby znal jména polí formuláře. Atribut id využívá browser pro správnou funkci prvku label for, nebo JavaScript aby získal odkaz na tento objekt.

Někdy je zmatení atributů name a id skutečné i pro browser IE. Tuto chybu popisuje článek na 456BereaStreet. Proto věnujte dostatečnou pozornost při volbě jména a id prvku.

action="..."

Atribut action je URL adresa serverového skriptu, kam má být zaslán vyplněný formulář. Tento atribut může být přesán JavaSkriptem (jen když nepoužíváte ASP.NET) například na základě hodnot formulářových dat, třeba podle volby radiobuttonu.

Element form a skripty

Základní funkce formuláře (editování textů, přepínání radiobutonů, změna stavu checkboxu, odeslání, nebo resetování formuláře) umí browsery i bez JavaScriptu. Není žádný "odesílací formulář", jak často čtu v logu dotazy, každý formulář jde odeslat. Otázkou je kam. Na serveru, na adrese action="...", totiž musí být druhá část formuláře a to skript pro zpracování obsahu formuláře.

Pro začínající je asi vhodné připomenout, že odeslat formulář na statickou adresu tj. na stránku která má příponu .html, nebo .htm sice provede odeslání dat, ale statická stránka neumí data převzít a zpracovat. V takovém případě server pouze zašle do browseru onu statickou stránku a formulářová data zahodí. Serverový skript je většinou napsán v nějakém serverovém jazyku (PHP, ASP) a ten provede převzetí a kontrolu formulářových dat a uložení do databáze. Serverová část formuláře je často mnohem složitější a náročnější než HTML, CSS a JavaScript kód formuláře v prohlížeči.

Element form můžeme vynechat a přesto použít formulářové prvky. Příkladem může být webová aplikace kalkulačky, kdy veškeré výpočty jsou prováděny v browseru pomocí JavaScriptu. Pak se na server žádná data neposílají.

onsubmit="validate(this)"

Z událostí, které mohou být přilinkovány k elementu form má praktický význam událost onsubmit(), vyvolaná těsně před odesláním formuláře na server, tedy po kliknutí na tlačítko submit. To je ten správný okamžik pro kontrolu validity formuláře a další akce jako například zablokování vícenásobného odeslání formuláře, nebo přesměrování na jiný serverový skript.

Je to také vhodné místo kde validační funkci můžeme pomocí parametru this předat referenci na objekt odesílaného formuláře a validační skript nemusí tuto referenci pracně získávat. Více o validaci formulářů najdete v článku validace formuláře.

updated 29.01.2010