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:

...nějaká vstupní pole + normální html text...

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.

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>
Š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:

Atribut Value

Hodnota, obsah polí.

Velikosti prvků

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, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.