javascript基础学习系列三百零二：重置表单

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135894054

用户单击重置按钮可以重置表单。重置按钮可以使用 type 属性为"reset"的或元素来创建，比如:

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button> 17

这两种按钮都可以重置表单。表单重置后，所有表单字段都会重置回页面第一次渲染时各自拥有的值。如果字段原来是空的，就会变成空的;如果字段有默认值，则恢复为默认值。

用户单击重置按钮重置表单会触发 reset 事件。这个事件为取消重置提供了机会。例如，以下代码演示了如何阻止重置表单:

let form = document.getElementById("myForm");
form.addEventListener("reset", (event) => {
  event.preventDefault();
});

与表单提交一样，重置表单也可以通过 JavaScript 调用 reset()方法来完成，如下面的例子所示:

let form = document.getElementById("myForm");
 // 重置表单 form.reset();

与 submit()方法的功能不同，调用 reset()方法会像单击了重置按钮一样触发 reset 事件。

注意表单设计中通常不提倡重置表单，因为重置表单经常会导致用户迷失方向，如果意外触发则会令人感到厌烦。实践中几乎没有重置表单的需求。一般来说，提供一个取消按钮，让用户点击返回前一个页面，而不是恢复表单中所有的值来得更直观。

表单字段

表单元素可以像页面中的其他元素一样使用原生 DOM 方法来访问。此外，所有表单元素都是表单 elements 属性(元素集合)中包含的一个值。这个 elements 集合是一个有序列表，包含对表单中所有字段的引用，包括所有、、、和元素。elements 集合中的每个字段都以它们在 HTML 标记中出现的次序保存，可以通过索引位置和 name 属性来访问。以下是几个例子:

let form = document.getElementById("form1"); 26
 // 取得表单中的第一个字段
let field1 = form.elements[0];
// 取得表单中名为"textbox1"的字段
let field2 = form.elements["textbox1"];
// 取得字段的数量
let fieldCount = form.elements.length;

表单脚本

如果多个表单控件使用了同一个 name，比如像单选按钮那样，则会返回包含所有同名元素的 HTMLCollection。比如，来看下面的 HTML 代码片段:

  <form method="post" id="myForm">
     <ul>
<li><input type="radio" name="color" value="red">Red</li> <li><input type="radio" name="color" value="green">Green</li> <li><input type="radio" name="color" value="blue">Blue</li>
     </ul>
   </form>

这个 HTML 中的表单有 3 个单选按钮的 name 是"color"，这个名字把它们联系在了一起。在访问 elements[“color”]时，返回的 NodeList 就包含这 3 个元素。而在访问 elements[0]时，只会返回第一个元素。比如:

   let form = document.getElementById("myForm");
    let colorFields = form.elements["color"];
    console.log(colorFields.length);  // 3
let firstColorField = colorFields[0];
let firstFormField = form.elements[0];
console.log(firstColorField === firstFormField);
// true

以上代码表明，使用 form.elements[0]获取的表单的第一个字段就是 form.elements[“color”]
中包含的第一个元素。

表单字段的公共属性

除元素以外，所有表单字段都有一组同样的属性。由于类型可以表示多种表单字段，因此某些属性只适用于特定类型的字段。除此之外的属性可以在任何表单字段上使用。以下列出了这些表单字段的公共属性和方法。
 disabled:布尔值，表示表单字段是否禁用。
 form:指针，指向表单字段所属的表单。这个属性是只读的。
 name:字符串，这个字段的名字。
 readOnly:布尔值，表示这个字段是否只读。
 tabIndex:数值，表示这个字段在按 Tab 键时的切换顺序。
 type:字符串，表示字段类型，如"checkbox"、"radio"等。
 value:要提交给服务器的字段值。对文件输入字段来说，这个属性是只读的，仅包含计算机上
某个文件的路径。
这里面除了 form 属性以外，JavaScript 可以动态修改任何属性。来看下面的例子:

   let form = document.getElementById("myForm");
    let field = form.elements[0];

注意也可以通过表单属性的方式访问表单字段，比如 form[0]这种使用索引和 form [“color”]这种使用字段名字的方式。访问这些属性与访问 form.elements 集合是一样的。这种方式是为向后兼容旧版本浏览器而提供的，实际开发中应该使用 elements。

 // 修改字段的值
field.value = "Another value";
// 检查字段所属的表单 console.log(field.form === form);
// 给字段设置焦点 field.focus();
// 禁用字段 field.disabled = true;
// true
// 改变字段的类型(不推荐，但对<input>来说是可能的) field.type = "checkbox";

这种动态修改表单字段属性的能力为任何时候以任何方式修改表单提供了方便。举个例子，Web 表 18 单的一个常见问题是用户常常会点击两次提交按钮。在涉及信用卡扣款的情况下，这是个严重的问题，
可能会导致重复扣款。对此，常见的解决方案是第一次点击之后禁用提交按钮。可以通过监听 submit 事件来实现。比如下面这个例子:

// 避免多次提交表单的代码
let form = document.getElementById("myForm");
    form.addEventListener("submit", (event) => {
      let target = event.target;
// 取得提交按钮
let btn = target.elements["submit-btn"];
// 禁用提交按钮
  btn.disabled = true;
});

以上代码在表单的 submit 事件上注册了一个事件处理程序。当 submit 事件触发时，代码会取得提交按钮，然后将其 disabled 属性设置为 true。注意，这个功能不能通过直接给提交按钮添加 onclick 事件处理程序来实现，原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的 submit 事件前先触发提交按钮的 click 事件，有些浏览器则会后触发 click 事件。对于先触发 click 事件的浏览器，这个按钮会在表单提交前被禁用，这意味着表单就不会被提交了。因此最好使用表单的 submit 事件来禁用提交按钮。但这种方式不适用于没有使用提交按钮的表单提交。如前所述，只有提交按钮才能触发 submit 事件。
type 属性可以用于除之外的任何表单字段。对于元素，这个值等于 HTML 的 type 属性值。对于其他元素，这个 type 属性的值按照下表设置。