資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM 表單 reset() 方法
HTML DOM 表單 reset() 方法用於重置所有 表單 元素的值並顯示用表單元素的 value 屬性指定得預設值。它充當清除表單資料的重置按鈕，且不使用任何型別的引數。
語法
表單 reset() 方法的語法如下 −
formObject.reset()
示例
讓我們看一個表單 reset() 方法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ResetForm() {
document.getElementById("FORM1").reset();
document.getElementById("Sample").innerHTML="Form has been reset";
}
</script>
</head>
<body>
<h1>Form reset() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>
<p id="Sample"></p>
</body>
</html>
輸出
這將產生以下輸出 −
點選重置按鈕 −
在上面的示例中，我們 −
首先建立了一個 id 為 FORM1、method 為 post、action 為 /sample_page.php 的表單。它包含兩個 type 為 text 的輸入框、一個提交按鈕和一個重置按鈕。
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> <input type="button" onclick="ResetForm()" value="RESET"> </form>
點選重置按鈕時執行 ResetForm() 函式。
<input type="button" onclick="ResetForm()" value="RESET">
ResetForm() 方法使用 文件物件 getElementById() 方法 獲取 <form> 元素，然後對其呼叫 reset() 方法。這將清除表單元素中的所有資料。最後，使用 innerHTML 屬性在 ID 為 “Sample” 的段落中顯示反映此更改的預期文字 −
function ResetForm() {
document.getElementById("FORM1").reset();
document.getElementById("Sample").innerHTML="Form has been reset";
}
更新日期： 2023-11-18
1K+ 瀏覽量
廣告