Většina formulářových prvků se v HTML zadává pomocí tagu <input>. Tento element je nepárový, takže jeho ukončovací tag není definován. Jaký typu formulářového prvku chceme na stránce zobrazit se určuje pomocí atributu type="". Může nabývat jedné z těchto hodnot: text, password, checkbox, radio, submit, reset, file, hidden, image, button. Na jednotlivé hodnoty se nyní podíváme podrobněji.

text

text je výchozí hodnotou pro atribut type="", pokud tedy zapomenete tento atribut použít, doplní si prohlížeč právě tuto hodnotu. Pokud použijete hodnotu text, objeví se vám na stránce textové políčko pro vložení jednořádkového textu. S hodnotou text jsou spojeny tyto specifické atributy:

• value=""
• size=""
• maxlenght=""

Atributem value="" určíme text, který se má v textovém políčku zobrazit při načtení stránky. Atribut size="" určuje délku textového políčka. Jeho hodnotou je celé číslo, které udává, kolik znaků má být v textovém okénku vidět, tj. udává jeho délku ve znacích. A atribut maxlenght="" určuje maximální délku textu, který můžete do textového políčka napsat. Tento atribut je vhodné použít například ve chvíli, kdy data z formuláře chcete ukládat do databáze, kde máte omezenou maximální délku záznamu. Neochrání vás to ale jistě, někdo vám může zkusit podstrčit data podobně jako jsem to udělal já v minulém díle - minule šlo jen o výpis, ale úplně stejně by se dalo zapisovat třeba do knihy návštěv ze seriálu o PHP. Proto při tvorbě dynamických stránek všechna data ošetřujte i na straně serveru.

Zkusíme si udělat jednoduché textové pole.

Pokud si kód zkopírujete do své stránky, bude tlačítko pravděpodobně vypadat jinak než zde. Je to tím, že některé formulářové prvky jsou na těchto stránkách přestylované pomocí CSS. To platí i o dalších formulářových prvcích.

password

Může se vám to zdát podivné, ale o tomto formulářovém prvku už vše víte. Chová se totiž úplně stejně jako textové políčko, jediný rozdíl je v tom, že při psaní se místo písmen objevují hvězdičky (nebo taky kolečka nebo cokoli jiného - záleží na konkrétním prohlížeči). Takže rovnou přejdeme k příkladu.

checkbox

Tyto formulářové prvky jsou určené pro zjištění požadavků uživatele ve formě ANO/NE. Checkbox se zobrazuje většinou jako malý čtvereček, který můžete zaškrtnout (ANO) nebo nechat prázdný (NE). Checkbox má povinné atributy name="" a value="" (tento atribut je u ostatních formulářových prvků volitelný). name="" obsahuje jmeno proměnné, která se bude předávat cílovému scriptu a ve value="" určíte hodnotu proměnné. Tato hodnota se odešle jen v případě, že je checkbox aktivní (zaškrtlý). Pokud máte několik checkboxů, které jsou s spolu logicky svázané je vhodné je pojmenovat nějak takto: promenna[], vznikne vám tak rovnou pole, které můžete velice jednoduše zpracovat (předpokládám, že data z formuláře zpracováváte přes php).

Může nastat i situace, že potřebujete zajistit aby bylo některé políčko zaškrtnuté už od načtení stránky. K tomuto efektu slouží atribut checked, kterému nenastavujeme žádnou hodnotu.

Umím vytvořit checkbox.

radio

Tento formulářový prvek má stejné atributy jako checkbox, ale použití se malinko liší. radio se používá pokud chcete dát vybrat uživateli z několika možností, ale uživatel si může vybrat jen jednu. Všem prvkům v jedné skupině možností nastavte stejnou hodnotu atributu name="". Odesílá se jen hodnota u zaškrtlého prvku. Opět můžete nějakou možnost předvolit atributem checked.

Používám operační systém:
Linux
jiný

submit

Takto vytvoříte tlačítko, které odešle formulář ke zpracování zpracovávajícímu scriptu. Popisek tlačítka můžete definovat pomocí atributu value="". Pokud přidáte i nepovinný atribut name="", můžete definovat několik odesílacích tlačítek a podle toho, které tlačítko bylo zmáčknuto, můžete různě vyhodnotit formulář, hodnata tlačítka se odešle jako další proměnná, její název určíte právě pomocí atributu name="".

reset

Toto tlačítko slouží pro smazání dat ve formuláři, nic se neodesílá ke zpracování. Atributem value="" nastavíme popisek tlačítka.

file

Tímto formulářovým prvkem můžete spolu s formulářem odeslat i soubor uložený na vašem počítači. Při odesílání souborů musíte nastavit formuláři jiné kódování přenášených dat (enctype="application/x-www-form-urlencoded"). Více informací najdete v předchozím dílu.

Můžete použít atribut accept="", kterým určíte jaké typy souborů je povolené zadat. I o tomto atributu jsme mluvili v předchozím dílu.

hidden

Hidden neboli skryté pole. Tento formulářový prvek se na stránce nijak nezobrazí, ale slouží jako uložiště dat, která nemají mít uživatelé na očích. Můžete ho využít třeba v případě, že máte několik formulářů, které si mezi sebou posílají data, na každém formuláři se zjistíněco dalšího a odešle do následujícího formuláře do skrytých polí.

Použít můžete atributy name="" pro určení jména proměnné a atribut value="" pro nastavení hodnoty proměnné.

image

Jako odesílací tlačítko lze použít i soubor. Pomocí atributu src="" určíme cestu k obrázku. Po kliknutí se odšlou data na server a mezi proměnnými budou i souřadnice místa, na které jste klikli. Souřadnice budou ve formátu jmeno_tlačítka.x resp jmeno_tlačítka.y.

Toto tlačítko je ale nepoužitelné v textových prohlížečích, takže tím je celý formulář nefunkční. Pokud si ríkáte, že textové prohlížeče nikdo nepoužívá, tak musím říct, že aspoň já občas brouzdám v terminálu. Jsem jediný?

button

Pokud chcete mít na stránce tlačítko, které ani neodesílá data ani je nemaže, je volba button přesně to co hledáte. Toto tlačítko nemá žádnou funkci, ale můžete si pomocí klientským scriptům (JavaScript a další.) napsat vlastní funkce. Pro spouštění jednotlivých scriptů můžete použít např. událost onclick="" a další, o kterých jsem se už zmínil v předchozích dílech.

Popisek opět můžete nastavit atributem value="".

To je pro dnešek vše, už znáte základní prvky formulářů, příště je probereme všechny dopobrobna.