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>

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">

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:

<form >
<input type="range" oninput="vystup.value=this.value">
<output name="vystup"></output>
</form>

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ě
o tvorbě, údržbě a zlepšování internetových stránek

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

HTML tagy Abecedně Příklady HTML tahák

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