表单的基础知识

在 HTML 中，表单是由 form 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 的属性和方法。

acceptCharset: 服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
action: 接受请求的 URL；等价于 HTML 中的 action 特性。
elements: 表单中所有控件的集合（HTMLCollection）。
enctype: 请求的编码类型；等价于 HTML 中的 enctype 特性。
length: 表单中控件的数量。
method: 要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。
name: 表单的名称；等价于 HTML 的 name 特性。
reset(): 将所有表单域重置为默认值。
submit(): 提交表单。
target: 用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">

<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

<!-- 图像按钮 -->
<input type="imgage" src="xxx.jpg">

<!-- 通用重置按钮 -->
<input type="reset" value="Resrt Form">

<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

<div>
    <label for="username">姓名</label>  
    <input id="username" name="username" type="text">   
</div>
<div>
  <label for="age">年龄</label> 
  <input id="age" name="age" type="text">  
</div>
  
//等价于

<div>
  <label>
    姓名
    <input name="username" type="text">
  </label>
</div>
<div>
  <label>
    年龄
    <input type="text" name="age">
  </label>
</div>

当点击姓名和年龄时，文本框就会被选中，两个方法都可以获得同样的效果，通常使用后一种。

表单的基础知识

推荐阅读更多精彩内容