Jaké druhy input prvků existují v HTML?

Existují následující typy prvků input:

• text: Jednořádkové textové pole.
• password: Pole pro zadání hesla, znaky jsou skryté.
• submit: Tlačítko pro odeslání formuláře.
• reset: Tlačítko pro resetování formuláře.
• radio: Přepínač (jeden z mnoha).
• checkbox: Zaškrtávací políčko (jedno nebo více z mnoha).
• button: Obvyklé tlačítko.
• file: Pole pro výběr souboru.
• hidden: Skryté pole, neviditelné uživateli, ale odesílané s formulářem.
• image: Tlačítko-obrácení pro odeslání formuláře.

Specifikace HTML5 přidala nové typy:

• email: Pole pro zadání emailové adresy.
• url: Pole pro zadání URL adresy.
• number: Pole pro zadání čísla.
• range: Posuvník pro výběr číselné hodnoty v daném rozsahu.
• date: Pole pro výběr data.
• month: Pole pro výběr měsíce a roku.
• week: Pole pro výběr týdne a roku.
• time: Pole pro výběr času.
• datetime-local: Pole pro výběr data a času bez časového pásma.
• search: Pole pro hledání.
• color: Pole pro výběr barvy.
• tel: Pole pro zadání telefonního čísla.

Příklad použití:

<!-- Jednořádkové textové pole -->
<input type="text" placeholder="Jméno">

<!-- Pole pro zadání hesla -->
<input type="password" placeholder="Heslo">

<!-- Tlačítko pro odeslání formuláře -->
<input type="submit" value="Odeslat">

<!-- Tlačítko pro resetování formuláře -->
<input type="reset" value="Resetovat">

<!-- Přepínače -->
<input type="radio" name="pohlavi" value="muz"> Mužský
<input type="radio" name="pohlavi" value="zena"> Ženský

<!-- Zaškrtávací políčka -->
<input type="checkbox" name="zajmy" value="hudba"> Hudba
<input type="checkbox" name="zajmy" value="sport"> Sport

<!-- Obvyklé tlačítko -->
<input type="button" value="Klikni na mě">

<!-- Pole pro výběr souboru -->
<input type="file">

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

<!-- Tlačítko-obrácení -->
<input type="image" src="submit.png" alt="Odeslat">

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

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

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

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

<!-- Pole pro datum -->
<input type="date">

<!-- Pole pro měsíc -->
<input type="month">

<!-- Pole pro týden -->
<input type="week">

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

<!-- Pole pro datum a čas (lokální) -->
<input type="datetime-local">

<!-- Pole pro hledání -->
<input type="search" placeholder="Hledat">

<!-- Pole pro výběr barvy -->
<input type="color">

<!-- Pole pro telefonní číslo -->
<input type="tel" placeholder="+420 (xxx) xxx-xx-xx">