• Programmazione » HTML 5 » Guida HTML5

Analizziamo alcuni valori dell'attributo Type. Esempi e codici.

In questo tutorial esamineremo altri valori dell’attributo “type”, elemento facente parte del tag <input>. Il tag <input> è un componente fondamentale nella realizzazione di form per contatto o invio di informazioni.

I valori analizzati oggi sono i seguenti: number, range e tel.

Valore – input type “number”

In HTML5, il valore – input type “number” viene usato per definire un campo testo destinato a inserire un numero. È dotato di un set di sottovalori supplementari che ne restringono l’utilizzo (come il minimo o massimo valore numerico ammesso): min, max, step.

Il sottovalore “min” indica il valore minimo che è possibile inserire, il sottovalore “max” il valore numerico massimo. “Step” invece è l’unità di scala, ossia indica di quanto si incrementa ogni valore successivo: va indicato un numero (anche non intero) oppure la stringa “any”, che equivale a non specificare il sottovalore.

<form action="prova_form.php" method="get">Numeri <input type="number" name="Numeri" min="50" max="150" step="20"/><input type="submit" /></form>

Nell’esempio in alto è stato creato un campo numerico che permette di inserire unità numeriche da 50 a 150 ma con intervalli di 20. Pertanto, la compilazione con il numero “60” restituirebbe un errore (in quanto la prima cifra ammessa sarebbe 70).

La compatibilità browser trova riscontro su Apple Safari, Google Chrome e Opera. Internet Explorer e Mozilla Firefox non sono supportati.

Una piccola nota tecnica: il browser Apple Safari, se usato su iPhone, traduce il valore “number” in una tastiera a schermo con cui è possibile inserire i dati.

Valore – input type “range”      

Il valore – input type “range” è usato per definire un arco di valori numerici racchiusi in una slider bar (barra di scorrimento). In output dunque verrà mostrata una risorsa informativa grafica.

<form action="prova_form.php" method="get">Numeri: <input type="range" name="Numeri" min="10" max="100"/><input type="submit" /></form>

I valori di limitazione sono identici a “number”, ovvero min, max e step. La compatibilità browser trova riscontro su Apple Safari, Google Chrome e Opera. Internet Explorer e Mozilla Firefox non sono supportati.

Valore – input type “tel”

Il valore – input type “tel” è usato per delineare un campo testo destinato a contenere un numero di telefono.

<form action="prova_form.php" method="get">Cellulare: <input type="tel" name="utente_mobile" /><br /><input type="submit" /></form>

La compatibilità browser trova riscontro su Apple Safari, Google Chrome, Mozilla Firefox e Opera. Internet Explorer non è supportato.