Input type: range

14 marzo 2011

Molto simile semanticamente all’input type=number, questo nuovo tipo di input permette agli utenti di inserire un numero tramite uno slider.

Attributi specifici

HTML5 mette a disposizione un set di attributi specifici per il tipo range (che sono gli stessi del type=number): servono a specificare delle limitazioni per il valore di questo attributo. Questi attributi sono min, max e step.

  • min: specifica il minimo valore permesso. Esempio: min="1", che permette solo di passare numeri da 1 in su.
  • max
  • : specifica il massimo valore permesso. Esempio: max="10", che permette solo di inviare numeri inferiori o uguali a 10. Il valore di questo attributo deve essere maggiore del valore dell’attributo min (se specificato).
  • step: indica la granulosità che deve avere il value limitando i possibili valori passati. Il valore di step se specificato deve essere un numero (anche non intero) maggiore di zero oppure la stringa “any” (che equivale a non inserire l’attributo). Esempio: step=3, che influenza i valori inseriti passando valori come -3, 0, 3, 6.

Esempi d’uso

L’esempio è molto semplice, eccolo:

<form name="commenti" method="post" action="/141/comments">
  [...]
  <label>Voto:
    <input type="range" name="voto" min="0" max="5" step="1">
  </label>
  [...]
  <input type="reset"  value="Resetta il form">
  <input type="submit" value="Invia il commento">
</form>

Ecco come appare un input di tipo range sui browser che lo supportano:

Figura 32 – Un input di tipo range

screenshot

Tabella del supporto sui browser

Form: nuovi tipi di input Internet Explorer Firefox Safari Google Chrome Opera
range No No 4.0+ 2.0+ 9.0+

Tutte le lezioni

1 ... 29 30 31 ... 51

Se vuoi aggiornamenti su Input type: range inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Input type: range

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy