Índice

Campo de texto para la dirección de correo electrónico

¿Cuántas veces le han pedido su dirección de correo electrónico navegando por la red?

¡Y qué rompecabezas supone para los diseñadores de las aplicaciones web validar una dirección de correo electrónico!

HTML5 responde a esta necesidad con la etiqueta <input type="email">.

Esta etiqueta está implementada en Internet Explorer 10 y en las versiones actuales de Firefox, Google Chrome y Opera.

Se convierte en una etiqueta particularmente interesante a la hora de realizar la validación directa en el navegador, sin que el diseñador tenga que agregar JavaScript.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<form action=""> 
e-mail: <input type="email" name="mail" required><br> 
<input type="submit" value="OK"> 
</form> 
</body> 
</html>

A priori, el campo de texto no se distingue de un campo de texto normal.

images/CAP09IMG24.png

No obstante, cuando intentamos enviar una dirección de correo electrónico mal formada, el navegador nos informa de que la dirección es incorrecta.

images/CAP09IMG25.png

Por otro lado, es posible agregar el atributo required que indica que se trata de un campo obligatorio.

images/CAP09IMG26.png

Aprovechamos esta etiqueta email para hablar ...