Cómo usar el Input mail en HTML5

Con HTML5 no sólo la etiqueta de video o audio se hace presente, de hecho hay nuevas etiquetas y nuevos elementos que iremos conociendo poco a poco. Pero hoy nos vamos a centrar en un nuevo tipo de elemento de formulario, el de correo electrónico.

A continuación vamos a ver cómo funciona este nuevo campo mail en HTML5, también está el de teléfono, pero en esta ocasión para ir entendiendo cada uno analizaremos el de correo.

¿Qué elemento es el campo de mail?

Como sabemos, en el caso de los formularios al especificar un campo de texto en HTML4  teníamos la posibilidad de elegir el tipo como los siguientes:

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

Sin embargo muchas veces al momento de validar datos en un campo de texto era muy difícil, o no todos sabían, cómo validar algunos parámetros, como saber se introduce una sintaxis de correo electrónico correcto, o un teléfono, por eso es que se agregaron estos nuevos valores:

• email
• tel
• url
• number
• range
• date
• search
• color

Entonces, el campo que vamos a analizar hoy es el de email, para conocer bien uno por uno cómo funciona y lo que podemos hacer.

¿Cómo creo mi campo email?

Si ya has trabajado con formularios sabrás que para definir un campo usas la etiqueta <input />, y para el campo de correo es lo mismo sólo que agregamos un tipo de campo, así:

<input type=”email” />

Y de esta forma ya tenemos nuestro campo de correo electrónico. Lo que se preguntarán es lo que hace,  pues bien, cuando se aplica un formulario, y un botón para enviar la información sucede dos cosas:

• Si introduces los parámetros correctos (el arroba @ y los punto com “.com.”) el formulario se enviará a la dirección que le hayamos puesto al form.
• Si no se coloca algún parámetro de correo electrónico, se mostrará un mensaje de error y se evita automáticamente que se envié el formulario.

Algunas curiosidades

Hay que recalcar algunas cosas muy interesantes:

1. Cuando el campo no es válido se coloca un tooltip de error, que sin duda se podrá cambiar conociendo el estilo CSS correcto.

2. Estos nuevos campos se adaptan a los smarthpones, por tal motivo cuando usen el campo desde un IPhone, por ejemplo, se desplegará el teclado para correos electrónicos, así como el teclado de números si el campo es de teléfono.

3. Al campo input se ha agregado el parámetro placeholder, el cual nos da la posibilidad de colocar un texto de fondo en el campo, que se desaparece una vez que recibe el foco, como método de ayuda o sugerencia de qué escribir.

Conclusiones

Quise dar este tutorial de forma muy sencilla, como una pequeña introducción de cómo funcionan las nuevas etiquetas o parámetros en HTML5, en los siguientes tutoriales ya empezaremos a combinar HTML5 con CSS3 y Javascript, para poder tener más control.

No se olviden de revisar la siguiente tabla de compatibilidad, para que chequen en qué navegadores es posible colocar estos elementos.