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:
|
1 2 |
<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:
|
1 2 3 |
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:
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.