El objeto de reinicio de entrada en HTML DOM se usa para representar el elemento HTML <input> con type=”reset” .
Esta etiqueta se utiliza para acceder o crear el elemento <input> . Se puede acceder a este elemento utilizando el método getElementById() .
Sintaxis:
document.getElementById("Input_ID");
Este Input_ID se asigna al elemento HTML <input>.
Ejemplo-1: Creación del elemento <input> con type = “reset” .
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM RESET Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Reset Object</h2>
<button onclick="myGeeks()">
Click Here
</button>
<script>
function myGeeks() {
// creating input element with type = "reset"
var x = document.createElement("INPUT");
x.setAttribute("type", "reset");
document.body.appendChild(x);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: valor devuelto del elemento <input> de la identificación «GeekReset» usando document.getElementById («GeekReset»)
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM RESET Object
</title>
</head>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Reset Object</h2>
<input type="reset"
id="GeekReset"
value="Reset form">
<br>
<br>
<button onclick="myGeeks()">
Click Here
</button>
<p id="Geek_p"></p>
<script>
function myGeeks() {
// access input element with type = "reset"
var x =
document.getElementById("GeekReset").value;
document.getElementById("Geek_p").innerHTML =
x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Google Chrome
- Mozilla Firefox
- Borde
- Safari
- Ópera
Ejemplo-3: Devolución de la identificación del elemento de entrada con type=”reset”.
<!DOCTYPE html><html> <head> <title> HTML DOM RESET Object </title></head><style> #Geek_p { font-size: 30px; color: green; }</style> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Reset Object</h2> <input type="reset" id="GeekReset" value="Reset form"> <br> <br> <button onclick="myGeeks()"> Click Here </button> <p id="Geek_p"></p> <script> function myGeeks() { // access input element with type = "reset" var x = document.getElementById("GeekReset").id; document.getElementById("Geek_p").innerHTML = x; } </script></body> </html> |
Producción:
Nota: type=”reset” se usa para restablecer todos los valores a su valor inicial usando el “Botón Restablecer” .
Navegadores compatibles:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA