formreset詳解

一、formreset概述

formreset方法可以重置表單中所有表單控制項的值，而不需要用戶一個一個地刪減它們。此方法可用於在JavaScript中編寫一個自定義的重置按鈕。比如一個網頁的註冊表單中有很多輸入框，點擊重置按鈕後就可以把這些輸入框清空，值恢復到初始化的狀態。

formreset屬於HTML DOM，常常與JavaScript結合使用。在HTML，可以通過觸發input type=”reset”提交按鈕來觸發表單重置。但是，在JavaScript中，我們可以通過form.reset()方法來觸發表單重置。formreset和from.reset()的效果是一樣的，都可以重置表單。

二、formreset的用法

formreset方法比較簡單，只要獲得form對象就可以使用了，也就是document.getElementById(formName)。其中，formName可以是HTML表單中的name屬性或者id屬性。

<!DOCTYPE html>
<html>
  <head>
    <title>formreset示例</title>
  </head>
  <body>
    <form name="myForm">
      <label>姓名:</label>
      <input type="text" name="username"><br>
      <label>郵箱:</label>
      <input type="email" name="email"><br>
      <input type="button" value="reset" onclick="resetForm()">
      <input type="submit" value="submit">
    </form>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
      }
    </script>
  </body>
</html>

在這個示例中，formreset方法通過document.getElementById(“myForm”).reset();執行。點擊Reset按鈕後，表單的所有輸入框都會被重置。此外，我們給Reset按鈕添加了一個onclick事件，當點擊Reset按鈕時，會觸發resetForm()函數來執行重置表單的方法。

三、reset和formreset的區別

雖然reset和formreset都可以重置表單，但是區別還是很明顯的。

第一，reset有一個沒有確定值的「警告對話框」，而formreset沒有彈出任何警告對話框。

第二，reset只能重置表單的值，而formreset可以重置表單的默認值。

通過以下示例，可以更好的了解兩種方法的區別。

<!DOCTYPE html>
<html>
  <head>
    <title>reset和formreset示例</title>
  </head>
  <body>
    <form name="myForm">
      <label>姓名:</label>
      <input type="text" name="username" value="張三"><br>
      <label>郵箱:</label>
      <input type="email" name="email" value="zhangsan@example.com"><br>
      <input type="reset" value="reset" onclick="alert('確定要重置表單嗎？')">
      <input type="button" value="formreset" onclick="resetForm()">
    </form>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
      }
    </script>
  </body>
</html>

在這個示例中，我們在姓名和郵箱的輸入框中添加了默認值，如果不修改輸入框中的內容，點擊Reset按鈕時就會彈出警告對話框。而formreset則沒有彈出任何警告對話框，點擊formreset按鈕後，表單會重新回到初始的默認值，即姓名是「張三」，郵箱是「zhangsan@example.com」。

四、formreset的問題和解決方法

由於表單中可能存在大量的輸入控制項，因此表單的重置必須是具有一定的容錯性，能夠適應特定場合的需要。下面介紹一下需要注意的問題和解決方法。

1、重置範圍

使用formreset時，應該清楚重置表單的範圍。如果表單中有多個擁有相同name屬性的表單元素，那麼表單元素的初始值將被設置為最後的表單元素的值，在此之前由於表單數據變更，不會對其產生任何影響。

<!DOCTYPE html>
<html>
  <head>
    <title>重置範圍示例</title>
  </head>
  <body>
    <form id="myForm">
      <label>動物1:</label>
      <input type="radio" name="animal" value="dog">狗
      <input type="radio" name="animal" value="cat">貓
      <br>
      <label>動物2:</label>
      <input type="radio" name="animal" value="dog">狗
      <input type="radio" name="animal" value="cat">貓
      <br>
      <input type="reset" value="reset">
    </form>
  </body>
</html>

在這個示例中，我們有兩個擁有相同name屬性的輸入框，即兩個狗和兩個貓。當點擊reset按鈕的時候，會把表單中的數據重置為裡面的最後一隻動物，即最後一個貓或最後一隻狗。

解決方法：

如果需要對特定的表單數據進行重置，那麼可以選擇在form中增加一個name屬性，用於重置某個元素。比如在上面的示例中，可以將form的name屬性設置為「resetAnimal」，然後點擊reset按鈕的時候，就會重置所有元素，而用form.resetAnimal來重置動物。

2、默認值設置

formreset方法只是將表單元素的值重置到初始狀態，不能將表單的默認值也恢復到初始狀態。

<!DOCTYPE html>
<html>
  <head>
    <title>默認值設置示例</title>
    <script>
      function resetForm() {
        document.getElementById("myForm").reset();
        document.getElementById("myForm").defaultValue="";
      }
    </script>
  </head>
  <body>
    <form id="myForm">
      <label>手機號:</label>
      <input type="tel" name="tel" value="13588888888" readonly>
      <br>
      <input type="reset" value="reset" onclick="resetForm()">
    </form>
  </body>
</html>

在這個示例中，我們把手機號輸入框設置為只讀（readonly），默認值為「13588888888」，點擊reset按鈕後，雖然可以清空輸入框中的內容，但是默認值還是「13588888888」，如果再次查詢，手機號仍然顯示之前的號碼。因此，我們需要在重置表單的時候，將「默認值」也恢復到初始狀態。

3、文件上傳控制項

表單中的文件上傳控制項因為不能通過代碼來設置一個初始值，所以我們無法使用formreset來重置控制項。因為這樣做會讓文件上傳控制項設置為空，無法再重置回原有狀態。因此，文件上傳控制項需要通過另一種方式來重置，例如重新刷新頁面來實現。

五、總結

formreset方法是表單重置的一種簡單、有效的方法。使用formreset可以快速地清空表單中的所有輸入框，恢復到表單最開始時的狀態。在使用formreset時，需要清楚重置表單的範圍，設置表單的默認值，以及文件上傳控制項的問題等。

原創文章，作者：DHOV，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/131246.html