Formuláře v HTML

Na této stránce se zabývám pouze základní syntaxí formulářů v HTML, což se fakticky týká jen jejich vzhledu.

<form></form> - Chameleon <input> - <select> - <textarea> - Atribut name - Atribut value - Velikosti prvků - Checked a selected

Přehled formulářových tagů

<form>: vymezení oblasti formuláře
<input>: vstupní políčko, odesílací políčko, zaškrtávátka, přepínače, prostě mnoho věcí. Co to přesně bude, určuje type
<select>: výběr, taková ta rolovací nabídka. Někdy se tomu říká drop-down menu
<option>: vyskytuje se uvnitř tagu <select> a představuje jednu možnost v nabídce
<textarea>: oblast pro zadání delšího textu
<label>: popisek pole
<optgroup>: množina voleb
<fieldset>, <legend>: množina prvků s nadpiskem

<form></form>

Tag formuláře. Příklad:

<form action="skript.php3" method="post" target="_blank">
...nějaká vstupní pole + normální html text
...<input type=submit value=odeslat>
</form>

Vypadá to takhle:

Action je vymyšlená, takže to tady nefunguje. Co znamenají jednotlivé atributy:

action obsahuje URL (v tomto případě relativní) na skript, kterému je potom formulář posílán

target určuje cílový rám, ve kterém se budou výsledky zpracovávat. Podobnost s target u odkazů není náhodná. Např. hodnota target="_blank" posílá výsledek do nového okna.

Method

method určuje způsob, kterým budou data odesílána. K dispozici jsou hodnoty GET a POST.

GET je metoda základní (nemusí se zadávat). Data odeslaná metodou GET jsou součástí URL za otazníkem a jsou vidět. Používá se většinou u krátkých formulářů.

Metoda POST je vhodná pro rozsáhlejší vstupy. Data nepřidává do URL (takže nejsou vidět), ale odesílá je jako samostatný HTTP objekt.

Jaký vliv má method na zpracování dat? Některé skripty mezi metodami get a post nečiní rozdíly (např. PHP skripty.) Jiné rozdíly činí (ASP a většina CGI skriptů), ovšem nijak zásadní. Takže je většinou jedno, která metoda se to použije. Doporučuje se postovat vstupy obsahující hesla a dlouhé vstupy, protože get je omezen myslím na 1024 znaků.

Chameleon <input>

Input znamená "vstup". Tag input má mnoho podob. Jednou je to vstupní pole, jindy odesílací políčko, někdy přepínač, jindy odesílací obrázek atd. Všechno to určuje atribut type:

HTML	ukázka	popis
`<input type="text" size="10" name="textik" value="obsah">`		Normální vstupní pole
`<input type="password" size="10" name="heslo" value="kocka">`		Vstupní pole pro heslo. Pouze skryje hodnoty, jinak to nic neumí.
`<input type="checkbox" checked name="skrtatko" value="ano">`		Zaškrtávací políčko (nezaškrtnuté se neodesílá)
`<input type="radio" name="puntik" value="horni">Horní<br>` <input type="radio" name="puntik" value="dolni" checked>Dolní	Horní Dolní	Přepínač Vždy je aktivní pouze jedna volba se stejným name.
`<input type="hidden" name="tajemstvi" value="nic">`		Skryté pole bez možnosti změny. Nezobrazuje se, ale odesílá se tajemstvi=nic.
`<input type="submit" value="odeslat">`		Odesílací tlačítko
`<input type="reset" value="vymazat">`		Zákeřné tlačítko obnovující původní hodnoty
`<input type="image" name="obrazek" src="images/jpw.gif">`		Odesílací tlačítko, které zároveň posílá souřadnice kliknutí.

Zkuste si schválně pozměnit hodnoty uvedené výše a odeslat, koukejte, co to provede s dotazem v URL za otazníkem.

V případě odesílacího tlačítka <input type="submit" value="odeslat"> se jeho hodnota (value) odesílá pouze v případě, že uživatel odeslal formulář kliknutím na tlačítko myší. Jestliže formulář odeslal stisknutím enteru, hodnota submitu se neodešle.

Zadání souboru

Do tabulky se mi nevešel poslední typ <input type="file" name="soubor">

slouží k zadání cesty k souboru. Nepřenáší se jméno souboru, ale celý soubor. Ke správné funkci vyžaduje určitá nastavení (v definici formuláře: <form enctype="multipart/form-data">). Atribut value nefunguje. Zpracovat přiložený soubor na serveru není žádná sranda (musí se programovat, např. v PHP).

V HTML 5 jsou navrženy nové hodnoty type pro input: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url a week. Jejich podpora v prohlížečích není v roce 2012 ještě na takové úrovni, aby se tím mělo smysl vůbec zabývat. Příklady nových hodnot input type z HTML 5.

Formálně mám tag input popsán na stránce Input v HTML.

Select

Výběrová nabídka, které se občas říká "select box", "rozbalovací nabídka", "rozbalovací menu" nebo taky "drop-down menu", "combobox", "listbox", "vysouvací menu", "nabídka" nebo prostě menu. Select má různé podoby ovlivňované zejména atributem size.

HTML	ukázka	popis
`<select name="platforma" size="1"> <option value="win">Windows <option value="linux">Linux <option value="unix">Unix <option value="mac">Mac </select>`		Výběr z několika možností, který se zobrazuje v jednom řádku (protože size=1)
`<select name="platforma2" size="3" multiple> <option value="win">Windows <option value="linux" selected>Linux <option value="unix">Unix <option value="mac">Mac </select>`		Výběr zobrazený ve třech řádcích (size=3) s možností výběru více položek -- to dělá to "multiple"(klikejte s klávesou CTRL)
`<select name="platforma3" size="4" multiple> <option value="win">Windows <option value="linux">Linux <option value="unix" selected>Unix <option value="mac">Mac </select>`		Seznam výběrů je tak velký, že nejsou potřeba lišty (size=4 odpovídá počtu položek). Volba s atributem "selected" je předem vybrána (Unix).
`<input type="submit" value="odeslat">`		Odesílací tlačítko zde jen pro zkoušku odeslání

Pozor, tag <select> je párový!

Textarea

Oblast pro zapsání většího textu.

HTML	ukázka	popis
`<textarea rows="4" cols="15" name="dlouhytext">Zde může být text </textarea>`	Zde může být text	Široké a vysoké vstupní pole pro zadávání delších textů
`<input type="submit" value="odeslat">`		Odesílací tlačítko

Tag <textarea> je také párový. Zkuste si odeslání a sledujte, co se stane.

Velikost textarey se měří na znakové řádky a sloupce, ale dá se přetlouct pomocí CSS. Zalamování řádek při psaní a po odeslání se řídí atributem wrap.

Atribut Name

Name je nejdůležitější atribut formulářových tagů. Identifikuje je a posílá své jméno s daty. Symbolicky po odeslání vypadá URL takto:

?jméno=hodnota&jméno2=hodnota2

Příklady odesílání dat si můžete vyzkoušet ve výše uvedených tabulkách. Nebo například v dotazu

?jidlo=jablko&piti=kafe&zvire=ko%E8ka

jsou řetězce jidlo, piti a zvire obsahem atributu name, kdežto jablko, kafe a kočka jsou zadané hodnoty.

Ještě pár zajímavých výjimek:

U <input type=radio> (přepínač) se může vyskytovat více puntíků se stejným jménem. Vždy může být zatržený ale jenom jeden; ten se potom odesílá se svou hodnotou
U <input type=image> (obrázkové odesílání) se při kliknutí musejí odesílat dvě hodnoty -- souřadnice. Ke jménu (name) se připojují tečka s písmenky x a y. Například pokud je <input type=image name=obrazek>, potom jeho odeslání může vypadat takto:?obrazek.x=13&obrazek.y=121
U <select multiple> je třeba odesílat více hodnot se stejným jménem. Při odesílání se prostě zařadí za sebe:
?platforma=unix&platforma=linux

Atribut Value

Hodnota, obsah polí.

U některých prvků formuláře je to hodnota přednastavená (u <input type="text"> a <input type="password">), která jde před odesláním měnit
u tlačítek (input type="submit" a type="reset") některých prvků je to hodnota zobrazovaná na tlačítku
u <input type="file> z bezpečnostních důvodů nefunguje atribut value a nejde jej ovládat ani skriptem (dal by se tak totiž vykrást např. soubor s hesly)
u ostatních prvků (select, input type="checkbox", type="radio", type="hidden") je to hodnota nezobrazovaná a neměnitelná, která se ale odesílá s daty.
Textarea atribut value nemá. Ve formuláři se objeví jako přednastavená hodnota samotný obsah tagu (vnitřek, prostě <textarea>tohle</textarea>).

Velikosti prvků

Input typu text a password nastavují svoji velikost podle atributu size. Ten udává počet znaků, který se tam může zobrazit. (Fakticky se tam ale vejde znaků více.)
Size u tagu <select> označuje počet zobrazených řádků výběru.
Tagu <textarea> se zadává šířka a výška ve znacích pomocí atributů rows a cols (řádky a sloupečky).
Pokud je na prvky formuláře aplikován CSS styl (zejména width a height), převáží původní nastavení (nefunguje v NN4).

Checked a selected

Atributy, jimiž se označuje přednastavené zatržení políčka nebo výběr. Jsou to atributy zvláštní tím, že za nimi není rovnítko s hodnotou.

Checked se dá použít u <input type="checkbox"> a u <input type="radio">.

Selected se dá použít u výběrů <select>.

Pokud jsou tyto atributy použity v jednom výběru nebo přepínači vícekrát, platí jen ten první z nich.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně