JavaScript 是一種廣泛使用的程式語言，它可以與 HTML 和 CSS 相結合，使 Web 網站和 Web 應用程式變得更加互動性和動態化。然而，在使用 JavaScript 時，您可能會遇到重置表單的需要，這是一個常見的需求。在本文中，我們將探討 JavaScript 中的重置按鈕及其使用方法。
首先，需要明確的是，form 元素是 HTML 表單中最重要的元素之一，它用於捕獲使用者輸入的資料並將其提交到伺服器進行處理。在 form 元素中，可以新增按鈕，包括按鈕、提交按鈕、重設按鈕等。其中，重置按鈕的作用是將表單中的所有資料重設為預設值或空值。
在 JavaScript 中，有幾種方法可以實現重置按鈕的功能。以下我們將逐一介紹這些方法。
在JavaScript 中，表單元素有一個內建的方法叫做reset()，可以用來重置表單中的所有輸入域和選項。例如：
<form id="myForm">
<input type="text" id="username" name="username" value="ABC">
<select id="country" name="country">
<option value="">请选择国家</option>
<option value="China">中国</option>
<option value="USA">美国</option>
</select>
<input type="reset" value="Reset">
</form>
<script>
var myForm = document.getElementById("myForm");
myForm.addEventListener("reset", function(event){
console.log("表单已重置");
});
</script>在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 reset 類型的按鈕。當使用者按一下重設按鈕時，會觸發表單元素的 reset() 方法，從而將表單中的所有輸入網域和選項重設為預設值或空值。同時，上面的 JavaScript 程式碼也監聽了表單的 reset 事件，當表單重置時，會列印一則訊息到控制台中。
另一種實作重設按鈕功能的方法是，建構一個新的表單並將其替換舊表單。例如：
<form id="myForm">
<input type="text" id="username" name="username" value="ABC">
<select id="country" name="country">
<option value="">请选择国家</option>
<option value="China">中国</option>
<option value="USA">美国</option>
</select>
<input type="button" value="Reset" onclick="resetForm()">
</form>
<script>
function resetForm() {
var oldForm = document.getElementById("myForm");
var newForm = document.createElement("form");
newForm.id = "myForm";
oldForm.parentNode.replaceChild(newForm, oldForm);
}
</script>在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 button 類型的按鈕。當使用者點擊重設按鈕時，會呼叫resetForm() 函數，其中，首先取得了舊表單元素，然後使用createElement() 方法建立了一個新的表單元素，並使用replaceChild() 方法將新表單元素替換舊表單元素。這樣，就等於是將表單全部重設了。
要注意的是，在使用這種方法時，可能會損失一些表單屬性、事件處理程序等信息，因此只適用於簡單的表單重置。
最後一種實作重設按鈕功能的方法是，手動重設表單元素的值。例如：
<form id="myForm">
<input type="text" id="username" name="username" value="ABC">
<select id="country" name="country">
<option value="">请选择国家</option>
<option value="China">中国</option>
<option value="USA">美国</option>
</select>
<input type="button" value="Reset" onclick="resetForm()">
</form>
<script>
function resetForm() {
var inputs = document.getElementById("myForm").getElementsByTagName("input");
for(var i=0; i<inputs.length; i++) {
switch(inputs[i].type) {
case "text":
inputs[i].value = "";
break;
case "checkbox":
case "radio":
inputs[i].checked = false;
break;
default:
break;
}
}
var selects = document.getElementById("myForm").getElementsByTagName("select");
for(var i=0; i<selects.length; i++) {
selects[i].selectedIndex = 0;
}
}
</script>在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 button 類型的按鈕。當使用者按一下重設按鈕時，會呼叫resetForm() 函數，其中，首先取得表單元素的所有輸入網域和下拉列錶框，並遍歷每個元素，將它們的值都重設為預設值或空值。具體來說，對於文字方塊和密碼框，將它們的值設為空；對於單選框和複選框，將它們的選取狀態設為未選取；對於下拉列錶框，將它們的選取項設為第一項。
需要注意的是，如果表單中包含其他類型的表單元素，如文字網域、密碼網域、圖片網域等，則還需要根據具體情況對它們進行重設。
綜上所述，JavaScript 中有多種方法可以實現表單的重置，其中，表單元素自帶的 reset() 方法是最為簡單和直接的。但如果您需要更靈活自訂重置的功能，可以使用後兩種方法。無論哪種方法，都可以輕鬆實現表單重置的需求，為使用者帶來更好的體驗。
以上是JavaScript裡有重置按鈕嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
