Kurz HTML – formuláře pro každého

Formuláře jsou nezbytnou součástí www stránek. Používají se například pro získání názoru čtenáře stránky, slouží k odesílání vzkazů z www stránek apod.

Formuláře fungují, že webmaster přidá na web svůj formulář a v tagu form se odkáže na skript, který běží na serveru nebo na vašem počítači (např. Javascript) a který data z formuláře zpracuje podle zadání (udělá grafy, odešle na zadaný email apod.) Jelikož toto je kurz HTML, vy si pouze vysvětlíme, jak tvořit formuláře na www stránkách, tvorba skriptů je již zcela jiná věc a nezapadá do tohoto tématu.

Při tvorbě formulářů se používají pouze čtyři tagy – <form>, <input>, <textarea> a <select>. Tag form je párovým tagem, který uvozuje začátek formuláře. Konec formuláře je označen jako </form>. Nepárový tag input vytváří přímo na stránce elementy, na které uživatel přímo reaguje – například textové pole, či odesílací tlačítko. Textarea je párovým tagem určeným pro zadávání většího množství textu a nakonec, párový tag <select> slouží k vytvoření roletového menu. V následující části si popíšeme syntaxi těchto tagů blíže.

Klasický, jednoduchý formulář, může vypadat například takto:

Tag <form>

Form je párovým tagem, který uvozuje a ukončuje formulář. Pro funkčnost formuláře je naprosto nezbytným tagem. Pokud uvedete na stránce pouze formulářové prvky, jako například input, v Netscape Navigatoru se tyto prvky vůbec neobjeví, nehledě na to, že formulář bude nefunkční (nepůjdou odesílat data apod.). Jeho zjednodušená syntaxe je následující:

V parametru action uvádíte cestu a název skriptu, který má data z formuláře zpracovat. Parametr Method slouží k určení metody, jak mají být data odeslána – na výběr máte metodu post a get. V případě použití post se data odešlou na server v zašifrované formě. Pokud použijete metodu get, data s formuláře se vloží do adresní řádky.

Tag Input

Tag input slouží k vytváření formulářových prvků. Je tagem nepárovým. Pomocí tagu input můžete vytvořit tyto následující prvky – textové pole (text), textové pole pro heslo (password), skryté pole (hidden), odesílací tlačítko (submit button), resetovací tlačítko (reset button), radio button a checkbox či odesílací obrázek. Jeho syntaxe je zhruba následující:

Align slouží k zarovnání textového prvku Image (viz. dole). Name slouží k předání vložené hodnoty pro skript. Name by rozhodně nemělo textového pole, radio, password, hidden a checkbox chybět. Value má více významů podle typu formulářového prvku, kde je použito. U textových prvků vloží předem připravenou hodnotu, u prvků Checkbox a Radio pošle skriptu, který formulář zpracovává, hodnotu, kterou uživatel vybere.

Jak je vidět, syntaxe je docela jednoduchá. V následují části článku vám vysvětlím jednotlivé typy formulářových prvků včetně ukázky, jak vypadají:

Klasické textové jednořádkové pole, kam je možné psát libovolné znaky. U tohoto typu tlačítka je ještě možné zadat parametr maxlength, který určuje maximální počet znaků, který je možné do pole vepsat a parametr size, který určuje velikost textového pole. Pomocí value přidáte předem připravený text.

Speciální textové pole, které není vidět, nicméně – u kterého je jeho stav předáván skriptu.

Prakticky stejné textové pole, jako je popisováno výše, jenom s tím rozdílem, že při psaní do tohoto políčka se neobjevují znaky, ale malé hvězdičky – používá se pro vkládání hesel. Pomocí value vložíte předem připravené heslo.

Vytvoří tlačítko, pomocí kterého se data obsažená ve formuláři odešlou ke skriptu, který je zadán v tagu form. Pomocí value určíte text na tlačítku:

Rovněž vytvoří tlačítko, které ovšem data z formuláře neodesílá, ale naopak je z formuláře vymaže a nastaví původní hodnoty:

Velmi jednoduché zatržítko. V případě value předáváte vloženou hodnotu, parametr checked toto zatržítko již předem zatrhne.

Klasický „radiobutton“. Obvykle se používá v případě, že ve formuláři má návštěvník více možností na výběr, nicméně – může vybrat pouze jedinou. Toho dosáhnete parametr name, který musí být u jedné takové série stejný. Pomocí value předáte skriptu danou hodnotu – v tomto případě je poznat, zdali bylo vybráno „ano“ nebo „ne“.

Obvykle odesílací tlačítko, jehož vzhled si můžete předem připravit – je to obrázek. V parametru SRC uvádíte cestu k obrázku. Na příklad je vidět napodobenina odesílacího tlačítka (je to ovšem obrázek). Můžete zde použít parametry z tagu IMG jako například ALT, WIDTH, HEIGHT či BORDER.

Tag Textarea

Párový tag textarea se hlavně používá pro větší množství textu. Jeho syntaxe je následující:

Parametr Cols udává počet znaků – tedy šířku textového pole. Rows udává naopak počet řádků. Wrap znamená druh zalomení – implicitní hodnota, která se nemusí zadávat je „physical“. V takovém případě se text zalamuje podle velikosti textového pole a automaticky zalomené řádky jsou poslány na server jako skutečné zalomení. V případě použití „virtual“ se text rovněž automaticky zalamuje, nicméně na server je text poslán jako jeden řádek (pokud nestisknete sami klavesu enter – pak se daný řádek zalomí) a p případě použití „off“ se text nezalamuje vůbec – viz příklad:

Textové pole, cols=“40″ rows=“3″ wrap=“off“

Pokud chcete vložit do textarea nějaký předem připravený text, vložte jej mezi tagy <textarea> a </textarea>

Tag Select

Párový tag select slouží k vytvoření roletového menu, ze kterého vybíráte jednotlivé položky. Jednotlivé položky se tvoří pomoci <option>. Příklad použití je zhruba následující:

Položka jednaPoložka dva

Parametry tagu select jsou name=“hodnota“ a multiple. Name slouží pouze pro účely skriptu, který bude formulář zpracovávat. Pokud vložíte multiple, bude vybírat více položek současně pomocí kurzoru myši. Parametr size určuje velikost rolovacího menu – tedy kolik položek se zobrazí současně:

Položka jednaPoložka dva

Doufám, že vám tento díl o HTML, který byl věnován formulářovým prvkům, pomůže při tvorbě vašich vlastních formulářů. Případné dotazy směrujte na můj email nebo do diskusního fóra, které je pod článkem.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.