Aké typy input prvkov existujú v HTML?

Existujú nasledujúce typy prvkov input:

• text: Jedno riadkové textové pole.
• password: Pole na zadanie hesla, znaky sú skryté.
• submit: Tlačidlo na odoslanie formulára.
• reset: Tlačidlo na resetovanie formulára.
• radio: Prepínač (jeden z mnohých).
• checkbox: Zaškrtávacie políčko (jeden alebo viac z mnohých).
• button: Bežné tlačidlo.
• file: Pole na výber súboru.
• hidden: Skryté pole, neviditeľné používateľovi, ale odosielané s formulárom.
• image: Tlačidlo-obrázok na odoslanie formulára.

Špecifikácia HTML5 pridala nové typy:

• email: Pole na zadanie emailovej adresy.
• url: Pole na zadanie URL adresy.
• number: Pole na zadanie čísla.
• range: Posuvník na výber číselnej hodnoty v zadanom rozsahu.
• date: Pole na výber dátumu.
• month: Pole na výber mesiaca a roka.
• week: Pole na výber týždňa a roka.
• time: Pole na výber času.
• datetime-local: Pole na výber dátumu a času bez časového pásma.
• search: Pole na vyhľadávanie.
• color: Pole na výber farby.
• tel: Pole na zadanie telefónneho čísla.

Príklad použitia:

<!-- Jedno riadkové textové pole -->
<input type="text" placeholder="Meno">

<!-- Pole na zadanie hesla -->
<input type="password" placeholder="Heslo">

<!-- Tlačidlo na odoslanie formulára -->
<input type="submit" value="Odoslať">

<!-- Tlačidlo na resetovanie formulára -->
<input type="reset" value="Resetovať">

<!-- Prepínače -->
<input type="radio" name="pohlavie" value="muž"> Mužský
<input type="radio" name="pohlavie" value="žena"> Ženský

<!-- Zaškrtávacie políčka -->
<input type="checkbox" name="záujmy" value="hudba"> Hudba
<input type="checkbox" name="záujmy" value="šport"> Šport

<!-- Bežné tlačidlo -->
<input type="button" value="Klikni na mňa">

<!-- Pole na výber súboru -->
<input type="file">

<!-- Skryté pole -->
<input type="hidden" name="userId" value="123">

<!-- Tlačidlo-obrázok -->
<input type="image" src="submit.png" alt="Odoslať">

<!-- Pole pre email -->
<input type="email" placeholder="Email">

<!-- Pole pre URL -->
<input type="url" placeholder="Webová stránka">

<!-- Pole pre číslo -->
<input type="number" min="1" max="10">

<!-- Posuvník -->
<input type="range" min="0" max="100">

<!-- Pole pre dátum -->
<input type="date">

<!-- Pole pre mesiac -->
<input type="month">

<!-- Pole pre týždeň -->
<input type="week">

<!-- Pole pre čas -->
<input type="time">

<!-- Pole pre dátum a čas (lokálne) -->
<input type="datetime-local">

<!-- Pole pre vyhľadávanie -->
<input type="search" placeholder="Hľadať">

<!-- Pole pre výber farby -->
<input type="color">

<!-- Pole pre telefónne číslo -->
<input type="tel" placeholder="+421 (xxx) xxx-xx-xx">