Input

Atribut type

Element <input> je hodně specifický tím, že může nabývat mnoha podob, které stanoví atribut type.

Následuje abecední seznam možných variant.

HTML kódVýsledekVýznamPodpora
<input type="button">

Tlačítko bez další akce, je v podstatě nutné uvést text tlačítka do atributu value, jinak se nic moc neobjeví.

Vše

<input type="checkbox">

Zaškrtávací pole. Kvůli malým rozměrům je vhodné používat značku <label>. Zaškrtnutí se zapíná atributem checked.

Vše

<input type="color">

Výběr barvy v hexa zápisu.

Opera, Chrome, Firefox 29

<input type="date">

Výběr kalendářních dat (dny, měsíce, roky).

Opera, Chrome

<input type="datetime">

Výběr kalendářních dat i času (dny, měsíce, roky, hodiny a minuty).

Opera

<input type="datetime-local">

Výběr kalendářních dat i času (dny, měsíce, roky, hodiny a minuty) bez časového pásma.

Opera, Chrome

<input type="email">

Zadávání e-mailové adresy. Užitečné jsou selektory :valid a :invalid, které mohou přestylovat políčko v závislosti na platném e-mailu. Zadání více e-mailů by měl zajistit atribut multiple.

IE 10

<input type="file">

Políčko pro nahrávání souborů.

  • Atributem file lze omezit typ souborů, které je možné nahrát.
  • Atribut multiple umožní nahrát víc souborů.

Vše

<input type="hidden">

Skryté pole, které se ale při odeslání dostane na server.

Vše

<input type="image">

Obrázkové odesílací tlačítko, cíl obrázku se zadává do src, rozměry do width a height a popisek do altu.

Vše

<input type="month">

Výběr samotného měsíce.

Opera, Chrome

<input type="number">

Výběr čísla. V podporovaných prohlížečích je možné číslo zvyšovat/snižovat šipkami. O kolik se má zvyšovat/snižovat určuje atribut step.

Opera, Chrome, Firefox 29

<input type="password">

Pole pro zadávání hesel, místo znaků se zobrazují puntíky/tečky/hvězdičky.

Vše

<input type="radio">

Radio přepínače. Na rozdíl od checkboxu lze vytvořit kolekci (se stejným atributem name), ze které lze vybrat jen jednu možnost. Předvybrat políčko umí rovněž atribut checked.

Vše

<input type="range">

Výběr čísla z rozsahu. Hodnotu určí atribut value. Maximální hodnota se nastaví atributem max, minimální zase min. O kolik se dá posouvat určuje atribut step.

JS řešení funkční i ve starších prohlížečích.

IE 10

<input type="reset">

Resetuje celý formulář na původní hodnoty. Resetovat jen něco může JavaScript.

Vše

<input type="submit">

Tlačítko pro odeslání formuláře, mívá výchozí popisek „Odeslat“.

Vše

<input type="tel">

Zadávání telefonního čísla. Užitečné jsou (jako u e-mailu) selektory :valid a :invalid, které mohou přestylovat políčko v závislosti na platnosti.

IE 10

<input type="text">

Běžný text (výchozí typ, tj. vytvoří se i bez uvedení type).

Vše

<input type="time">

Výběr samotného času.

Opera, Chrome

<input type="url">

Výběr URL stránky. Opět je možné použít selektory :valid a :invalid.

IE 10

<input type="week">

Zadávání samotného týdne.

Opera, Chrome, Firefox

Obecné atributy

Kromě atributů, které fungují snad úplně všude, jako id, class a title, existují i obecné atributy pro <input>y:

name
Jméno políčka, podle kterého se dá následně zpracovávat na serveru.
value
Výchozí hodnota políčka (někdy také popis tlačítka).
checked
Zaškrtne checkbox nebo radio ihned po načtení stránky.
list
Připojení našeptávání značkou <datalist>.
inputmode
Využití se najde hlavně u dotykových zařízení se SW klávesnicí. Atribut inputmode by měl umět přepnout typ klávesnice, která se u daného pole objeví.
autofocus
Po načtení stránky dá políčku rovnou focus (ukázka).
placeholder
Předvyplní políčko hodnotou, která po aktivování zmizí. Zároveň se nebude odesílat na server (ukázka). Detailní popis atributu placehodler je na samostatné stránce.
autocomplete
Některé prohlížeče si pamatují vyplněná data a umí je později nabízet. Hodnota on napovídání zapne, hodnota off vypne.
spellcheck
Zapne nebo vypne kontrolu pravopisu (ukázka).

Ověřování a omezení hodnot

Pro ověřování a omezování hodnot existují od HTML 5 bohatší nástroje. Užitečné je i rozšíření CSS o selektory :valid/:invalid, které mohou přímo špatně vyplněné pole zaměřit.

Jelikož všechny tyto kontroly nefungují ve starých prohlížečích a není problém je obejít, je nutné kontrolovat vždy na serveru.

maxlength
Maximální počet znaků, co lze do políčka napsat.
pattern
Atribut pattern umožňuje zadat regulární výraz, kterému musí obsah vyhovovat.
required
Pole musí být vyplněno.
min
Minimální možná hodnota. Lze použít u čísel a kalendářních dat. Hodnota min musí být nižší než max.
max
Maximální možná hodnota. Hodnota musí být vyšší než min.
readonly
Pole je jen ke čtení, nelze mu měnit jeho obsah.
step
Krok, kterým lze zvyšovat/snižovat hodnotu. Funguje u čísla a rozsahu.
disabled
Políčko je úplně zablokované. Nejde na něm vyvolat onclick a neodešle se na server (pokud není hidden).

Atributy nastavení formuláře

Zajímavým prvkem je možnost přenastavovat věci, co normálně řeší značka <form>. Nebo dokonce z posice <input>u určit, do jakého formuláře bude patřit.

form
Umožňí <input> přiřadit do formuláře, aniž by se nacházel v <form>. Jako hodnota se zadává atribut id cílového formuláře.
<form id="idecko">
</form>
<input form="idecko">
formaction
Přepíše <form action>. Má význam jen u odesílacích tlačítek (submit, image).
formenctype
Obdobně přepíše atribut enctype.
formmethod
Přepíše/nastaví metodu (na GET nebo POST), kterou se formulář odešle (method).
formtarget
Přepíše/nastaví rám, do kterého se formulář odešle (target).
formnovalidate
Přepíše/nastaví validaci formuláře (novalidate).

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Reset políčka pro nahrávání souboru

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

Napodívání přes <datalist>

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

HTML tlačítko <button>

Značka <button>

Tlačítko <button> v HTML, možné problémy v Internet Exploreru a jak je vyřešit.

Komentáře