前端第八次培训（JS表单）

表单基础
Web表单在HTML中以form元素表示，在js中以HTMLFormElement类型表示

HTMLFormElement类型继承自HTMLElement，但是它有自己的属性和方法：

​ 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属性

可以通过document.forms获取页面上所有的表单元素，然后使用表单名来访问：

let forms = document.forms;forms[0];forms["form1"];
1
提交表单
提交表单可以通过type属性为submit的input或button来定义，也可以通过type属性为image的input元素定义

有提交按钮的表单在其控件取得焦点时（textarea除外），回车也能触发提交表单

通过js的form.submit()方法提交表单不会触发submit事件

为了防止用户多次提交表单，可以在用户点击之后禁用按钮或者通过onsubmit事件处理程序取消之后的表单提交

重置表单
通过type属性为reset的input或button，用户可以重置表单

通过js的form.reset()方法重置表单会触发reset事件

表单字段
所有表单元素都是表单elements属性中包含的一个值，这个elements集合是一个有序列表

所有的input、textarea、button、select、fieldset元素都被包含在elements集合中，可以通过索引和name访问

let form = document.getElementById('form');form[0];form['input'];form.length;form.input;
同name元素会作为一个集合返回

1、表单字段的公共属性
除fieldset元素外，所有的表单字段都有一组相同的属性：

​ disabled：布尔值，表示表单字段是否禁用

​ form：指针，指向表单字段所属的表单，只读

​ name：字符串，这个字段的名字

​ readOnly：布尔值，表示这个字段是否只读

​ tabIndex：数值，表示这个字段在按Tab键时的切换顺序

​ type：字符串，表示字段类型

​ value：要提交给服务器的字段值，对文件输入来说这个字段是只读的，仅包含路径

type属性的特殊值：

​ 单选列表（<select></select>）：select-one、多选列表（<select multiple></select>）：select-multiple

对于input和button元素，可以动态修改type属性，但是select元素的type属性是只读的

2、表单字段的公共方法
每个表单字段都有两个公共方法：focus()和blur()

focus():

焦点在表单字段上时，该字段可以响应键盘事件

但是如果调用focus的字段type为hidden，或者该字段被CSS属性display或visibility隐藏了，则会出错

HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点，而无需使用js

可以在使用前检测表单是否设置了autofocus属性，以及排除不支持的浏览器（不支持的浏览器返回空字符串），如果表单有这个属性则返回true

通过将tabIndex属性设置为-1在调用focus()，也可以给任意元素设置焦点，只有Opera不支持

blur():

移除元素上的焦点

这两个方法都会触发focus和blur事件

3、表单字段的公共事件
所有字段还支持以下三个事件：

​ blur：字段失去焦点时触发

​ change：在input和textarea元素的value变化且失去焦点时触发，或者在select元素中选项发生变化时触发

​ focus：字段获得焦点时触发

文本框编程
单行input元素、多行textarea元素

input元素省略type会以text作为默认值，size指定文本框宽度（这个宽度是以字符数计量的），value指定文本框的初始值，maxLength属性用于指定文本框允许的最多字符数

textarea元素总是会创建多行文本框，rows属性指定这个文本框的高度（以字符数计量），以cols属性指定文本框宽度（以字符数计量），textarea初始值必须包含在元素之间；textarea不能在HTML中指定最大允许字符数；两种类型的文本框内容都在value中

应该使用value属性而不是DOM方式读写文本框的值，对value属性的修改也不会总体现在DOM中