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 。