¿Qué nuevos tipos de «input» introdujo HTML5?

HTML5 enriqueció enormemente las capacidades de los formularios al introducir una variedad de nuevos tipos para la etiqueta <input>. Estos tipos no solo aportan valor semántico, sino que también mejoran la experiencia de usuario al ofrecer controles nativos y, en muchos casos, validación incorporada por el navegador.

Aquí tienes los más destacados:

• email: Para direcciones de correo electrónico. Los navegadores suelen validar el formato básico y los dispositivos móviles pueden mostrar un teclado optimizado.
  <label for="correo">Email:</label> <input type="email" id="correo" name="usuario_email">
• url: Para direcciones web (URL). Similar a email, puede tener validación de formato y teclado adaptado.
• tel: Para números de teléfono. No impone un formato específico (dada la variedad internacional), pero puede optimizar el teclado en móviles.
• number: Para la entrada de números. Permite atributos como min, max y step, y los navegadores suelen mostrar controles para aumentar/disminuir el valor.
• range: Representa un control para seleccionar un valor numérico dentro de un rango definido (un «slider» o deslizador).
  <label for="vol">Volumen:</label> <input type="range" id="vol" name="volumen" min="0" max="100">
• date: Proporciona un selector de fecha nativo.
• time: Ofrece un selector de hora.
• datetime-local: Permite seleccionar una fecha y hora específicas, sin información de zona horaria.
• month: Para seleccionar un mes y año.
• week: Para seleccionar una semana y año.
• search: Destinado a campos de búsqueda. Funcionalmente similar a text, pero puede tener un estilo diferente o incluir un icono para borrar el contenido en algunos navegadores.
• color: Proporciona un selector de color nativo del navegador.
  <label for="colorfav">Color favorito:</label> <input type="color" id="colorfav" name="color_favorito">

La principal ventaja de estos nuevos tipos es que los navegadores pueden ofrecer interfaces de usuario más ricas y adaptadas al tipo de dato, mejorando la usabilidad y reduciendo la necesidad de widgets personalizados con JavaScript para tareas comunes. Y como siempre, recuerda usar una <label> para cada input por accesibilidad.