Antes de la llegada de HTML5, el manejo de las direcciones de correo electrónico requería más trabajo para validar las direcciones de correo electrónico usando Javascript. Pues bien, todo eso ya no es necesario con el nuevo HTML5 input type email.
El elemento email input ha sido diseñado específicamente para manejar y validar las direcciones de correo electrónico. Dependiendo del navegador, alertará al usuario de que la información introducida no es correcta y el formulario no se enviará hasta que el usuario haga las correcciones.
Código de ejemplo:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Uso general
Guarda el siguiente código en un documento de texto y ábrelo con un navegador web.
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>Así es como debe quedar la página:
Si quieres recoger varias direcciones a la vez, puedes añadir el atributo multiple:
<input type="email" multiple>El usuario puede ahora introducir una o varias direcciones separadas por una coma.
Validación
Los navegadores que soportan el tipo de entrada email proporcionan soporte de validación de diferentes maneras. Sin embargo, todos los navegadores utilizan un algoritmo de validación común que sigue este patrón:
los requisitos mínimos son los símbolos @ y . y la ausencia de espacios entre los caracteres. Ten en cuenta que no es posible verificar si la dirección proporcionada existe. Este es un problema que debe ser manejado por su script del lado del servidor. Una buena manera de comprobar si las direcciones de correo electrónico son válidas es enviar un enlace a la dirección de correo electrónico que, al hacer clic, confirme que el correo electrónico es válido.
Mozilla Firefox
En cuanto el usuario termine de escribir y pase a otro elemento, Firefox comprobará los datos introducidos. Si no es una dirección de correo electrónico válida, la entrada aparecerá con un borde rojo como se muestra a continuación:
Si el usuario procede a pulsar el botón de envío sin cambiar el correo electrónico proporcionado, el formulario no se enviará y aparecerá un tooltip mostrando el mensaje de error en la entrada.
Google Chrome
Google chrome no proporciona ningún soporte visual cuando el usuario introduce datos no válidos.
Sin embargo, al enviarlo, aparece un mensaje de error con un tooltip que proporciona una pista sobre lo que el usuario debe proporcionar.
Si quieres proporcionar un mensaje de error personalizado al usuario, puedes utilizar el atributo title:
<input type="email" title="Please Provide A Valid Email Address !">
Soporte de navegadores
El tipo de entrada email es ampliamente soportado en todos los navegadores modernos. Comprueba en la siguiente tabla la versión mínima soportada. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Para conocer los detalles de compatibilidad de los navegadores, consulte: Puedo usar el tipo de entrada de correo electrónico
Generalmente, si la versión del navegador en uso no admite este tipo de entrada, se mostrará un texto de tipo de entrada en su lugar. Cuando esté manejando datos enviados en el lado del servidor, asegúrese de validar los datos usted mismo antes de aceptarlos.
En las plataformas Android e IOS, el teclado incluirá automáticamente las teclas @ y . siempre que el tipo de entrada sea email.
Por qué usar este nuevo tipo de entrada
- El tipo de entrada email facilita el desarrollo web ya que el trabajo de validación lo realiza el navegador. Si se ha especificado el atributo requerido, el navegador no aceptará que se envíe el formulario.
- Puede elegir dar estilo a todos los correos electrónicos de tipo input en su sitio web en un estilo específico para que aparezcan en un estilo estándar en todo el tablero.
- Los dispositivos móviles pueden personalizar el teclado suave para que coincida con la entrada de correo electrónico (con la @ y el . fácilmente accesibles
CSS aplicado
Para aplicar cierto estilo sólo a los campos de entrada de correo electrónico, utiliza el selector de atributos así:
input{ background-color:#ccc;}Demo
Vea también
- Cómo crear un campo de entrada de teléfono en HTML5
- Cómo obtener el valor de una casilla de verificación en el envío de un formulario
.