Quali sono i tipi di elementi input in HTML?

Esistono i seguenti tipi di elementi input:

• text: Campo di testo su una sola riga.
• password: Campo per inserire password, i caratteri sono nascosti.
• submit: Pulsante per inviare il modulo.
• reset: Pulsante per resettare il modulo.
• radio: Pulsante di opzione (uno tra molti).
• checkbox: Casella di controllo (una o più tra molte).
• button: Pulsante normale.
• file: Campo per selezionare un file.
• hidden: Campo nascosto, invisibile all'utente, ma inviato con il modulo.
• image: Pulsante immagine per inviare il modulo.

La specifica HTML5 ha aggiunto nuovi tipi:

• email: Campo per inserire un indirizzo email.
• url: Campo per inserire un URL.
• number: Campo per inserire un numero.
• range: Slider per scegliere un valore numerico in un intervallo dato.
• date: Campo per selezionare una data.
• month: Campo per selezionare mese e anno.
• week: Campo per selezionare settimana e anno.
• time: Campo per selezionare l'ora.
• datetime-local: Campo per selezionare data e ora senza fuso orario.
• search: Campo di ricerca.
• color: Campo per scegliere il colore.
• tel: Campo per inserire un numero di telefono.

Esempio di utilizzo:

<!-- Campo di testo su una sola riga -->
<input type="text" placeholder="Nome">

<!-- Campo per inserire password -->
<input type="password" placeholder="Password">

<!-- Pulsante per inviare il modulo -->
<input type="submit" value="Invia">

<!-- Pulsante per resettare il modulo -->
<input type="reset" value="Reset">

<!-- Pulsanti radio -->
<input type="radio" name="gender" value="male"> Maschile
<input type="radio" name="gender" value="female"> Femminile

<!-- Caselle di controllo -->
<input type="checkbox" name="interests" value="music"> Musica
<input type="checkbox" name="interests" value="sports"> Sport

<!-- Pulsante normale -->
<input type="button" value="Clicca qui">

<!-- Campo per selezionare file -->
<input type="file">

<!-- Campo nascosto -->
<input type="hidden" name="userId" value="123">

<!-- Pulsante immagine -->
<input type="image" src="submit.png" alt="Invia">

<!-- Campo email -->
<input type="email" placeholder="Email">

<!-- Campo URL -->
<input type="url" placeholder="Sito web">

<!-- Campo numero -->
<input type="number" min="1" max="10">

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

<!-- Campo data -->
<input type="date">

<!-- Mese -->
<input type="month">

<!-- Settimana -->
<input type="week">

<!-- Ora -->
<input type="time">

<!-- Data e ora (locale) -->
<input type="datetime-local">

<!-- Ricerca -->
<input type="search" placeholder="Cerca">

<!-- Seleziona colore -->
<input type="color">

<!-- Numero di telefono -->
<input type="tel" placeholder="+7 (xxx) xxx-xx-xx">