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 nejsou odeslány. V článku jsou popsány možnosti použití stylů a atributů prvku form, v dalších článcích se budu věnovat ostatním formulářovým prvkům.
Element - form a CSS
Kdysi kdesi od nějaké autority jsem četl, že element form se nemá stylovat. Dodržoval jsem to do doby, než jsem přišel na to, že IE používá jinou defaultní hodnotu pro margin než ostatní browsery. Tento rozdíl může rozhodit pečlivě připravený design a proto je potřeba nastavit minimálně tuto vlastnost. Když už nastavíte jednu vlastnost, proč to nezkusit i s jinými.
form {margin: 0 auto;
background: #ccc;
border: 1px solid #aaa;}
input, select, textarea {font: normal 100% Arial, SansSerif, Verdana;}
Stylování celého formuláře se většinou omezí jen na nastavení pozadí a případný rámeček a výjmečně využijeme padding. Ostatní CSS vlastnosti tohoto elementu nemají valný smysl.
Formulář by měl být konzistentní v použití jednotného typu písma, ale font se 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 podle příkladu, případně rozšířen o další elementy (label, fieldset, legend).
Jedinnou vyjímkou může být textarea, kde použití fontu typu Courier, nebo monospace může být záměrem. Tento prvek je na intranetu většinou používán pro poznámky a takovým písmem lze vytvořit primitivní tabulku dodatečných výsledků, které nejsou součástí databáze.
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. Velkou skupinu 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 daný 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í zakódovaná 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 místo 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ář. Programátory .NET možná překvapí, že tento atribut je možné přesat java skriptem například na základě výsledků vyplněných formulářových dat, třeba podle volby radiobuttonu.
Změna adresy serverového skriptu může mít význam pro velice jednoduchou ochranu proti spamu, protože spamovací roboti prozatím neumí analyzovat klientské skripty.
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. 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.
updated 16.02.2008