表单

在 HTML 中以 <form> 表示，在 JavaScript 中以 HTMLFormElement 类型表示
HTMLFormElement 类型有如下属性和方法

属性或方法	说明
`acceptCharset`	服务器可以接受的字符集，等价于 HTML 中的 accept-charset 属性
`action`	请求的 URL，等价于 HTML 中的 action 属性
`elements`	表单中所有控件的 HTMLCollection
`enctype`	请求的编码类型，等价于 HTML 中的 enctype 属性
`length`	表单中控件的数量
`method`	HTTP 请求的方法类型，等价于 HTML 中的 method 属性
`name`	表单的名字，等价于 HTML 中的 name 属性
`reset()`	把表单字段重置为各自的默认值
`submit()`	提交表单
`target`	用于发送请求和接受响应的窗口的名字，等价于 HTML 中的 target 属性

1. 获取表单

通过给 <form> 设置 id，在通过 document.getElementById() 获取
通过 document.forms 获取所有表单的集合，再通过索引或表单的名字获取特定的表单
```
const forms = document.forms
const formA = forms[0]
const formB = forms['b']
```

2. 提交表单

点击以下类型的提交按钮

类型	说明
`<input type="submit" value="..." />`	通用提交按钮
`<button type="submit">...</button>`	自定义提交按钮
`<input type="image" src="..." />`	图片按钮

当表单中有上述其中一个按钮，且焦点在表单的某个控件上，按回车键也可以提交按钮

解决在请求阶段，用户重复提交的问题

const form = document.forms[0]
form.addEventListener('submit', e => {
    e.preventDefault() // 阻止默认提交行为

    const submit = form.elements[2] // 获取提交按钮
    if (!submit.disabled) {
        submit.disabled = true

        setTimeout(() => { // 模拟异步请求过程，请求完后恢复提交按钮
            submit.disabled = false
        }, 3000)
    }
})

3. 重置表单

不建议使用，会使用户迷失方向
重置按钮：使用 type 为 reset 的 input 或 button 元素创建
脚本重置：调用 reset() 方法

表单字段

1. 获取字段

所有表单字段元素都是表单 elements 属性的一个值，其是一个有序的列表，可以用过索引位置和 name 属性访问

const form = document.forms[0]

const field1 = form.elements[0]
const textbox = form.elements['textbox']

const fieldLength = form.length

2. 公共属性

属性	说明
`disabled`	布尔值，表示表单字段是否禁用
`form`	指针，指向表单字段所属的表单，只读
`name`	字符串，表示字段的名字
`readOnly`	布尔值，表示这个字段是否只读
`tabIndex`	数值，表示这个字段在按 Tab 键时的切换顺序
`type`	字符串，表示字段类型
`value`	要提交给服务器的字段值

3. 公共方法

focus()：把焦点设置到表单字段上
blur()：从元素上移除焦点

HTML5 中定义了 autofocus 属性，可以自动为带有该属性的元素设置焦点
保证兼容
window.addEventListener('load', () => {
    const field = document.forms[0].elements[0]
    if (!field.autofocus) {
        field.focus()
    }
})

4. 公共事件

blur：在字段失去焦点时触发
change：在 <input> 和 <textarea> 元素的 value 发生变化且失去焦点时触发，或者在 <select> 元素中选中项发生变化时触发
focus：在字段获得焦点时触发