Guida HTML interattiva: Tipi di input

Q: Quanti tipi di input ci sono in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week. Un tipo sconosciuto o mancante si comporta come text.

Q: Qual è il tipo di input predefinito in HTML?

text. Un senza type, o con un tipo che il browser non conosce, è un campo di testo su una riga.

Q: Devo usare type="number" per numeri di telefono o CAP?

No. number è per le quantità: aggiunge le frecce di incremento e rifiuta il +, gli spazi e i trattini che contengono i numeri di telefono. Usa type="tel" per i numeri di telefono, e type="text" con inputmode="numeric" per codici come CAP e numeri di carta.

Q: Che formato usa input type date?

Il valore è sempre YYYY-MM-DD, come 2026-09-24, qualunque sia il formato che si vede sullo schermo. La visualizzazione segue le impostazioni locali di chi legge; il valore inviato e letto dagli script no.

Q: Il tag input ha bisogno di un tag di chiusura?

No. è un elemento vuoto: scrivi . Un di chiusura non è valido, e la barra di autochiusura in è permessa ma non fa nulla.

Il tag input e i suoi tipi

<input> è un campo di un form, e il suo attributo type decide di che genere. Lo stesso tag crea una casella di testo, un cursore, un selettore di date o di colori. Prova ogni campo qui sotto e premi Submit per vedere cosa invia il form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> è un elemento vuoto, quindi non ha tag di chiusura. Il suo name è la chiave con cui viene inviato il valore, e value è il valore iniziale. Un type mancante o scritto male dà un semplice campo di testo.

Tutti i tipi di input HTML

`type`	Cos'è	Note
`text`	Una riga di testo	Il predefinito
`password`	Testo mostrato come puntini	Non è cifrato di per sé; invialo tramite HTTPS
`email`	Un indirizzo email	Valida il formato; tasto `@` sulle tastiere dei telefoni
`url`	Un indirizzo web	Deve iniziare con uno schema come `https://`
`tel`	Un numero di telefono	Tastierino telefonico sui cellulari, nessun controllo del formato
`search`	Una casella di ricerca	Spesso mostra un pulsante per cancellare
`number`	Un numero	Frecce di incremento, `min`, `max`, `step`
`range`	Un cursore	Impreciso per scelta; il valore è un numero
`date`	Una data	Il valore è `YYYY-MM-DD`
`time`	Un orario	Il valore è `HH:MM` (24 ore)
`datetime-local`	Data e ora, senza fuso orario	Il valore è `YYYY-MM-DDTHH:MM`
`month`	Un anno e un mese	Non supportato in tutti i browser
`week`	Un anno e un numero di settimana	Non supportato in tutti i browser
`color`	Un selettore di colori	Il valore è `#rrggbb` in minuscolo
`checkbox`	Una casella acceso/spento	Vedi checkbox HTML
`radio`	Una scelta tra un gruppo	Vedi radio button HTML
`file`	Un selettore di file	`accept`, `multiple`
`hidden`	Un valore inviato ma non mostrato	Per ID e token
`submit`	Un pulsante di invio	`<button type="submit">` è più flessibile
`reset`	Un pulsante di reset	Raramente è una buona idea
`button`	Un pulsante che da solo non fa niente	Per JavaScript
`image`	Un pulsante di invio disegnato come immagine	Invia anche le coordinate del clic

Tipi di testo e tastiere dei telefoni

email, url, tel, search e text sembrano tutti una casella di testo su un computer. La differenza è nella validazione e, sui telefoni, nella tastiera che si apre. Il bordo in questo esempio diventa verde o rosso a seconda di come il browser giudica il valore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example per il browser è un'email valida: controlla solo che ci siano del testo, @ e un dominio, non che il dominio abbia un punto. Il vero controllo avviene sul server.
example.com non è un url valido, perché non ha uno schema. https://example.com sì.
tel accetta qualsiasi cosa. I formati dei numeri di telefono cambiano troppo da un paese all'altro, quindi non c'è un controllo integrato; aggiungi un pattern se ti serve.
inputmode="numeric" chiede ai telefoni una tastiera numerica senza i problemi di type="number", ed è per questo che è la scelta giusta per CAP, codici monouso e numeri di carta.

number e range

Entrambi accettano min, max e step. number è per i valori esatti; range è un cursore per valori in cui il numero preciso conta meno. Un cursore range non mostra nessun numero, quindi abbinalo a un <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step vale 1 di default per number, quindi un campo prezzo senza step="0.01" rifiuta 4.99 quando il form viene inviato. In JavaScript, input.value è sempre una stringa; usa input.valueAsNumber per ottenere un numero.

Date e orari

I tipi per date e orari aprono il selettore del browser. Quello che si vede segue le impostazioni locali di chi legge (09/24/2026, 24.09.2026), ma il valore ha sempre lo stesso formato fisso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Quel formato fisso è ciò che riceve il server e ciò che legge JavaScript, quindi non devi mai interpretare "24.09.2026". min e max usano lo stesso formato. datetime-local non ha fuso orario: se conta, converti sul server usando il fuso di chi compila.

color e file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" limita il selettore di file alle immagini (e sui telefoni offre la fotocamera); accetta anche estensioni, come accept=".pdf,.docx". È solo un suggerimento per il selettore, quindi controlla il tipo di file sul server. multiple permette più file. Un vero caricamento richiede anche method="post" e enctype="multipart/form-data" sul form.

Suggerimenti con datalist

Un <datalist> dà a un campo di testo un elenco di suggerimenti permettendo comunque qualsiasi valore. Collegali con l'attributo list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Scrivi "ja" nel campo per vedere i suggerimenti corrispondenti. A differenza di una select, si può scrivere un valore che non è nell'elenco.

Attributi che funzionano sugli input

Attributo	Cosa fa
`name`	La chiave con cui viene inviato il valore
`value`	Il valore iniziale
`placeholder`	Un suggerimento mostrato finché il campo è vuoto (non è un'etichetta)
`required`	Va compilato prima dell'invio
`disabled`	Non si può usare e non viene inviato
`readonly`	Non si può modificare, ma viene inviato
`autocomplete`	Cosa compilare in automatico: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Limiti per numeri, intervalli, date e orari
`minlength`, `maxlength`	Limiti di lunghezza per i tipi di testo
`pattern`	Un'espressione regolare a cui deve corrispondere l'intero valore
`inputmode`	Quale tastiera mostrare sui telefoni: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	L'`id` di un `<datalist>`
`multiple`	Più valori, per `email` e `file`
`accept`	Tipi di file per `file`

Errori comuni

type="number" per numeri di telefono, CAP o numeri di carta. Non sono quantità. Usa tel o text con inputmode="numeric".
Un campo prezzo senza step="0.01". I valori decimali non superano la validazione.
Usare placeholder come etichetta. Sparisce appena si inizia a scrivere.
Affidarsi ad accept o a type="email" per la sicurezza. Sono comodità; il server ricontrolla.
type="month" o type="week" senza alternativa. Alcuni browser mostrano un semplice campo di testo.
Un tag di chiusura </input>. <input> è vuoto.

Domande frequenti

Quanti tipi di input ci sono in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week. Un tipo sconosciuto o mancante si comporta come text.

Qual è il tipo di input predefinito in HTML?

text. Un <input> senza type, o con un tipo che il browser non conosce, è un campo di testo su una riga.

Devo usare type="number" per numeri di telefono o CAP?

No. number è per le quantità: aggiunge le frecce di incremento e rifiuta il +, gli spazi e i trattini che contengono i numeri di telefono. Usa type="tel" per i numeri di telefono, e type="text" con inputmode="numeric" per codici come CAP e numeri di carta.

Che formato usa input type date?

Il valore è sempre YYYY-MM-DD, come 2026-09-24, qualunque sia il formato che si vede sullo schermo. La visualizzazione segue le impostazioni locali di chi legge; il valore inviato e letto dagli script no.

Il tag input ha bisogno di un tag di chiusura?

No. <input> è un elemento vuoto: scrivi <input type="text" name="city">. Un </input> di chiusura non è valido, e la barra di autochiusura in <input /> è permessa ma non fa nulla.

Concetti correlati