Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

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.
    numer input atributo step HTML5
  • 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.
    date input atributo step HTML5

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.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr