form.reset（）如何工作？

Question

我知道form.reset()會將所有表單字段重置為默認值，但這是如何工作的？

它是瀏覽器的DOM實現嗎？ 即，瀏覽器知道在上一次回發/獲取時從服務器發送的最后一個值是什么，並且當調用reset()時，瀏覽器重置這些值。

Answer 1

DOM規范告訴我們 ：

...執行與重置按鈕相同的操作。

等等HTML。 根據最新的規范 （仍然是草案！）：

重置表單元素表單時，用戶代理必須觸發一個名為reset的簡單事件，該事件在表單中是可取消的，然后，如果該事件未被取消，則必須調用其表單所有者為表單的每個resettable元素的重置算法，並從表單廣播formchange事件。

每個可重置元素定義其自己的重置算法。 作為這些算法的一部分對表單控件所做的更改不計入用戶引起的更改（因此，例如，不會導致輸入事件觸發）。

並且input元素的“重置算法” （例如）是：

...要將臟值標志和臟檢查標志設置為false，請將元素的值設置為值content屬性的值（如果有），否則設置為空字符串，將元素的checkedness設置為如果元素具有已檢查的內容屬性，則返回true;如果不具有，則返回false，清空所選文件的列表，然后在類型屬性的當前狀態定義一個時調用值清理算法。

所以基本上， reset將輸入值設置為其“value” 屬性的當前值（ theElement.getAttribute("value") ），該屬性可能與其當前value 屬性 （ theElement.value ）不同。 這里有實例。

編輯 ：哦，Pekka指出我們在defaultValue 。 非常酷，我寧願使用它而不是getAttribute("value") 。 修改了實例。

Answer 2

reset將使用當前HTML源代碼中的值。 瀏覽器對此請求中的最后一個請求一無所知（這將是一個巨大的安全漏洞）。

如果表單包含以下元素：

<form action="xyz">
    <input type="text" name="fieldA" />
    <input type="text" name="fieldB" value="Thingy" />
    <input type="reset" value="Click me to undo everything" />
    <input type="button" onclick="this.form.reset()" value="Click me too" />
</form>

兩個按鈕都將清空第一個字段，並將第二個字段的值設置為Thingy 。