Koje vrste input elemenata postoje u HTML-u?

Postoje sledeće vrste input elemenata:

• text: Jednolinijsko tekstualno polje.
• password: Polje za unos lozinke, simboli su skriveni.
• submit: Dugme za slanje obrasca.
• reset: Dugme za resetovanje obrasca.
• radio: Prekidač (jedan od mnogih).
• checkbox: Čekboks (jedan ili više od mnogih).
• button: Obično dugme.
• file: Polje za izbor fajla.
• hidden: Skriveno polje, nevidljivo korisniku, ali se šalje sa obrascem.
• image: Dugme-slika za slanje obrasca.

Specifikacija HTML5 dodala je nove tipove:

• email: Polje za unos email adrese.
• url: Polje za unos URL adrese.
• number: Polje za unos broja.
• range: Klizač za izbor numeričke vrednosti u zadatom opsegu.
• date: Polje za izbor datuma.
• month: Polje za izbor meseca i godine.
• week: Polje za izbor nedelje i godine.
• time: Polje za izbor vremena.
• datetime-local: Polje za izbor datuma i vremena bez vremenske zone.
• search: Polje za pretragu.
• color: Polje za izbor boje.
• tel: Polje za unos telefonskog broja.

Primer upotrebe:

<!-- Jednolinijsko tekstualno polje -->
<input type="text" placeholder="Ime">

<!-- Polje za unos lozinke -->
<input type="password" placeholder="Lozinka">

<!-- Dugme za slanje obrasca -->
<input type="submit" value="Pošalji">

<!-- Dugme za resetovanje obrasca -->
<input type="reset" value="Resetuj">

<!-- Prekidači -->
<input type="radio" name="pol" value="muško"> Muško
<input type="radio" name="pol" value="žensko"> Žensko

<!-- Čekboksovi -->
<input type="checkbox" name="interesi" value="muzika"> Muzika
<input type="checkbox" name="interesi" value="sport"> Sport

<!-- Obično dugme -->
<input type="button" value="Klikni me">

<!-- Polje za izbor fajla -->
<input type="file">

<!-- Skriveno polje -->
<input type="hidden" name="userId" value="123">

<!-- Dugme-slika -->
<input type="image" src="submit.png" alt="Pošalji">

<!-- Polje za email -->
<input type="email" placeholder="Email">

<!-- Polje za URL -->
<input type="url" placeholder="Sajt">

<!-- Polje za broj -->
<input type="number" min="1" max="10">

<!-- Klizač -->
<input type="range" min="0" max="100">

<!-- Polje za datum -->
<input type="date">

<!-- Polje za mesec -->
<input type="month">

<!-- Polje za nedelju -->
<input type="week">

<!-- Polje za vreme -->
<input type="time">

<!-- Polje za datum i vreme (lokalno) -->
<input type="datetime-local">

<!-- Polje za pretragu -->
<input type="search" placeholder="Pretraži">

<!-- Polje za izbor boje -->
<input type="color">

<!-- Polje za telefonski broj -->
<input type="tel" placeholder="+381 (xxx) xxx-xx-xx">