(přednášku připravil Jiří Novotný)

Formuláře neboli forms jsou něčím, bez čeho by se Internet (respektive World Wide Web) neobešel. Zajišťují totiž zásadní věc – odesílání dat na server, kde dojde k jejich zpracování, většinou nějakým skriptovacím jazykem (PHP, Python apod.).

V této lekci nás ale bude primárně zajímat používání různých ovládacích prvků, které s sebou přinesl standard HTML5.

V textu budou jiným písmem, než má obyčejný text, odlišeny názvy elementů, atributů a jejich hodnot:

• <element>
• atribut
• hodnota atributu

Některé atributy jsou typu boolean a jejich použití může být lehce matoucí, takže tady je krátká vysvětlivka:

• false jsou tehdy, když nejsou zapsány u elementu;
• true jsou tehdy, když jsou zapsány u elementu.

A jak mohou být zapsány? Oficiálně by měly fungovat dva zápisy:

• <element boolean_atribut="boolean_atribut"> – zřejmě nejkompatibilnější způsob zápisu;
• <element boolean_atribut> – tohle nefungovalo, ale mělo by (radši se tomu vyhnout ;).

Konkrétní a fungující příklad: <input name="bool" type="text" required="required" />

Základním elementem formulářů je element <form>. V něm můžou a nemusí být jednotlivé ovládací prvky formuláře (anglicky widgets, dále jen prvky). Prvky (např. <input>) je totiž, jak sami uvidíte, možné přidávat i mimo <form>. Dalo by se vlastně říci, že <form> je tu hlavně proto, aby skupině prvků přiřazoval stejné vlastnosti a také aby prohlížeč věděl, hodnoty kterých prvků má odeslat serveru.

Pak tu máme některé další hlavní elementy, které slouží hlavně k přehledné navigaci ve formuláři. Je dobré zmínit, že tyto elementy nejsou povinné, nicméně je dobré je používat právě kvůli zmíněné přehlednosti. Hned na dalším slajdu si na příkladu ukážeme, jak vypadají :)

• <fieldset> – je to něco jako rámeček, který k sobě logicky sdružuje skupinu prvků (graficky)
  • <legend> – nadpis rámečku, potomek <fieldset>
  • disabled – boolean atribut. Je-li nastaven na true, znepřístupní prvky uvnitř <fieldset>
  • form, name
• <label> – používá se k popisu prvků
  • for, form

• Element <form> nám ohraničuje formulář „kódově“. Přímo ve specifikaci HTML je přísně zakázáno používat vnořené <form>! Některé prohlížeče to totiž nemusí rozdýchat.
• Ve <form> vnořené <fieldset> nám ohraničují skupinu prvků graficky. Do sebe vnořené <fieldset> (jak vidno) nejsou problém.
• Po <fieldset> by měl následovat <legend>, protože jen tak bude nadpis rámečku tam, kde by měl být, tj. v čáře rámečku ohraničujícího příslušný fieldset.
• <label> se dá napsat vlastně kamkoliv, a nebo se do něj prvek dá uzavřít, jak je vidět ve vnořeném rámečku v příkladu. V případě vnoření prvku do <label> zde funguje podobná vlastnost jako v případě <label> spojeného s určitým prvkem (atribut for, uvidíte na dalším slajdu).
• Samotné prvky (v našem případě <input> typu number) jsou tedy umístěny uvnitř <fieldset>.
• Je zde jednoduchý Javascript: <output> i <input> mají v DOMovské reprezentaci atribut value. Při změně value v jednom z inputů (atribut oninput) se součet hodnot v inputech nastaví jako value outputu a hned se vypíše.
• Poslední <fieldset> má nastaven disabled na true. Výsledek je jasný :)

Teď se podíváme na logické propojování prvků a <form>.

Jak jistě víte, každý element v HTML má atribut id, který ho jednoznačně identifikuje v rámci dokumentu. Formulářové elementy nejsou výjimkou. Některé mají atribut form, který je přiřazuje k určitému <form>. Hodnotou atributu form je hodnota id příslušného <form>. Díky form mohou prvky být mimo <form>, ale stále s ním být „ve spojení“, tj. data z těchto prvků jsou zpracována příslušným <form>. Bohužel to neznamená, že by prvky virtuálně ležely uvnitř <form> a sdílely tak např. jeho stylování – jde jen o jejich zpracování.

Element <label> má speciální atribut for, který ho přiřazuje k určitému prvku. Jeho hodnotou je hodnota id příslušného prvku. Pokud uživatel klikne na takto přiřazený label, aktivuje se s ním spojený prvek.

Možná Vás napadlo, jaký je rozdíl mezi atributy id a name, když oba pojmenovávají elementy (prvky) – celkem zásadní, protože oba slouží k jiným účelům:

• id – jak už bylo řečeno, tento atribut poskytuje jednoznačnou identifikaci elementu v rámci dokumentu, a musí proto být jedinečný. Odkazují se na něj atributy form a for.
• name – tento atribut identifikuje prvek při odesílání na server a nemusí být jedinečný.

Malý příklad, proč hodnota name nemusí být jedinečná:

• V tomto příkladu máme tři checkboxy – mají jiné hodnoty value, ale stejné hodnoty name.
• Při odeslání na server může přijít informace, že uživatel zvolil checkboxy s hodnotami value jablko a hruska.
• Oba tyto zvolené checkboxy mají stejnou hodnotu name, takže server ví, do jaké kategorie oba zvolené checkboxy patří.

Dá se tedy říct, že v případě prvků spadajících do stejné kategorie je hodnota name něco jako „krabice“ a hodnoty value pak její „obsah“.

Tento formulář obsahuje tři samostatné bloky:

1. <form>, v němž leží <fieldset> s prvky a mimo <fieldset> ještě <label>:
   • Uvnitř <fieldset> máme jednoduchý <input> typu text a hned u něj <input> typu reset (reset button), který obnoví formulář do původní podoby.
   • Pak následuje <label> s atributem for="reset_button", čímž je k tomuto prvku přiřazen. Na tohle jsem upozorňoval v předchozím slajdu – pokud je prvek uzavřen do <label>, chová se <label> stejně, jako by měl atribut for="id_prvku"
2. Samostatný <fieldset>, neležící uvnitř <form>:
   • Zde máme uvnitř <fieldset> <input> typu reset přiřazený k našemu <form>, a proto po kliknutí normálně obnoví formulář. Logicky mě napadlo, že pokud bych tento <fieldset> přiřadil k našemu <form>, byly by k němu přiřazeny i všechny prvky ležící uvnitř tohoto <fieldset>. Bohužel se zdá, že tato podle mě celkem užitečná věc zatím funguje jen v Opeře...
3. Úplně samostatný label a reset button, přiřazený k <form>:
   • Všimněte si, že <label> není přiřazen k <input> a po kliknutí tedy reset button neaktivuje.

Odkazování na <form> může mít jedno zajímavé využití:

• V tomto příkladu máme dva <form>. Jeden by zpracovával objednávky, druhý by vyhledával zboží.
• Pak zde máme několik prvků, které využívají naše dva <form>.

A co z toho plyne? :) Můžeme si vytvořit několik „šablonových“ <form>, jednotlivé prvky mít rozesety po stránce a odkazovat je podle potřeby na příslušné <form>.

Jak už bylo řečeno dříve, <form> je naším základním formulářovým elementem. Pojďme se nyní podívat na jeho hlavní atributy:

• action – hodnotou je URI adresa, na kterou budou odeslána data.
• autocomplete – může nabývat hodnot on nebo off, přičemž on je výchozí hodnota. Je to vlastně automatické vyplňování formulářů prohlížečem na základě údajů zadaných uživatelem v minulosti. Logicky funguje jen s textovými prvky. Checkboxy se Vám samy nevyplní ;)
• enctype – určuje způsob, jakým mají být data zakódována před odesláním na server. Možné hodnoty:
  • application/x-www-form-urlencoded – defaultní hodnota. Všechny znaky jsou zakódovány, mezery převedeny na „+“, speciální znaky na hexadecimální ASCII kódy.
  • multipart/form-data – znaky se nekódují. Tato hodnota se musí použít u formulářů, kde se uploadují soubory.
  • text/plain – mezery jsou převedeny na „+“, speciální znaky se nekódují.
• method – možné hodnoty jsou get nebo set. Určuje způsob, jakým se data mají posílat na server.
• name – název <form>. Musí být v rámci dalších <form> na stránce unikátní a nesmí obsahovat prázdný řetězec.
• novalidate – boolean atribut. Je-li nastaven na true, nebudou se kontrolovat prvky, které nějakým způsobem vyžadují kontrolu. Může se jednat o prvek number, kde jsou defaultně vyžadována čísla, nějaký prvek, který má nastaven atribut required na true nebo třeba text, kde může být vyžadován určitý formát vstupu pomocí atributu pattern.
• target – říká, kam se má vypsat odpověď po odeslání formuláře. Může nabývat hodnot:
  • _blank – odpověď v novém okně;
  • _self – odpověď v tom samém okně (výchozí hodnota);
  • _parent – odpověď v nadřazeném rámu;
  • _top – odpověď v celém okně prohlížeče (tedy v hierarchicky nejvyšším prvku, tudíž ne v rámu);
  • jméno_rámu – odpověď v pojmenovaném rámu na stránce.

Největší „sborník“ prvků je <input> se svým atributem type (přehledný výpis zde a také zde na webu).

Pak zde však máme i jiné prvky, reprezentované vlastními elementy: <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>.

Postupně si je všechny probereme.

Určitě Vás hned napadl rozdíl mezi <input type="button"> a <button> na jedné straně a <input type="text"> a <textarea> na druhé. Pojďme si to trochu osvětlit:

• Hlavní výhodou <button> je to, že mezi jeho tagy se dají umístit další HTML elementy, což u <input> nejde. Tudíž buttonem se může stát text či obrázek, „vystajlovaný“ pomocí CSS. Později si ukážeme několik pěkných příkladů ;) Jediná možnost, jak z obrázku pomocí <input> udělat submit button je type="image".
• <textarea> umožňuje zadávat víceřádkový text a navíc je plocha na psaní roztažitelná uživatelem (což ani jedno <input type="text"> neumí).