El Atributo STEP

El atributo step en HTML se utiliza para definir incrementos válidos en campos de entrada numéricos, de rango, fecha, hora y otros. Permite controlar los valores que un usuario puede ingresar, asegurando precisión y coherencia en formularios. Aquí te explicamos cómo implementarlo correctamente.

1. Introducción al atributo step

• Propósito:
  Especificar el intervalo entre valores válidos en un campo de entrada.

• Elementos compatibles:
  <input type="number">, <input type="range">, <input type="date">, <input type="time">, <input type="datetime-local">, <input type="month">, <input type="week">.

• Valores aceptados:

  • Un número (ej.: 2, 0.5).

  • "any": Permite cualquier valor (sin restricciones de paso).

2. Sintaxis básica

<input type="number" step="incremento">

3. Ejemplos prácticos

Ejemplo 1: Números en incrementos de 5

<label>Selecciona un múltiplo de 5 (entre 0 y 20):</label>
<input 
  type="number" 
  min="0" 
  max="20" 
  step="5"
>

Resultado:
El usuario solo puede ingresar 0, 5, 10, 15 o 20.

Ejemplo 2: Control deslizante con pasos de 10

<label>Rango de precio (en $10):</label>
<input 
  type="range" 
  min="0" 
  max="100" 
  step="10"
>

Resultado:
El slider se mueve en incrementos de 10 (0, 10, 20, ..., 100).

Ejemplo 3: Hora en intervalos de 15 minutos

<label>Hora de la reunión (cada 15 minutos):</label>
<input 
  type="time" 
  step="900" <!-- 900 segundos = 15 minutos -->
>

Resultado:
Opciones como 09:00, 09:15, 09:30, etc.

Ejemplo 4: Fechas en intervalos semanales

<label>Selecciona una fecha cada 7 días:</label>
<input 
  type="date" 
  step="7"
>

Nota:
No todos los navegadores soportan step en campos de fecha. Usa JavaScript como alternativa si es necesario.

4. Uso de step="any"

Permite valores decimales sin restricciones de paso (útil para medidas precisas):

<label>Peso (en kg):</label>
<input 
  type="number" 
  step="any" 
  placeholder="Ej: 2.5"
>

5. Combinación con min y max

El atributo step funciona junto con min y max para definir rangos específicos:

<label>Temperatura (entre -10°C y 40°C, en pasos de 0.5):</label>
<input 
  type="number" 
  min="-10" 
  max="40" 
  step="0.5"
>

6. Consideraciones clave

1. Compatibilidad:

   • step en <input type="date"> y <input type="time"> puede variar entre navegadores.

   • En campos number y range, funciona en todos los navegadores modernos.

2. Accesibilidad:

   • Agrega etiquetas claras (ej.: "Incrementos de 5 unidades").

   • Usa placeholder o texto de ayuda para indicar el formato esperado.

3. Validación del servidor:
   No confíes únicamente en step; valida los datos en el backend.

7. Errores comunes

• Usar step sin min o max:
  El punto de partida puede ser ambiguo.

  html

  Copy

  <!-- Incorrecto -->
  <input type="number" step="2">
  
  <!-- Correcto -->
  <input type="number" min="0" step="2">

   

• Run HTML

• Valores no numéricos:
  step="dos" es inválido. Usa siempre números o "any".

8. Conclusión

El atributo step es ideal para:

• Formularios que requieren valores en incrementos específicos (ej.: cantidades, horas).

• Mejorar la experiencia del usuario evitando entradas inválidas.

• Ejemplo final:

  html

  Copy

  <form>
    <label>Selecciona la cantidad (múltiplos de 25):</label>
    <input 
      type="number" 
      min="0" 
      max="500" 
      step="25"
      placeholder="0, 25, 50..."
    >
    <button type="submit">Enviar</button>
  </form>

   

• Run HTML

Recuerda:

• Prueba en diferentes navegadores.

• Combina step con min, max y validación del servidor.

• Usa step="any" para decimales libres.

¡Con este tutorial, podrás crear formularios más precisos y fáciles de usar!