HTML tag INPUT

Popis HTML tagu input byl původně součástí textů o formulářích. Protože je ale input velmi složitý tag, který může získávat mnoho rolí, přenesl jsem ho do tohoto samotného textu.

input

Vstupní pole. Nepárový tag.

Obecné atributy tagu <input>
Atribut	Význam	Hodnoty
type	druh vstupního pole, viz níže	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, výchozí hodnota prvku
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
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 <Formuláře na webu, úvod>
align	zarovnání (jako u obrázku)	right, left + těch dalších x možností (zastaralé)
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
range	šoupátko od do, výstup je číslo	min = minimální hodnota max = maximální hodnota
search, number, email, url, color, date, datetime, datetime-local, month, week, time, tel	textové pole s různým ovládáním; zejména se liší ovládání na mobilních telefonech, které nabízejí různé dotykové klávesnice	různé další atributy, podívejte se na ně na mé testovací stránce na input v HTML 5

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. Od roku 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.

Příjemné je, že pokud je starší prohlížeče nerozpoznají, chovají se k inputu, jako kdyby byl type="text", což pro následné zpracování formuláře nevadí.
Naopak vadí, že podporující prohlížeče mohou bránit odeslání formuláře, ale neřeknou uživateli proč, nebo mu to řeknou v cizím jazyce, což je dost šílená situace (zatím pouze u type="email"). Z toho důvodu nedoporučuji nové atributy type z HTML 5 zatím používat bez řádného otestování.

Zásadní význam 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 výchozí hodnota, takže když se u inputu type vůbec nezadá, funguje to stejně jako type="text".

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.
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í.
autocomplete	automatické doplňování známých hodnot uživatele	on \| off \| další konvenčně domluvené hodnoty určující, jaký typ informace se v inputu očekává

Maxlength

Č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.

Placeholder

Placeholder znamená anglicky "zabírač místa". Ve formulářových polích se jeho hodnota zobrazí šedým písmem. Pokud zůstane políčko nevyplněné, šedá hodnota atributu placeholder se neodesílá, protože políčko je formálně prázdné. To je hlavní rozdíl mezi atributy placeholder a value. Value se odesílá, i když ji uživatel nezmění, to je prostě hodnota pole. Hodnota placeholder se obvyke používá pro lepší pochopení, co se má do pole vyplňovat. Při vyplňování šedý placeholder zmizí.

Pozor, placeholder je dobrý kumpán, ale špatný samotář. Když placeholder použijete jako jediný popisek formulářového pole, může se stát, že ho uživatel vůbec neuvidí. Ne snad kvůli špatné podpoře v prohlížeči, ta už je velmi dobrá. Důvod, proč uživatel placeholder nikdy nemusí vidět, je autocomplete. Může se stát, že prohlížeč políčko převyplní, ještě než se k němu uživatel dostane. To nezní jako problém, ale problém to je, když ho prohlížeč vyplní špatně. Například políčko pro jméno ulice může prohlížeč chybně vyplnit celou adresou. Takže to velký problém je a běda tomu, kdo nepoužívá textové popisky u formulářů! (Ideálně ještě s tagem label.)

Autocomplete

Atribut autocomplete se používá se pro automatické vyplňování formulářů. Přijde mi velmi důležitý a málo známý. Kromě input type="text", u kterého je nejčastější, se dá použít i u většiny jiných typů inputu a u tagu textarea. Budu i hodně psát o atributu name, se kterým autocomplete historicky souvisí.

Pokud jsem to správně pochopil, automatické hodnoty ve formuláři mají dva režimy, které jsem si pojmenoval hádání a vyplňování:

hádání údajů se provádí na základě toho, co prohlížeč v minulosti viděl, že uživatel do stejně pojmenovaných polí vyplňuje na jiných webech (anglicky autofill expectation mantle, tedy že se autofill oblékne do "pláště očekávání")
vyplňování se bere podle uživatelského nastavení z prohlížeče a systému, které si uživatel mohl předem vyplnit v prohlížeči. Doplňuje se i z kontaktů, apod. (anglicky autofill anchor mantle, tedy autofil nosí "plášť ukotvení")

Krom toho existuje ještě třetí režim pro vyplňování uživatelských jmen a hesel, tam je u autocomplete zcela jiná logika.

Režim hádání

Jak funguje autocomplete v režimu hádání v normálních případech: prohlížeč si v minulosti při odesílání ukládal hodnoty, které u tohoto uživatele viděl, a páruje si je k name (možná i id) vyplněného políčka. Uvidí-li v budoucnu ve formuláři input se stejným name, nabídne uživateli možnost vyplnit input již známou hodnotu. Proto je dobrý nápad používat v atributech name (nebo id) nějaké rozumné hodnoty, typicky krátká anglická slova -- častěji pak při hádání nastane shoda. Ideální je v atributech name používat standardní hodnoty (zmíním níže).

Zatím pořád píšu o atributu name. Podle něj prohlížeče historicky doplňování začalo dělat, protože to dává smysl. Atribut autocomplete pak vzniknul ze zřejmé potřeby používat nějaké úplně jiné hodnoty atributů name (typicky pro potřeby aplikací). Aby se mohly doplňovat automatické hodnoty i do inputů, které mají divně nebo šíleně vyplněné name, vzniknul atribut autocomplete.

Pár příkladů

Tohle je špatně, protože se nic automaticky nedoplní:

Zadejte email: <input name="nejaka_blbost">

Lepší by bylo mít tam třeba hodnotu "mail", protože je šance, že do takového políčka už uživatel v minulosti mailovou adresu vyplňoval. Na to je dobrý režim hádání, že se tyhle věci občas podaří:

Zadejte email: <input name="mail">

Ideální by bylo změnit atributu name na hodnotu "email", protože "email" je standardní hodnota atributu autocomplete pro mailovou adresu. Pak bude správně vyplněná jak hádáním, tak i v režimu vyplňování:

Zadejte email: <input name="email">

Ale ne vžcky lze name změnit, protože někdy nelze upravit aplikaci, která name následně zpracovává. Pak je nutné name nechat blbé. Může se ale doplnit autocomplete:

Zadejte email: <input name="nejaka_blbost" autocomplete="email">

A přesně tohle vám doporučuji udělat. Místo přepisování name doporučuji doplnit hodnoty autocomplete do svých formulářů. A ideálně tak, aby krom hádání fungovaly i v režimu vyplňování.

Myslím, že je zřejmé, co je na režimu hádání blbé. Ne vždycky funguje správně. Někdy do inputu na jméno vyplní celé jméno, jindy jenom křestní. Telefonní číslo se vyplní s předvolbou, i když jej formulář vyžaduje bez předvolby. A tak dále. Před příchodem na to autoři webů reagovali tak, že automatické doplňování vypínali zvláštní hodnotou autocomplete="off". To vypíná režim hádání.

Speciální hodnota autocomplete="off" zabrání tomu, aby se políčko hádalo nějakou dříve zadanou hodnotou v nějaké jiné stránce (shoda se hádá podle shody atributu name a právě tohle hádání off vypne; také vypne, aby se zadaná hodnota do prohlížeče ukládala). Prohlížeče autocomplete="off" ignorují ve dvou případech: 1) identifikované jméno a heslo - vyplňuje je přes svůj správce hesel, i když je autocomplete="off". 2) Prohlížeče také autocomplete="off" ignorují, pokud uživatel zvolil automatické vyplnění formuláře - vypíná tedy jenom režim hádání. (Proto se někdy pro vypínání autocomplete také zneužívá hodnota new-password. Je to hloupý workaround (nedělejte to), ale vidím to velmi často při registraci do bank. Bankám asi narozdíl od eshopů významně vadí i drobné chybky, které může autocomplete udělat při vyplňování.)

Lepší reakce na chyby hádání bylo zavedení i druhého režimu vyplňování, zavedení atributu autocomplete a jeho standardních hodnot.

Režim vyplňování a standardní hodnoty

Režim vyplňování (autofill anchor mantle) bere vyplňované hodnoty z nastavení prohlížeče a systému. Stejně jako v režimu hádání se také kromě atributu autocomplete používá i atribut name, ale tentokrát se standardními hodnotami. Výčet standardních hodnot autocomplete ve standardu HTML 5 obsahuje asi 50 různých typů informace.

Musím se přiznat, že úplně nevím, kde přesně se berou vyplňované hodnoty. Něco evidentně z nastavení prohlížeče (například Chrome: Nastavení > Automatické vypňování) něco se bere z operačního systému (na Safari například z telefonního kontaktu), něco ze systémového nastavení plateb kartou apod. Také mám pocit, že Chrome občas vyplňuje automaticky i podle jiných informací než jen podle name a autocomplete (např. podle type nebo okolních popisků).

Pokud uživatel při režimu vyplňování zvolí jedno políčko z formuláře, z nastavení prohlížeče se doplní všechna políčka, která mají shodu s atributem name nebo autocomplete. Očkává se totiž, že potvrzením hodnoty uživatel zvolil celý uživatelský profil. To naneštěstí často vede k chybám, pokud autor stránky autocomplete přesně nezná nebo si hodnoty name ve formuláři zvolil nestandardně, jak ho napadlo.

Hodnotou atributu autocomplete může být i více standardních hodnot oddělených čárkou. Uživateli se potom při vyplňování nabídne všechno, co souhlasí.

Standardní hodnoty autocomplete, pár příkladů
autocomplete=" "	Význam	Poznámka
name	celé jméno, křestní a příjmení dohromady včetně titulů	častá chyba je používat hodnotu name pro křestní jméno; naopak name="name" si právě křestní jméno vyžádá!
given-name	křestní jméno	nefunguje mi v atributu name
family-name	příjmení	nefunguje mi v atributu name
nickname	přezdívka	v Chrome není nickname jak předvyplnit
email	emailová adresa
street-address	celá adresa = ulice a číslo popisné	v případě, že chcete celou adresu v jednom poli, může se na to namísto input hodit tag textarea. Street-address je sjednocením addres-line*.
address-line1	první řádek adresy
addres-line2	druhý řádek adresy	ještě existuje address-line3
address-level1	kanton, stát v USA	stát ve federaci
address-level2	město	city funtuje taky (testováno v Chrome)
postal-code	poštovní směrovací číslo, ZIP kód	zip funguje taky (Chrome)
country	kód země	např. CZ, SK, US
contry-name	název země	např. Česko, Slovensko apod.
tel	celé telefonní číslo včetně předvolby	sjednocení tel-country-code a tel-national
tel-country-code	předvolba země začínající plusem	u nás např. +420, na Slovensku +421 apod.
tel-national	telefonní číslo bez předvolby
cc-*	hodnoty týkající se platebních karet
username	uživatelské jméno	uživatelská jména nemá ve správě autocomplete - to by byla chyba, protože na každém webu můžu mít uživatelské jméno jiné. Doplňuje je správce hesel.
current-password	současné (staré) heslo	jedině jako nápověda pro správce hesel, jiným způsobem to nemůže fungovat. Správce hesel by měl input vyplnit správně už jen na základě type="password"
new-password	nové heslo	nápověda pro prohlížeč, že toto pole nemá automaticky vyplňovat (například chybným starým heslem). Dost často se tohoto chování zneužívá pro vypínání autofillu místo autocomplete="off", které je ignorováno v režimu vyplňování. Některé prohlížeče pro new-password nabídnou vygenerování nového silného hesla (a uložení do prohlížečového správce hesel).
shipping	označuje, že jde o údaj, kam se mají věci doručit	typické použití je u adres a telefonů. Např. autocomplete="shipping street-address" označuje, že jde o adresu doručení.
billing	označuje údaj platícího nebo formálního příjemce, typicky při objednávce na firmu	např. autocomplete="billing organization" označuje, že jde o název firmy, která si to dá du účetnictví
home, work, mobile, fax, pager	hodnoty pro označení telefonů a emailů	např. autocomplete="tel home" naznačuje, že chce číslo domů
off	do pole se nebude nic doplňovat v režimu hádání	ale nechá zapnutý režim vyplňování a také vyplní jméno a heslo, pokud je zná
on	symbolická hodnota jako protipól off	nic to myslím nedělá
section-*	vlastní hodnoty pro případ nutnosti odlišení	např. section-ahoj. Po pravdě řečeno nevím, jak by to mohlo fungovat.
více hodnot oddělených čárkou		podle specifikace někdy výběr zužuje, jindy rozšiřuje. Mně to prakticky nefunguje.

Jak už jsem zmínil, podrobný rozpis všech hodnot je ve specifikaci. Tohle byly jenom příklady.

Krom standardních hodnot mohou mít prohlížeče další aliasy. U Chrome znám zip za postal-code (PSČ) a city za address-level2 (město).

Prohlížeč Chrome kromě atributů autocomplete a name scanuje i texty nacházející se před tagem input (počínaje začátkem <form> nebo předchozím <input>). Pokud v textech najde odpovídající retězce, které zná (např. "postal code", "post code" či "postalcode", ale ne "zip"), bude následující input vyplňovat (v tomto případě jako autocomplete "postal-code"). Pokud najde známých řetězců více, buďto si nevybere, nebo vybere něco podle docela složitého algoritmu, který jsem nedokázal odhalit. ("name" je křestní jméno, ale nesmí být kolem něj jiný text; příjmení jsem nijak nevydráždil; "email" pro email; "phone" pro telefon.) Je možné, že Chrome umí scanovat i jazykové verze, ale nějak se to asi musí nastavit, neumím to.

V atributu name stačí, když je standardní hodnota uvedena jako podřetězec hodnoty. Například name="XXBS-name" bude fungovat jako celé jméno, protože obsahuje řetěžec "name". Hodnota name="hojzipx" bude fungovat jako PSČ, protože obsahuje řetězec "zip".

Hodnota atributu autocomplete má přednost před hodnotami uvedenými v name. Pokud atribut autocomplete odpovídá nějaké standardní hodnotě, tak se hodnoty atributů name i předchozí texty před políčkem ignorují. Výjimka je, když autocomplete obsahuje dvě nebo více platných hodnot, které se navzájem vylučují (například zip a email). Pak se obě (všechny) ignorují a vypňuje se případně podle jiných informací. Ale pozor, některé hodnoty se navzájem nevylučují (např. "billing address-line1").

Do předvyplňování hesel jsem ještě úplně neproniknul.

Tolik k autocomplete. Jak z předchozího popisu tušíte, chová se to dost magicky.

Pokud potřebujete vyplňovat něco jiného nebo složitějšího, autocomplete v HTML stačit nebude. Pokud chcete vybírat z předem známé skupiny hodnot, použijte select. Pokud chcete známou skupinu hodnot napovídat, použijte fieldset. Na výběr datumů nebo barev jsou input type="date" nebo input type="color. Napovídání adres, jmen států nebo něčeho podobného, k čemu je potřeba mít data, řeší jedině složitější komponenty, typicky javascriptové, které si musíte napsat nebo někde stáhnout.

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

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ě.