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á pro automatické vyplňování formulářů.

Podrobný popis, návod příklady jsem z důvodu rozsahu přenesl do samostatného textu o autocomplete a autofill.

Příklad na autocomplete:

I když máte ve jménech inputů kvůli dalšímu zpracování serverem nějaké divné řetězce, vždycky je možnost, jak prohlížeči říct, co tam má vyplnit. V tomto případě vyplňuje email, protože autocomplete="email" je konkrétní vyvolená hodnota ze specifikace, která říká, že se bude vyplňovat email. Další hodnoty ze specifikace, povídání a příklady mám na té stránce o autocomplete.

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