Curso HTML 9.1 Nuevos tipos de input (email, url, number, tel, search, etc.)

Introducción a los nuevos tipos de input en HTML5

HTML5 amplió la familia de controles <input> incorporando tipos especializados para datos comunes: email, url, number, tel, search (y otros como date, color, range, etc.). Cada uno añade validación nativa, teclados móviles optimizados y posibilidades de personalización.

Comparativa de tipos de input

1. input type=’email’

Permite capturar uno o varios correos electrónicos. El navegador verifica la sintaxis básica usuario@dominio.ext. Si usas multiple, valida cada dirección separada por comas.

Ejemplo básico:

<label>Correo electrónico:</label>
<input type='email' name='email' required placeholder='ejemplo@dominio.com'>

Ejemplo avanzado (múltiples direcciones y patrón custom):

<label>Correos (separados por coma):</label>
<input 
  type='email' 
  name='emails' 
  multiple 
  required 
  placeholder='a@b.com, c@d.com' 
  pattern='([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,},\s?)*[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
>

2. input type=’url’

Valida que el texto sea una URL bien formada, incluyendo protocolo (http:// o https://). Admite atributos de longitud y expresiones regulares.

Ejemplo con validación personalizada:

<label>Sitio web personal:</label>
<input 
  type='url' 
  name='website' 
  placeholder='https://tusitio.com' 
  required 
  pattern='https?://.+\.(com|org|net)$' 
  title='Debe empezar con http:// o https:// y terminar en .com, .org o .net'
>

3. input type=’number’

Presenta flechas de incremento/decremento y obliga a valores numéricos. Permite controlar rango y precisión.

Atributos clave:

• min: valor mínimo.
• max: valor máximo.
• step: incremento (ej. 0.1 para un decimal).
• value: valor inicial.

Ejemplo de número entero:

<label>Edad:</label>
<input 
  type='number' 
  name='edad' 
  min='0' 
  max='120' 
  step='1' 
  required 
  value='30'
>

Ejemplo con decimales y notificación JavaScript:

<label>Precio ($):</label>
<input 
  id='precio' 
  type='number' 
  name='precio' 
  min='0' 
  max='9999.99' 
  step='0.01' 
  placeholder='0.00'
>
<script>
  const inputPrecio = document.getElementById('precio');
  inputPrecio.addEventListener('input', function() {
    // Si el valor no es múltiplo de 0.01, muestra alerta
    if ((this.valueAsNumber * 100) % 1 !== 0) {
      this.setCustomValidity('Solo permitidos dos decimales.');
    } else {
      this.setCustomValidity('');
    }
  });
</script>

4. input type=’tel’

Diseñado para números de teléfono. No valida automáticamente, pero puedes usar pattern y inputmode para indicar teclado numérico en móviles.

Ejemplo con máscara simplificada:

<label>Teléfono de contacto:</label>
<input 
  type='tel' 
  name='telefono' 
  placeholder='+34 600 123 456' 
  pattern='\+?\d{1,3}\s?\d{3}\s?\d{3}\s?\d{3}' 
  inputmode='tel' 
  required
>

5. input type=’search’

Optimizado para búsquedas: navegadores pueden ofrecer botón de borrado inline, y sugerir atajos de búsqueda.

Ejemplo simple con datalist de sugerencias:

<label>Buscar producto:</label>
<input 
  type='search' 
  name='busqueda' 
  placeholder='Escribe palabra clave' 
  list='sugerencias' 
  autocomplete='off' 
/>
<datalist id='sugerencias'>
  <option value='Camisetas'>
  <option value='Zapatos'>
  <option value='Accesorios'>
  <option value='Libros'>
</datalist>

Buenas prácticas y consejos

• Usa required junto a title para guiar al usuario.
• Combina pattern con setCustomValidity() en JS para mensajes claros.
• Recuerda atributos de accesibilidad (aria-describedby, aria-label).
• Define inputmode para mejorar la experiencia en móviles (numeric, tel, decimal).
• Comprueba siempre los datos también en el servidor; la validación en cliente es complementaria.

Con estos nuevos tipos de input tu formulario será más robusto, accesible y ofrecerá mejor experiencia de usuario, gracias a la validación nativa y teclados optimizados.