HTML značka <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.

<input type="button">

<input type="checkbox">

<input type="color">

<input type="date">

<input type="datetime">

<input type="datetime-local">

<input type="email">

<input type="file">

<input type="hidden">

<input type="image">

<input type="month">

<input type="number">

<input type="password">

<input type="radio">

<input type="range">

<input type="reset">

<input type="search">

<input type="submit">

<input type="tel">

<input type="text">

<input type="time">

<input type="url">

<input type="week">

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

• Monica Dinosaurescu: <input> I ♡ you, but you're bringing me down – historický vývoj formulářových prvků