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.

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

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

Vstupní pole. Nepárový tag. 

Obecné 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
disabled políčko bude šedé a nepůjde měnit
(jen v některých prohlížečích)
v IE se neodesílá
bez hodnoty
readonly obsah pole nepůjde měnit
(fachá jen v některých prohlížečích)
bez hodnoty
align zarovnání (jako u obrázku) right, left + těch dalších x možností (zastaralé)
placeholder předvyplněná hodnota, která při focusu může zmizet jakýkoli text
autofocus políčko bude mít automaticky kurzor bez hodnoty nebo libovolná hodnota
list připojení našeptávaných hodnot z datalistu id tagu <datalist>
Další atributy jsou přípustné na základě hodnoty atributu type. Mohou to být size, maxlength, checked, autocomplete, src a accept (vizte níže).

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 Další atributy
text obyčejné textové pole size= šířka ve znacích
maxlength = nejvyšší možný počet zadaných znaků, autocomplete = doplňování známých hodnot (popis níže)
password textové pole s hvězdičkami size= šířka ve znacích
maxlength- maximum znaků
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í) checked -- atribut bez hodnoty způsobí stisknutí puntíku
checkbox zatrhávací tlačítko checked -- atribut bez hodnoty (nebo s libovolnou hodnotou) způsobí zatržení. Pozor, zatrhne se i při hodnotě checked="false", přestože false je hodnota, kterou vrací javacript, pokud políčko zatržené není.
submit potvrzující tlačítko způsobující odeslání formuláře  
reset tlačítko na smazání všech polí (na přednastavenou hodnotu)  
image potvrzující tlačítko odesílající navíc souřadnice kliknutí (name.x a name.y (php je dostává jako name_x a name_y )) src= URL obrázku
(navíc nepoužitelné dynsrc, lowsrc jako u <img>)
file umožní zadat soubor accept = MIME typ nabízených souborů 
button tlačítko ovládané skriptovými atributy  

V HTML5 navíc přibývají hodnoty search, number, email, url, range, color, date, datetime, datetime-local, month, week, time a tel. Ve většině prohlížečů se stále chovají jako type="text" (viz níže). Svůj význam mají zejména v mobilních prohlížečích, kde uživateli nabídnou přizpůsobenou klávesnici.

V některých popisech HTML se vyskytují ještě typy scribble a jot, které ale podle mých zkušeností nikde nefungují. 

Příklady použití tagu input:
Obyčejné textové pole:
<input type="text" name="jmeno"> nebo <input name="jmeno">

Obyčejné textové pole dlouhé 10 znaků:
<input type="text" size="10" name="jmeno">

Textové pole s předvyplněnou hodnotou ahoj:
<input type="text" name="jmeno" value="ahoj">

Pole pro heslo:
<input type="password" name="heslo"> bude se hvězdičkovat, zkuste si.

Skryté pole pro předávání skrytých parametrů:
<input type="hidden" name="skryte" value="ahoj">

(nezobrazí se, ale je tam)

Tři přepínací tečky (radio buttony), první je vybraná:
<input type="radio" name="stejne_jmeno" value="první" checked="checked">
<input type="radio" name="stejne_jmeno" value="druhá">
<input type="radio" name="stejne_jmeno" value="třetí">

Zaškrtávací čtvereček (zaškrtnutý):
<input type="checkbox" name="ctverecek" checked="checked">

Odesílací tlačítko:
<input type="submit" value="Odeslat">

Zobrazit tento příklad ještě na samostatné stránce.

Input s type="reset" vypadá jako odesílací tlačítko, ale doporučuji vůbec nepoužívat, protože téměř nikdy není užitečný. Naopak uživatele často strašně naštve, protože je automaticky spojený se stisknutím klávesy escape -- každé zmáčknutí escape vymaže celý formulář.

Input v HTML 5

Další hodnoty parametru type u tagu <input> přináší HTML 5. V roce 2010 už fungují v některých prohlížečích (hlavně Chrome, případně Firefox). Jsou to hodnoty search, number, email, url, range, color, date, datetime, datetime-local, month, week, time a tel. Nějaké příklady a pokusy na typy u inputu v HTML5.

Zásadní výzmam mají hodnoty number, email, tel a url při použití stránky v mobilních telefonech. Tam prohlížeč nabídne jinou klávesnici, případně ji doplní o důležité znaky (například zavináč, tečka apod.).

<input type="text">

Ještě chci probrat další parametry, které se mohou zadat pro textové pole. Type="text" znamená, že půjde o obyčejné vstupní pole. Text je defaultní hodnota, takže když se type vůbec nezadá, funguje to stejně.

Další atributy tagu <input type="text">
atribut Význam Hodnoty
size délka pole obyčejné číslo, vyjadřuje počet znaků. Pro přesné zadání rozměru se lépe hodí css vlastnost width, která má vyšší prioritu.
maxlength maximální počet znaků

obyčejné číslo, více znaků prostě nejde zadat. Bývá zvykem dávat vyšší hodnotu, než má size.

autocomplete povolí nebo zakáže doplňování známých hodnot on | off
autofocus pole má kurzor hned po načtení stránky bez hodnoty nebo libovolná hodnota; je-li ve stránce více prvků s autofocus, dá se kurzor prvnímu z nich
placeholder šedý text uvnitř pole, který při prvním kliknutí zmizí text, který bude bude v políčku vidět, používá se hlavně jako popisek nebo nápověda. Po vložení kurzoru (IE) nebo začátku psaní (ostatní prohlížeče) text placeholderu zmizí.

Zajímavě funguje u textového inputu atribut autocomplete="off". Zabrání tomu, aby se políčko vyplnilo nějakou dříve zadanou hodnotou v nějaké jiné stránce (shoda se myslím určuje podle atributu name).

Častá chyba u maxlength: stává se mi, že prohodím na konci písmenka t a h, maxlenght je špatně, maxlength je dobře.

<input type="submit">

Odesílací tlačítko ve formuláři funguje tak, že po kliknutí na něj přejde prohlížeč na další stránku, která je definována v atributu action u nadřazeného tagu <form>. Zároveň se do té další stránky "přibalí" informace z jiných políček formuláře. (Metoda přibalení závisí na atributu method u form.)

Příklad:

<form action="dalsi.html">
<input type="submit" value="přejít na stránku dalsi.html">
</form>

Tento příklad zobrazí jen odesílací tlačítko. Uživatel po kliknutí přejde na stránku dalsi.html. Formulář s odesílacím políčkem tedy funguje velmi podobně jako normální odkaz = po kliknutí se přejde na stránku.

Další atributy tagu <input type="submit">
atribut Význam Hodnoty
formAction formulář změní po kliknutí action; odešle formulář na jinou stránku absolutní nebo relativní adresa jiné cílové stránky
formMethod umí změnit metodu odesílání formuláře get | post
formEnctype mění zakódování dat odesílaných z jiných polí application/x-www-form-urlencoded
multipart/form-data
text/plain
formNoValidate formulář se při odesílání nebude validovat bez hodnoty (nebo libovolná hodnota)

Atributy formAction a formEnctype se dají použít v nouzi. Občas je potřeba odeslat formulář na jinou stránku, zejména v situaci, kdy chci mít ve formuláři druhé odesílací tlačítko s jinou funkcí. Funkci formEnctype jsem nikdy nepoužil, ale může se hodit hlavně v případě, že se uploadují soubory (hodnota multipart/form-data). Je to stejné jako u tagu <form>.

Atribut formnovalidate se hodí zejména v situaci, kdy chcete používat pokročilá formulářové pole (zejména email), ale nechcete uživatele nutit ho zadávat správně.

Příklad:

<form action="cilova.php">
E-mail: <input type="email" name="mail">
<input type="submit" formnovalidate value="Odeslat bez validace">
</form>

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. Jejich podpora je v roce 2012 ještě slabá, ale občas už se hodí.

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čů a 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 není ještě plně podporován (konkrétně chybí podpora v IE9). Naštěstí to tolik nevadí. Uživatelé IE 9 a starších IE prostě do input políčka hodnotu vyplní. Prohlížeče se velmi liší v tom, jak se chovají. Opera 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).

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, 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í

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

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