input type=”email”

La etiqueta <input>en HTML tiene como valor "email" en su atributo type, input type=”email” esto simboliza a un campo de uno a más direcciones de correos electrónicos. Bueno Esto hace efecto cuando está presente el atributo multiple, este control puede poner una lista de direcciones email separado por comas.

Mientras este ausente el atributo multiple se puede establecer como una entrada de un sola dirección de email en una caja de texto lo cual permite a los usuarios finales editarla en una sola línea de texto. Pero cuando está presente el atributo múltiple, los navegadores pueden facilitar medios para el usuario final elimine edite o agreguen varias cantidad de direcciones de correo email.

Ejemplos

En este presente ejemplo tenemos un formulario con el control de email con una soda entrada de dirección de correo electrónico, para ello haremos el uso del atributo placeholder de HTML5, este atributo nos va a permitir que el usuario final visualice un texto opaco dentro del campo de control, " escriba su correo electrónico", esta descripción o como otras es de Gran utilidad en los campos de control, cuando el usuario final comienza escribir sobre el control te removerá el texto del atributo placeholder.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Email</legend>
        <p>correo electronico: <br>
            <input type="email" placeholder=" Escriba su correo electronico">
        </p>
        <input type="submit">
    </fieldset>
</form>

Para determinar valores para el control cuando cargue la página haremos el uso del atributo value, como usted podrá ver en este ejemplo.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Email</legend>
        <p>correo electronico: <br>
            <input type="email" placeholder=" Escriba su correo electronico" style="width: 40%;" value="irrazabalhilder@gmail.com">
        </p>
        <input type="submit">
    </fieldset>
</form>

En este ejemplo haremos el uso del atributo múltiple, como ya hemos mencionado antes con anterioridad este atributo nos permitirá ingresar varias cantidades de direcciones de correo, la suposición es que los navegadores deberían de facilitar una interfaz así poder facilitar a los usuarios finales cómo eliminar, agregar y editar del dicho control.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Email</legend>
        <p>correo electronico: <br>
            <input type="email" placeholder=" Escriba su correo electronico" style="width: 45%;" multiple>
        </p>
        <input type="submit">
    </fieldset>
</form>

En este último ejemplo de input type=”email” haremos el uso del atributo required, este atributo no permitirá enviar el contenido del formulario hasta que ingrese un correo electrónico.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Email</legend>
        <p>correo electronico: <br>
            <input type="email" placeholder=" Escriba su correo electronico" style="width: 45%;" multiple required>
        </p>
        <input type="submit">
    </fieldset>
</form>

Share on Facebook

Tweet

Follow us

Save