表单

表单

• 在 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. 获取表单

1. 通过给 <form> 设置 id，在通过 document.getElementById() 获取

2. 通过 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：在字段获得焦点时触发