HTML5 ofrece controles especializados para rangos numéricos y fechas/horas
type="range"
linear_scale
Control deslizante
exposure
min, max, step
touch_app
Interactivo
Tipos de fecha/hora
date_range
date
access_time
time
event
datetime-local
view_week
week
view_module
month
code
Ejemplo de código
<label for="volumen">Volumen:</label>
<input type="range" id="volumen" name="volumen" min="0" max="100" value="50">
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha">
<input type="range" id="volumen" name="volumen" min="0" max="100" value="50">
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha">
Ejemplo interactivo
50
Selecciona una fecha
Selecciona una hora
Selecciona fecha y hora
lightbulb
Ventajas
- Interfaz nativa del navegador
- Validación automática sin JavaScript
- Optimizado para dispositivos móviles