这是我参与更文挑战的第9天，活动详情查看：更文挑战

现代前端开发中，借助 MVVM 框架和 XHR，我们可以非常灵活的向服务端提交数据，因而表单（form）的使用越来越少，但是在语义性上和老项目维护中，form 仍然扮演者重要的角色，所以我们还是有必要学习 form 的特性。

一、基本知识

表单由 <form> 标签表示，对应的 JS 类型是 HTMLFormElement（继承自 HTMLElement），它有一些常用的属性和方法：

• name：表单名称
• elements：表单中所有控件集合（HTMLCollection）
• action：接受请求的 URL
• method：请求类型，例如 get、post
• reset：将表单域重置为默认值
• submit：提交表单

使用 document.forms 可以获取页面所有表单。

二、提交和重置

使用 <input> 和 <button> 都可以提交表单，但需要把它们的 type 设为 ‘submit’，在浏览器将请求发给服务器之前会触发 submit 事件，这样我们可以先校验在决定是否提交，阻止默认行为就可以取消提交，例如：

const form = document.getElementById('myForm')
form.addEventListener('submit', function(event){
  // 参数校验
  //
  // 取消提交
  e.preventDefault(event);
})
复制代码

除了使用 input 和 button，还可以直接调用 submit 方法提交：

const form = document.getElementById('myForm')

// 提交
form.submit()
复制代码

重置表单只需将 input 或 button 的 type 改成 ‘reset’，整体和 submit 类似。

三、表单字段

可以像访问页面其他元素一样使用原有 DOM 方法访问表单元素，此外，每个表单都有 elements 属性，表示所有元素集合，例如：

<form id="form1">
  <input name="textbox1" value="xxx">
</form>
复制代码

const form = document.getElementById('form1')

// 下标获取
const field1 = form.elements[0];

// name 获取
field2 = form.elements['textbox1']
复制代码

当多个表单控件使用相同的 name，则会返回一个 NodeList：

<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>
复制代码

const form = document.getElementById("myForm");

const colorFields = form.elements["color"];
alert(colorFields.length);  //3

const firstColorField = colorFields[0];
const firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true
复制代码

四、感想

form 在早期是前端向服务端提交数据的一种重要方式，但是它有引起页面刷新、使用不灵活等问题，在现代前端开发中很少再用它提交数据。但是我们仍然可以使用 form 自带的 submit 和 reset 机制来简化表单校验和重置，并且使用它也有利于代码语义性，因此还是很有必要了解一些 form 的基本知识。