<input type="tel">

Gli elementi <input type="tel"> vengono utilizzati per consentire all'utente di inserire e modificare un numero di telefono. A differenza di <input type="email"> e <input type="url">, il valore di input non viene convalidato automaticamente in un formato particolare prima che il modulo possa essere inviato, poiché i formati dei numeri di telefono variano molto in tutto il mondo.

Nonostante il fatto che gli input di tipo tel siano funzionalmente identici agli input text standard, servono a scopi utili; il più rapidamente evidente di questi è che i browser mobili, in particolare sui telefoni cellulari, possono scegliere di presentare una tastiera personalizzata ottimizzata per l'immissione di numeri di telefono. L'uso di un tipo di input specifico per i numeri di telefono rende anche più conveniente aggiungere la convalida personalizzata e la gestione dei numeri di telefono.

Gli attributi di questo elemento includono gli attributi globali.

Valore

L' attributo value dell'elemento <input> contiene una stringa che rappresenta un numero di telefono o è una stringa vuota ("").

Attributi aggiuntivi

Oltre agli attributi che operano su tutti gli elementi <input> indipendentemente dal loro tipo, gli input del numero di telefono supportano i seguenti attributi.

list

I valori dell'attributo list sono quelli id di un elemento <datalist> che si trova nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

maxlength

Il numero massimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero 0 o superiore. Se non viene specificato maxlength o viene specificato un valore non valido, il campo di ricerca non ha una lunghezza massima. Questo valore deve anche essere maggiore o uguale al valore di minlength.

minlegth

Il numero minimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero non negativo minore o uguale al valore specificato da maxlength. Se viene specificato no minlengtho viene specificato un valore non valido, l'input di ricerca non ha una lunghezza minima.

pattern

L'attributo pattern, quando specificato, è un'espressione regolare a cui il valore dell'input deve corrispondere affinché il valore superi la convalida del vincolo. Deve essere un'espressione regolare JavaScript valida, come utilizzata dal tipo RegExp e come documentato nella nostra guida sulle espressioni regolari ; il flag 'u' viene specificato durante la compilazione dell'espressione regolare, in modo che il modello venga trattato come una sequenza di punti di codice Unicode, anziché come ASCII. Nessuna barra in avanti deve essere specificata attorno al testo del modello.

Se il modello specificato non è specificato o non è valido, non viene applicata alcuna espressione regolare e questo attributo viene completamente ignorato.

placeholder

L'attributo placeholder è una stringa che fornisce un breve suggerimento all'utente sul tipo di informazioni previste nel campo. Dovrebbe essere una parola o una breve frase che dimostri il tipo di dati previsto, piuttosto che un messaggio esplicativo. Il testo non deve includere ritorni a capo o avanzamenti di riga.

Se il contenuto del controllo ha una direzionalità ( LTR o RTL ) ma deve presentare il segnaposto nella direzionalità opposta, puoi utilizzare i caratteri di formattazione dell'algoritmo bidirezionale Unicode per sovrascrivere la direzionalità all'interno del segnaposto.

readonly

Un attributo booleano che, se presente, significa che questo campo non può essere modificato dall'utente. Tuttavia, value può ancora essere modificato dal codice JavaScript impostando direttamente la proprietà HTMLInputElement value.

size

L'attributo size è un valore numerico che indica quanti caratteri deve essere largo il campo di input. Il valore deve essere un numero maggiore di zero e il valore predefinito è 20. Poiché le larghezze dei caratteri variano, questo può essere esatto o meno e non dovrebbe essere considerato tale; l'input risultante potrebbe essere più stretto o più largo del numero di caratteri specificato, a seconda dei caratteri e del font.

Questo non pone un limite al numero di caratteri che l'utente può inserire nel campo. Specifica solo approssimativamente quanti possono essere visti alla volta. Per impostare un limite superiore alla lunghezza dei dati di input, utilizzare l'attributo maxlength.

Attributi non standard

I seguenti attributi non standard sono disponibili per i campi di immissione del numero di telefono. Come regola generale, dovresti evitare di usarli a meno che non possa essere aiutato.

autocorrect

Estensione di Safari, l'attributo autocorrect è una stringa che indica se attivare o meno la correzione automatica mentre l'utente sta modificando questo campo. I valori ammessi sono:

on

Abilita la correzione automatica degli errori di battitura e l'elaborazione delle sostituzioni di testo, se configurate.

off

Disabilita la correzione automatica e le sostituzioni del testo.

Utilizzo di <input type="tel">

I numeri di telefono sono un tipo di dati molto comunemente raccolto sul web. Quando crei qualsiasi tipo di registrazione o sito di e-commerce, ad esempio, dovrai probabilmente chiedere all'utente un numero di telefono, sia per scopi commerciali che per contatti di emergenza. Data la frequenza con cui vengono inseriti i numeri di telefono, è un peccato che una soluzione "taglia unica" per la convalida dei numeri di telefono non sia pratica.

Fortunatamente, puoi considerare i requisiti del tuo sito e implementare tu stesso un livello di convalida appropriato.

Uno dei principali vantaggi di <input type="tel"> è che fa sì che i browser mobili visualizzino una tastiera speciale per l'inserimento dei numeri di telefono.

Nella sua forma più semplice, un input tel può essere implementato in questo modo:

<label for="telefono">Numero di telefono:</label>
<input id="telefono" name="telefono" type="tel">

Liste utili

• Attributi
• Attributi globali
• Elementi