Kādi ir HTML input elementu veidi?

Ir šādi input elementu veidi:

• text: Vienas rindiņas teksta lauks.
• password: Paroles lauks, simboli ir paslēpti.
• submit: Poga formas nosūtīšanai.
• reset: Poga formas atiestatīšanai.
• radio: Pārslēdzējs (viens no daudzajiem).
• checkbox: Atzīmēšanas rūtiņa (viens vai vairāki no daudzajiem).
• button: Parasta poga.
• file: Faila izvēles lauks.
• hidden: Paslēpts lauks, kas nav redzams lietotājam, bet tiek nosūtīts kopā ar formu.
• image: Attēla poga formas nosūtīšanai.

HTML5 specifikācija pievienoja jaunus tipus:

• email: E-pasta adreses ievade.
• url: URL adreses ievade.
• number: Skaitļa ievade.
• range: Slīdnis skaitliskās vērtības izvēlei noteiktā diapazonā.
• date: Datuma izvēle.
• month: Mēneša un gada izvēle.
• week: Nedēļas un gada izvēle.
• time: Laika izvēle.
• datetime-local: Datuma un laika izvēle bez laika zonas.
• search: Meklēšanas lauks.
• color: Krāsas izvēle.
• tel: Tālruņa numura ievade.

Piemērs:

<!-- Vienas rindiņas teksta lauks -->
<input type="text" placeholder="Vārds">

<!-- Paroles ievades lauks -->
<input type="password" placeholder="Parole">

<!-- Formas nosūtīšanas poga -->
<input type="submit" value="Nosūtīt">

<!-- Formas atiestatīšanas poga -->
<input type="reset" value="Atjaunot">

<!-- Pārslēdzēji -->
<input type="radio" name="dzimums" value="vīrietis"> Vīrietis
<input type="radio" name="dzimums" value="sieviete"> Sieviete

<!-- Atzīmēšanas rūtiņas -->
<input type="checkbox" name="intereses" value="mūzika"> Mūzika
<input type="checkbox" name="intereses" value="sports"> Sports

<!-- Parasta poga -->
<input type="button" value="Noklikšķini uz mani">

<!-- Faila izvēles lauks -->
<input type="file">

<!-- Slēpts lauks -->
<input type="hidden" name="userId" value="123">

<!-- Attēla poga -->
<input type="image" src="submit.png" alt="Nosūtīt">

<!-- E-pasta lauks -->
<input type="email" placeholder="E-pasts">

<!-- URL lauks -->
<input type="url" placeholder="Tīmekļa vietne">

<!-- Skaitļa lauks -->
<input type="number" min="1" max="10">

<!-- Slīdnis -->
<input type="range" min="0" max="100">

<!-- Datuma lauks -->
<input type="date">

<!-- Mēneša izvēle -->
<input type="month">

<!-- Nedēļas izvēle -->
<input type="week">

<!-- Laika izvēle -->
<input type="time">

<!-- Datuma un laika (vietējais) -->
<input type="datetime-local">

<!-- Meklēšanas lauks -->
<input type="search" placeholder="Meklēt">

<!-- Krāsas izvēle -->
<input type="color">

<!-- Tālruņa numura lauks -->
<input type="tel" placeholder="+371 (xxx) xxx-xx-xx">