form.reset() 的真正作用,并不是清空所有输入栏

form 有个方法是 ​​reset()​​​,作用不是清空 ​​<form>​​ 标签中的所有输入栏,而是回到上一次载入页面时的状态。

看例子:

<form id="input-form">
<input type="text">
<input type="text">
<input type="text">
</form>

上面这个在执行 ​​document.querySelector('#input-form').reset()​​ 的时候,会清空所有的 input,因为页面第一次载入的时候就是空的。再看下面:

<form id="input-form">
<input type="text" value="Kyle">
<input type="text">
<input type="text">
</form>

像上面这个在页面载入的时候,第一个 input 已经有值,不管后面你怎么修改,在执行 ​​document.querySelector('#input-form').reset()​​​的时候都会回到初始样子,第一个 input 都会回到里面有 ​​Kyle​​ 值的样子。