JavaScript 小知识-表单对象的常用属性和方法(二)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 JavaScript 表单对象的基础使用, 本文继续来学习 JavaScript 的表单对象的常见属性和方法. 表单对象在实际工作中用的最多的, 基础但是也有些复杂的.

JavaScript 表单对象

JavaScript 表单通常用来搜集信息: 比如登录, 填报信息等.

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

JavaScript 表单对象和 HTML 中的 <form> 标签相对应, 通过 form对象可以获得表单中的各个信息, 可以通过提交或者重置来修改表单的内容.

表单对象的常用属性和方法

客户端的用户可以通过表单来提交填写的数据, 携带上这些数据然后以标准格式向服务器发送请求, 进行数据的提交.

而我们作为开发者, 在完成各种业务需要时, 可以通过设计多个多种表单控件(input select 等等). 设计展示给用户的表单, 用户可以输入相对应的信息, 然后点击 提交 按钮, 就可以向服务器发送这些数据, 服务器在接收到后可进行不同的数据处理, 然后开发者根据这些数据进行业务逻辑的编写, 并展示出来不同的内容页面.

表单对象的常用属性:

1. id: 就是如前文中 定义的 表单的唯一性 id
2. action: 设置或者返回表单的 action 属性
3. enctype: 设置或者返回表单用来编码内容的 MIME 类型
4. method: 设置或返回向服务器发送数据请求的方法
5. target: 设置或返回表单提交结果的 frame 或者 window 名字
6. name: 顾名思义, 就是表单的名字了

表单对象的常用方法:

1. reset(): 重置, 将表单中的各个组件内容重置
2. submit(): 提交 将表单内容提交, 向服务器发送数据

代码演示 小例子:

<form id="myForm" action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">请输入你的名字: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">请输入邮箱: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

<button onclick="submitMyForm()">提交表单</button>

<script>
  funtion submitMyForm() {
    document.getElementById('myForm').submit()
  }
</script>