form.reset()如何工作？

Question

我知道这form.reset()会将所有表单字段重置为默认值,但这是如何工作的？

它是浏览器的DOM实现吗？即浏览器知道在上次回发/获取时从服务器发送的最后一个值是什么,并且在reset()调用时,浏览器会重置这些值.

Answer 1

DOM规范告诉我们:

...执行与重置按钮相同的操作.

等等HTML.根据最新的规范(仍然是草案!):

重置表单元素表单时,用户代理必须触发一个名为reset的简单事件,该事件在表单中是可取消的,然后,如果该事件未被取消,则必须调用其表单所有者为表单的每个resettable元素的重置算法,并从表单广播formchange事件.

每个可重置元素定义其自己的重置算法.作为这些算法的一部分对表单控件所做的更改不计入用户引起的更改(因此,例如,不会导致输入事件触发).

而元素的"重置算法"input(例如)是:

...将脏值标志和脏检查标志设置为假,将元素的值设置为值内容属性的值(如果有),否则设置空字符串,将元素的选中性设置为如果元素具有已检查的内容属性,则返回true;如果不具有,则返回false,清空所选文件的列表,然后在类型属性的当前状态定义一个时调用值清理算法.

所以基本上,reset将输入的值设置为其"value" 属性(theElement.getAttribute("value"))的当前值,该值可能与其当前value 属性(theElement.value)不同.这里有实例.

编辑:噢,佩卡指着我们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。