Categorías: código HTML

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>


admin

Ver comentarios

  • Muy interesante el post, tengo algo de experiencia y no conocía estos detalles, gracias!

Entradas recientes

Online HTML compiler: Qué es, cómo funciona y mejores herramientas en la nube

¿Qué es un online HTML compiler? En el desarrollo de software actual, el término online…

2 semanas hace

Formato HTML: Qué es, características, extensiones y usos en la web

¿Qué es el Formato HTML? El formato HTML es un estándar digital de estructuración de…

2 semanas hace

Caracteristicas de HTML: Qué es, propiedades clave y estándares web

En el ecosistema del desarrollo web y la ingeniería de software para internet, el lenguaje…

2 semanas hace

HTML editable: Qué es, el atributo contenteditable y cómo modificar contenido en vivo

¿Qué es un HTML Editable? En el desarrollo web tradicional, la mayoría de los elementos…

2 semanas hace

Compilador HTML: Qué es, cómo funciona y mejores herramientas online

En la jerga del desarrollo web y la búsqueda habitual de herramientas en internet, el…

2 semanas hace

Ejemplos de etiquetas HTML: Guía práctica con código y explicación

En el desarrollo web moderno, comprender la teoría del lenguaje de marcado resulta mucho más…

3 semanas hace