El objeto de correo electrónico de entrada en HTML DOM se utiliza para representar el elemento de entrada HTML con el atributo type=”email” . Se puede acceder al elemento de entrada con el atributo type=”email” utilizando el método getElementById().
Sintaxis:
- Se utiliza para acceder al objeto de correo electrónico de entrada.
document.getElementById("id");
- Se utiliza para crear elementos de entrada.
document.createElement("input");
Propiedades del objeto de correo electrónico de entrada:
| Propiedad | Descripción |
|---|---|
| escribe | Esta propiedad se utiliza para devolver el tipo de elemento de formulario al campo de correo electrónico. |
| valor | Esta propiedad se usa para establecer o devolver el valor del atributo de valor de un campo de correo electrónico. |
| autocompletar | Esta propiedad se usa para establecer o devolver el valor del atributo de autocompletar de un campo de correo electrónico. |
| enfoque automático | Esta propiedad se usa para establecer o devolver si un campo de correo electrónico debe enfocarse automáticamente cuando se carga la página. |
| valor por defecto | Esta propiedad se utiliza para establecer o devolver el valor predeterminado de un campo de correo electrónico. |
| desactivado | Esta propiedad se usa para establecer o devolver si un campo de correo electrónico está deshabilitado o no. |
| forma | Esta propiedad se utiliza para devolver una referencia al formulario que contiene el campo de correo electrónico. |
| lista | Esta propiedad se usa para devolver una referencia a la lista de datos que contiene el campo de correo electrónico. |
| longitud máxima | Esta propiedad se usa para establecer o devolver el valor del atributo maxlength de un campo de correo electrónico. |
| múltiple | Esta propiedad se usa para establecer o devolver si un usuario puede ingresar más de una dirección de correo electrónico en el campo de correo electrónico. |
| nombre | Esta propiedad se utiliza para establecer o devolver el valor del atributo de nombre de un campo de correo electrónico. |
| patrón | Esta propiedad se usa para establecer o devolver el valor del atributo de patrón de un campo de correo electrónico. |
| marcador de posición | Esta propiedad se usa para establecer o devolver el valor del atributo de marcador de posición de un campo de correo electrónico. |
| solo lectura | Esta propiedad se usa para establecer o devolver si el campo de correo electrónico es de solo lectura o no. |
| requerido | Esta propiedad se usa para establecer o devolver si el campo de correo electrónico debe completarse antes de enviar un formulario. |
| Talla | Esta propiedad se utiliza para establecer o devolver el valor del atributo de tamaño del campo de correo electrónico. |
Métodos
- select(): se utiliza para seleccionar el contenido de un campo de texto de correo electrónico de entrada.
Ejemplo 1: este ejemplo utiliza el método getElementById() para acceder al elemento <input> con el atributo type=”email”.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Email Object
</title>
</head>
<body>
<h1> GeeksforGeeks</h1>
<h2>DOM Input Email Object</h2>
E-mail: <input type="email" id="email"
value="careers@geeksforgeeks.org">
<button onclick="myGeeks()">
Click Here!
</button>
<p id="GFG"></p>
<!-- Script to access input element with
type email attribute -->
<script>
function myGeeks() {
var em = document.getElementById("email").value;
document.getElementById("GFG").innerHTML = em;
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo utiliza el método document.createElement() para crear un elemento <input> con el atributo type=”email”.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Email Object
</title>
</head>
<body>
<h1> GeeksforGeeks</h1>
<h2>DOM Input Email Object</h2>
<button onclick="myGeeks()">
Click Here!
</button>
<!-- script to create input element of
type email attribute -->
<script>
function myGeeks() {
/* Create an input element */
var x = document.createElement("INPUT");
/* Set the type attribute */
x.setAttribute("type", "email");
/* Set the value to type attribute */
x.setAttribute("value", " careers@geeksforgeeks.org");
/* Append the element to body tag */
document.body.appendChild(x);
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles :
- Google Chrome
- Internet Explorer (después de IE 9)
- Firefox
- Ópera
Publicación traducida automáticamente
Artículo escrito por divyatagoel0709 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA