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 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  
search, number, email, url, range, 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 různé další 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. 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.

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

 

 

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.