Formuláře

Tag	Atribut type=	Význam	Ukázka	Párový	Výskyt pouze v
form		formulář		ano
input	text	textový vstup		ne	<form>
	password	heslo
	radio	přepínače
	checkbox	zatrhávací políčko
	submit	odesílací tlačítko
	další v textu
select		výběrové pole		ano	<form>
option		volba v selectu		ne	<select>, <datalist>
textarea		velké vstupní pole	dole	ano	<form>
label		popis pole		ano	<form>
fieldset		skupina polí		ano	<form>
legend		popis pole		ano	<fieldset>
optgroup		skupina voleb		ano	<select>
button		tlačítko		ano	<form>
datalist		našeptávač k inputu	není vidět	ano
output		obálka výstupu		ano!	<form>
keygen		vygenerování klíčů		ne

Potřebujete-li pochopit základní funkci formulářů, přečtěte si úvod do formulářů. Tato stránka se zabývá zápisem formulářů do HTML.

Tag input jsem přenesl na samostatnou stránku.

form

Formulář. Párový tag. Uzavírá skupinu ovládacích polí do jednoho formuláře, který bude najednou odeslán.

Atributy tagu <form>
Atribut	Význam	Hodnoty
action	skript, který bude zpracovávat data	URL
method	způsob předávání dat	get \| post
enctype	způsob zakódování dat	application/x-www-form-urlencoded \| multipart/form-data \| libovolná mime deklarace
target	cílové okno nebo rám	_self, _blank, _top, _parent, nebo jméno rámu nebo okna
rel	jako rel u odkazu <a>	noopener, noreferrer

Action obvykle míří na nějaký CGI skript nebo PHP nebo ASP. Není-li uvedeno, odešlou se data téže stránce.

Výchozí metoda atributu method je get. Říká, že se data budou předávat jako součást URL, tedy v řádku adresy. Method=post zabalí odesílaná data a odesílá je nezávisle, takže nejsou vidět. Post je dobré nastavit u delších formulářů.

Atributem enctype se nemusíte zabývat, pokud vám nepůjde o posílání souborů nebo o přesný výstup českých znaků (pak nastavte multipart/form-data).

Následuje popis vstupních polí formuláře. Dělají se pomocí tagů <input>, <select> a <textarea>. Tyto musejí být umístěny v elementu <form>, ale navíc mohou být třeba i v tabulce. Popisky vstupních polí se dělají normálním textem kolem nich.

Příklad nejjednoduššího formuláře odesílaného na skript.php, s jedním textovým polem a potvrzovacím tlačítkem:
<form action="skript.php" method="get"> <input type="text" name="parametr" value="hodnota"> <input type="submit" value="odeslat"> </form>

input

Výklad tagu input jsem přenesl na samostatnou stránku o tagu <input>

Vstupní pole. Nepárový tag.

Příklad jednoduchého formuláře se vstupním polem:

<form action="odeslani.php">
jméno: <input type="text" name="jmeno" value="">
<input type="submit" value="odeslat">
</form>

Nejdůležitější atributy tagu <input>
Atribut	Význam	Hodnoty
type	druh vstupního pole	text \| password \| hidden \| radio \| checkbox \| submit \| reset \| image \| file \| button a další z HTML5
name	jméno pole, které se odesílá s daty	libovolné jméno
value	hodnota pole (původní hodnota pole nebo text zobrazovaný na tlačítku)	libovolná hodnota

Atribut type určuje typ políčka

Input v sobě zahrnuje celou škálu různých kolonek, tlačítek a přepínačů -- to všechno závisí na atributu type.

Tag <input>, atribut type. Různá vstupní pole.
type=	Druh vstupního pole
text	obyčejné textové pole
password	textové pole s hvězdičkami
hidden	skryté pole s předem nastavenou hodnotou
radio	přepínač puntíků (několik tagů <input type=radio> stejného jména (name) s různými hodnotami tvoří skupinu možností)
checkbox	zatrhávací tlačítko
submit	potvrzující tlačítko způsobující odeslání formuláře
a další

Další hodnoty a výklad tagu input jsem přenesl do samostatného textu o tagu input.

select

Výběr z více možností. Zobrazí obdélníček s rozbalovacími možnostmi nebo roletkové menu. Párový tag, jeho obsahem jsou jednotlivé volby -- tagy <option>.

Atributy tagu <select>
Atribut	Význam	Hodnoty
name	jméno pole odesílatné s daty	libovolné jméno
multiple	umožnění hromadného výběru (s Ctrl)	bez hodnoty
size	počet zobrazených řádků	číslo
disabled	políčko bude šedé a nepůjde měnit (jen v některých prohlížečích)	bez hodnoty
autofocus	hned po načtení stránky bude políčko aktivní (půjde hodnotu měnit šipkami)	bez hodnoty

Pokud je size 1, bude to roletkové menu. Při size 2 a vyšší se <select> zobrazí jako obdélníček s rolovací lištou. Bude-li hodnot stejně nebo méně než size, nebudou tam ani rolovací lišty.

Šířka selectu, jak se vykreslí na stránce, se odvozuje od nejširší option. Vzhled šedivé šipky s nabídkou nelze v Internet Exploreru nijak změnit.

Zev všech HTML tagů jsou s vykreslováním tagu select jsou asi největší problémy, select například nejde dost dobře stylovat přes CSS (pouze tučnost, kurziva a barva pozadí přes <option>). Je to tím, že tento ovládací prvek přebírají prohlížeče (zejm. Internet Explorer) z grafického prostředí operačního systému.

Příklad:
<select name="ovoce"> <option value="jb">jablko</option> <option value="hs" selected="selected">hruška</option> </select>

option

Položka výběru. Nepárový tag (třebaže se může zadávat párově), obsahem elementu je text za tagem až do dalšího tagu. Musí se vyskytovat uvnitř tagu <select> nebo <datalist>, jinak nic nedělá.

Atributy tagu <option>
Atribut	Význam	Hodnoty
value	řetězec odesílaný jako hodnota pole	řetězec
selected	položka je předem vybrána	bez hodnoty nebo s libovolnou
disabled	položka je vidět, ale je zašedlá a nelze ji vybrat	disabled

Obsah tagu, tedy text za tagem <option> se zobrazí ve výběru.

Pomocí kaskádových stylů (CSS) se v IE 6 dají položky option formátovat pouze omezeně. Dá se jim nastavit jen barva písma (color) a barva pozadí (background-color). Uvnitř tagu <option> jsou ignorovány všechny html tagy.

Příklad viz u select.

textarea

Rozsáhlé vstupní pole (textarea = angl. prostor pro text). Zobrazuje rámeček s lištou.. Párový tag. Nemá atribut value, za implicitní hodnotu se považuje obsah elementu. Jinak řečeno, tag <textarea> obklopuje text, který se zpočátku zobrazí uvnitř </textarea>.

Atributy tagu <textarea>
Atribut	Význam	Hodnoty	Podpora
name	jméno odesílané s daty	jméno
cols	šířka pole ve znacích	číslo
rows	výška pole v řádcích	číslo
disabled	oblast bude šedá a nepůjde do ní psát (jen v některých prohlížečích, tehdy se neodesílá)	bez hodnoty
readonly	obsah pole nepůjde měnit	bez hodnoty
wrap	zalamování slov a řádků	hard, soft, off
autofocus	po načtení stránky se textarea sama aktivuje (HTML5	autofocus	neumí to IE8,což nevadí (prostě se to nefocusne)
placeholder	textová nápověda k poli (HTML5)	text	v IE 9 nefunguje
form	možnost přidání do formuláře, jehož není prvkem (HTML5)	čárkami oddělená id formulářů	neumí to IE9, takže na to nelze spolehnout, což je u formuláře fatální!
required	pole je požadováno (HTML5)	required	doporučuji nepoužívat (viz níže)
maxlength	maximální počet znaků	číslo	neumí to IE9

Textarea ve staré verzi HTML 4 neměla žádnou obdobu atributu maxlength pro maximální počet znaků, jako je tomu u tagu <input type="text">. V HTML 5 maxlength je, ale prohlížeče to ještě nepodporují plně (neumí to Explorer a Opera, stav 2012). Má-li být počet znaků omezený, je potřeba to složitěji skriptovat javascriptem (přes .value.length).

Atribut required s hodnotou required znamená, že prohlížeč zabrání odeslání, pokud pole nebude vyplněno. Bez vyplnění textarey prostě formulář nepůjde odeslat. Nové v HTML5, nepodporováno v Exploreru. Varuji před použitím, protože ještě pár let nebude jisté, co přesně s tím prohlížeč udělá. Například se může stát, že uživatel uvidí chybové hlášení v pro něj nesrozumitelném jazyce (totiž v jazyce operačního systému nebo jazyce prohlížeče). Řešení je jedině napsat si vlastní chybové hlášení javascriptem, hledejte klíčová slova oninvalid a setCustomValidity.

Hůře podporované atributy doporučuji zatím nepoužívat (2012), případně je nasadit pouze do intranetů, kde máte kontrolu nad používaným prohlížečem. Zvláště atribut form je v intranetech velmi užitečný.

Tag <textarea>, atribut wrap
wrap=	Význam
soft	řádky se smějí zalomit jenom v místě mezery. V praxi se zalamují i uprostřed slova, přesahuje-li slovo celý řádek. Odesílá se tak, jak je zapsáno.
hard	řádky se zalamují v místě mezery nebo kdekoliv v příliš dlouhém slově. Pokud se ale zalomí, je tento řádkový zlom také odeslán na server jako konec řádku.
off	řádek se nezalamuje vůbec nikde (Interet Explorer), popř. jen na konci slov (Mozilla). Objevuje se vodorovný scrollbar. Odesílá se tak, jak je zapsáno.

Prohlížeče mají jako výchozí hodnotu atributu wrap nastaveno "soft". Existují ještě starší hodnoty wrap: physical (odpovídá hard) a virtual (odpovídá soft), ale jejich podporu jsem netestoval.

Příklad na textaera:
<textarea name="promenna" cols="40" rows="3"> Text, který bude v textovém poli předvyplněný </textarea>

Text, který bude v textovém poli předvyplněný

Následující tagy do HTML přibyly až ve verzi 4.0. Jejich implementace už nyní (2009) fungují v prohlížečích perfektně, ale z historických důvodů je držím na konci této stránky.

label

Štítek, popisek pole. Vyskytuje se nejlépe před políčkem, ke kterému se vztahuje, aby to i v prohlížečích, které label nepodporují, dávalo smysl. Výhodou je aktivace pole formuláře, pokud se klikne na štítek, a lepší automatizace (accesskey, css). Vlastní text štítku se zadává jako obsah elementu -- jde o tag párový.

Atribut tagu <label>
Atribut	Význam	Hodnoty
for	svázání s polem stejného identifikátoru	hodnota atributu id u svázaného pole

Příklad: <label for="drak">Zadej jméno draka:</label> <input type="text" id="drak">

Zadej jméno draka:

fieldset

Skupina polí. Párový tag, který opticky sdruží několik prvků formuláře a vykreslí kolem nich slabý rámeček. Čáru rámečku může přerušit text tagu <legend>. <fieldset> nemá žádné atributy kromě obecných. Vzhled se dá upravovat pomocí CSS. Výchozí stylování je obvykle padding: 5.6px; border: 2px groove black, což vede k vykreslení jemného jednopixelového rámečku. Příklad vidíte níže u tagu legend.

legend

Popisek skupiny polí (tagu <fieldset>). Zobrazuje se nad skupinou polí přes horní čáru fieldsetu. Musí být zapsána hned za značkou <fieldset>. Obsahem tagu <legend> může být libovolné HTML (rozumné).

Atribut tagu <legend>
Atribut	Význam	Hodnoty
align	zarovnání popisku	left \| right \| center

Příklad:
<fieldset> <legend>Milá zvířátka</legend> Kočičky: <input name="kocky"><br> Dráčci: <input name="draci"> </fieldset>

Milá zvířátka Kočičky:
Dráčci:

optgroup

Skupina voleb ve výběrovém prvku <select>. Párový tag, kterým se obklopí skupinky tagů <option>. V šestkových verzích prohlížečů se potom takové skupinky zobrazí odsazené a budou mít nadpis tučnou kurzívou. Ten nadpis se zadává jako atribut label tagu <optgroup>. Pětkové a nižší verze prohlížečů tento tag ignorují a zobrazují volby normálně pod sebou.

Příklad:
<select size="3"> <optgroup label="nadpis skupinky"> <option>první</option> <option>druhá</option> </optgroup> </select>

button

Tlačítko. Jedinou a hlavní výhodou buttonu oproti tagu <input> je, že se do něj dá vložit libovolný HTML kód, který se na tlačítku zobrazí. Takže se mezi <button> a </button> dají vkládat obrázky, nadpisy, prostě cokoliv. Je to prostě tag párový.

Příklad:
<button name="cokoliv" value="cokoliv">tlačítko s <b>tučným textem</b></button>

Atributy tagu <button>
Atribut	Význam	Hodnoty
type	druh vstupního pole	submit \| reset \| button
name	jméno pole, které se odesílá s daty	libovolné jméno
value	hodnota, která by se měla odesílat (nefunguje v Exploreru, ten odesílá obsah tagu)	libovolná hodnota

V praxi se button chová hodně podobně jako <input> se stejným type.

Při odesílání formuláře by se normálně měly spárovat hodnoty name a value. Implementace tagu button v Internet Exploreru ale obsahuje chybu, kdy se namísto value odesílá text z obsahu buttonu (tedy to, co je vidět na tlačítku, přesněji řečeno vlastnost innerText). Kvůli této chybě se ale button v praxi moc nepoužívá.

Tag <button>, atribut type
type=	Význam
submit	odeslání formuláře
reset	vymazání formuláře
button	nic nedělá, pokud na něj není navázán skript (nejčastěji přes onclick)

Důležitý atribut type, podobný atributu type u tagu <input>. Nastavení type="submit" způsobí, že tlačítko bude odesílat formulář. Výchozí hodnota atributu type (tedy když se type nezadá) je submit (odesílací tlačítko formuláře), ale Explorer chápe výchozí hodnotu type jako button. V praxi tedy vždycky, když chcete použít button, musíte type zadat, jinak se to bude v každém prohlížeči chovat jinak.

Úplně nejlepší je asi <button> pokud možno nepoužívat a zůstat u <input>.

Níže budu sypat tagy patřící až do HTML5. V roce 2017 už je podpora slušná, ale část textu vznikala v roce 2012, kdy leccos ještě nebylo podporováno.

datalist

Našeptávací datová struktura svázaná s nějakým tagem input. Umožní uživateli vybrat z několika hodnot, které jsou vypsané v datalistu. Chování tohoto inputu v prohlížeči je potom podobné jako v případě autocomplete nebo různých našeptávačů. Vzdáleně se podobá chování tagu <select>.

Atribut tagu datalist
Atribut	Význam
id	Identifikátor datalistu. Tento identifikáto pak může být použit v atributu list tagu <input>.

Příklad:
<input type="text" list="ovoce"> <datalist id="ovoce"> <option value="jablko"> <option value="hruška"> <option value="meruňka"> </datalist>

Z příkladu je vidět, že struktura tagu <datalist> je podobná tagu <select> s tím rozdílem, že datalist na stránce sám nic nedělá a nic neodesílá. Aby se datalist vůbec nějak projevil, musí být svázán s nějakým imputem pomocí identifikátoru a atributu list.

Datalist je součást HTML5 a už je plně podporován. V případě velmi starých prohlížečů uživatelé prostě do input políčka hodnotu vyplní. Prohlížeče se velmi liší v tom, jak se chovají. Edge nabídne všechny hodnoty (tam se to tedy podobá selectu), Firefox a Chrome nabídnou pouze hodnoty začínající stejným písmenkem (tam se to tedy podobá našeptávačům). Chrome navíc ukáže černou šipku podobnou selectu.

Ačkoli o datalistu píšu trochu jako o našeptávači, v praxi jím jde našeptávat jenom relativně omezenou množinu hodnot (hádám, že maximálně pár set). Skutečné našeptávače, například ve vyhledávačích, pracují na základě asynchronní javascriptové komunikace se serverem (většinou přes json).

output

Předem varuji, že output je fakt ptákovina. Output je formulářové pole, které se používá pouze k zobrazení výstpu skriptu, konkrétně javascriptu. Má hodnotu value, ale jinak než javascriptem ji nelze naplnit.

Minimální příklad vypadá třeba takhle:

Veškerý javascriptový výpočet (v tomto případě jenom přiřazení hodnoty) se skrývá v tom zápisu oninput="...". Může tam být i onchange, cokoliv. Důležité je, aby output měl svoje name, které se použije ve skriptu.

Kdyby se v příkladu místo <output> použil tag <input>, dopadne to úplně stejně, pouze výsledek bude orámován (lze zrušit CSS stylem).

Internet Explorer ani ve verzi 11 (září 2015) output nepodporuje, takže doporučuji output nepoužívat (a nejen kvůli tomu).

Reklama

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