HTML5 – Campo tipo Email

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

HTML5 sigue revolucionando el mundo de la WEB y una de sus principales características son los nuevos tipos de campos que podemos utilizar en nuestro formulario, en este pequeño post, les hablaré del campo tipo email.

La sintaxis es idéntica al campo tipo texto, la única diferencia es que ahora el tipo es email.

<input type="email" name="user_email" />

Los navegadores que soportan este nuevo campo le añaden un mensaje de error por defecto, aquí les dejo una imagen de como se ve en Google Chrome.

Pueden añadir el atributo required de HTML5 para hacer que el navegador forcé al usuario a introducir algún texto en este campo.

<input type="email" name="user_email" required />

Estas nuevas características de HTML5 nos evitan el dolor de cabeza del uso de Javascript para las validaciones de los campos, lo que hace que la carga de nuestro sitio sea más rápida, delegando esta funcionalidad a los navegadores.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>PTYDev - HTML5 Email Input</title>
    </head>
    <body>
        <form action="" onsubmit="alert('Sample Form'); return false;">
            Email: <input type="email" name="user_email" required />
            <input type="submit" value="Test" />
        </form>
    </body>
</html>

Y tú, ¿Qué opinión tienes acerca de HTML5?

Te podría interesar
Tecnología

PaaS Plataforma como Servicio

Para todo aquel que desee desarrollar su primera aplicación Web y necesite de algún ambiente de pruebas, que sea altamente configurable, con soporte de certificados SSL, puede ir pensando en las plataformas como servicios (PaaS), para la Web, PaaS es el conjunto de herramientas que proporcionan un ambiente de desarrollo y pruebas.

Leer Más >>
ES6
WEB

Promesas ES6

Las promesas son objetos que retornan un valor en el futuro. Debido a la manera asíncrona que funciona JavaScript, se pueden seguir ejecutando el código sin necesidad de esperar que otro proceso termine.

Leer Más >>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *