HTML
Tipos de input para números, fechas, horas, color, rangos y archivos, con sus valores, límites, validación y comportamiento en distintos dispositivos.
<label for="quantity">Cantidad</label>
<input
id="quantity"
name="quantity"
type="number"
min="1"
max="100"
step="1"
>Aporta controles numéricos y validación de rango/pasos.
No es apropiado para valores que parecen números pero no se calculan:
Esos datos pueden tener ceros iniciales, signos o formatos propios; utiliza text/tel e inputmode cuando corresponda.
<input type="number" min="0" step="0.01">Define incrementos válidos relativos a una base. Valores decimales pueden tener matices de representación; el servidor debe validar y usar un modelo monetario correcto.
<input type="number" step="any">Permite cualquier valor numérico válido dentro de otros límites.
JavaScript puede leer input.valueAsNumber, que devuelve número o NaN. El atributo HTML enviado sigue construyéndose desde el valor textual.
<label for="volume">Volumen</label>
<input id="volume" name="volume" type="range" min="0" max="100" value="50">
<output for="volume">50</output>Representa un valor aproximado dentro de un rango. El valor exacto debe mostrarse cuando importa.
No es apropiado para cantidades donde el usuario necesita escribir o comparar números precisos sin feedback.
<label for="start-date">Fecha de inicio</label>
<input id="start-date" name="startDate" type="date">El UI se localiza, pero el valor enviado utiliza formato normalizado como YYYY-MM-DD.
No representa zona horaria ni instante; representa una fecha civil.
<input type="time" name="meetingTime" step="900">Representa hora local sin zona horaria. Para programar un evento global necesitas combinar fecha, zona y reglas del dominio.
<input type="datetime-local" name="appointment">No incluye offset ni zona. El servidor debe saber en qué zona interpretar el valor.
No existe un datetime moderno con selección automática de zona dentro de HTML.
<input type="month" name="billingMonth">
<input type="week" name="planningWeek">El soporte visual varía. Ofrece instrucciones o fallback apropiado para navegadores objetivo.
Las semanas siguen un sistema de numeración definido; no asumas que coincide con todas las reglas empresariales.
<input
type="date"
min="2026-07-23"
max="2026-12-31"
>Aportan constraint validation, pero no impiden solicitudes modificadas. Repite las reglas en servidor.
<label for="accent">Color de acento</label>
<input id="accent" name="accent" type="color" value="#7c3aed">El valor común es un color serializado. La interfaz y soporte de alpha/espacios de color pueden variar con la evolución del estándar.
No utilices solo una muestra de color para comunicar significado; muestra también nombre o resultado cuando sea necesario.
<label for="resume">Hoja de vida</label>
<input
id="resume"
name="resume"
type="file"
accept="application/pdf"
>El navegador permite seleccionar archivos. El servidor debe validar:
accept es una pista para el selector, no una barrera de seguridad.
<input type="file" name="attachments" multiple>Permite varios archivos bajo el mismo nombre.
<input
type="file"
accept="image/*"
capture="environment"
>Puede sugerir cámara frontal o trasera en dispositivos compatibles. El soporte y comportamiento varían.
Por privacidad, el valor visible de file input no expone normalmente la ruta real. Puede aparecer algo como C:\fakepath\file.pdf.
No intentes obtener rutas locales del usuario.
<input type="hidden" name="csrfToken" value="...">Se envía sin interfaz visible. No es secreto: cualquiera puede inspeccionarlo o modificarlo.
Puede transportar IDs, tokens CSRF y estado firmado, siempre con validación de servidor.
<div>
<label for="budget">Presupuesto inicial</label>
<input
id="budget"
name="budget"
type="number"
min="0"
step="1000"
inputmode="numeric"
required
>
</div>¿Por qué un número de identificación no debería usar normalmente type="number"?
Porque es un identificador, no una cantidad: puede tener ceros iniciales, longitud fija o caracteres de formato y no se realizan operaciones aritméticas sobre él.
Checkbox y radio modela elecciones independientes y exclusivas.