¿Cómo insertar una dirección de correo electrónico en un formulario usando HTML5?

En este artículo, aprenderemos cómo agregar y obtener una dirección de correo electrónico de un usuario como datos del formulario al agregar un campo de entrada de correo electrónico. Como sabemos, un email_id es un componente vital de los datos del usuario. La dirección de correo electrónico se utiliza para la verificación del usuario. También se utiliza para contactar directamente con los remitentes. 

Enfoque: Para completar esta tarea, debemos seguir los siguientes pasos: 

  • Cree un documento HTML que contenga una etiqueta <input>.
  • Utilice el atributo de tipo con el elemento <input> que se establece en el valor «correo electrónico».

Sintaxis

<input type="email">

Ejemplo 1: en este ejemplo, estamos creando un formulario que contiene una identificación de correo electrónico (nombre de usuario) y una contraseña.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to add an Email Address
        into a Form using HTML5?
    </title>
 
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
 
        h1,
        h2 {
            font-family: impact;
        }
    </style>
</head>
 
<body style="text-align: center">
    <h1 style="color: green">GeeksForGeeks</h1>
 
    <h2>
        How to add an Email Address
        into a Form using HTML5
    </h2>
    <form>
        User_id:
        <input type="email">>
        <br />
 
        Address:
        <input type="password">
        <br />
         
        <button>Log IN</button>
    </form>
</body>
 
</html>

Producción: 

Ejemplo 2: en este ejemplo, estamos creando un campo de entrada de tipo correo electrónico. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to add an Email Address
        into a Form using HTML5?
    </title>
 
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
 
        h1,
        h2 {
            font-family: impact;
        }
    </style>
</head>
 
<body style="text-align: center">
    <h1 style="color: green">GeeksForGeeks</h1>
 
    <h2>
        How to add an Email Address
        into a Form using HTML5
    </h2>
    <form>
        Email Address:
        <input type="email">>
        <br />
        <br />
         
        <button>submit</button>
    </form>
</body>
 
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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