La colección de elementos de formulario en HTML DOM se usa para establecer o devolver la colección de todos los elementos <input> dentro de un elemento de formulario . Los elementos <input> se ordenan tal como aparecen en el código fuente.
Sintaxis:
formObject.elements
Propiedades: Devuelve una serie de elementos de entrada dentro del elemento <form>.
Métodos: la colección de elementos de formulario DOM contiene tres métodos que se enumeran a continuación:
- [índice]: se utiliza para devolver el elemento <input> dentro del elemento <form> del índice especificado. El valor del índice comienza en 0. Se devuelve NULL si el valor del índice está fuera de rango.
- item(index): Se utiliza para devolver el elemento <input> dentro del elemento <form> del índice especificado. El valor del índice comienza desde 0. Se devuelve NULL si el valor del índice está fuera de rango. Este método funciona de manera similar al método anterior.
- namedItem(id): se utiliza para devolver el elemento <input> dentro del formulario de la colección que coincide con la identificación especificada. Se devuelve NULL si la identificación no existe.
Valor de retorno : – La colección de elementos de formulario devuelve la colección de todos los elementos <input> dentro de un elemento de formulario
Ejemplo 1: El siguiente código devuelve el número de campos de entrada dentro del formulario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Form elements Collection
</title>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<p><b>DOM Form elements Collection</b></p>
<form action="#" method="post" id="users" autocomplete="on">
<label for="username">Username:</label>
<input type="text" name="username" id="Username"> <br>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<br><br>
</form>
<button onclick="click1()">Submit</button>
<p id="paraID"></p>
</center>
<!-- Script to display length of input -->
<script>
function click1() {
var len = document.getElementById("users").elements.length;
document.getElementById("paraID").innerHTML =
"There are " + len + " input fields inside form";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código devuelve el valor de los campos de entrada para un índice específico.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM form elements Collection
</title>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<p><b>DOM form elements collection values</b></p>
<form action="#" method="post" id="users"
autocomplete="on">
<label for="username">Username:</label>
<input type="text" name="username"
value="This is value" id="Username">
<br>
<label for="password">Password:</label>
<input type="password" name="password"
id="password"><br>
</form>
<button onclick="click1()">Submit</button>
<p id="paraID"></p>
</center>
<!-- Script to display value of
input field of input -->
<script>
function click1() {
var valueVar = document.getElementById(
"users").elements[0].value;
document.getElementById("paraID")
.innerHTML = valueVar;
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Ópera
- Firefox
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA