Atributo step HTML5: Establecer intervalo de valores en inputs

Vamos a repasar el funcionamiento del atributo step HTML5, este atributo permite establecer el rango de intervalos en los que se pueden mover los valores de los los input de fecha y numéricos.

Sintaxis del atributo step HTML5

Vamos a ver la sintaxis de este atributo extraída de su web oficial:

<input type="number" name="puntuacion" step="5">
<!-- el usuario solo podrá meter valores múltiplos del 5-->

Tal y como podéis ver en la sintaxis es sencillo añadir el atributo al input, en este caso el usuario se movería en intervalos de 5 en 5 en el input de tipo number usando el atributo step. El usuario siempre puede fijar el valor que desee escribiendo en el input.

Ejemplo del atributo step HTML5

Vamos a ver en este sencillo ejemplo vamos a ver en funcionamiento el atributo:

Edad: <input type="number" name="numero" step="5">

Fecha de nacimiento: <input type="date" name="fechanac" step="1">

Explico el ejemplo con los 3 input:

• En el primer input de tipo number le he puesto un step = 5, esto quiere decir que el usuario puede moverse de 5 en 5 valores haciendo click en el atributo.
  
• En el segundo input de tipo date he puesto un step = 1, por lo que podra moverse por los días, meses y años de 1 en 1.
  

Compatibilidad del atributo step HTML5

Este nuevo atributo HTML5 es compatible con estos input:

• number
• range
• date
• datetime
• datetime-local
• month
• time
• week

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.