easyui根据select下拉框内容更新表单内容_DOM总结：表单操作

1、构建表单：所有的表单都是以一个form元素开始

我们最好再做一下验证，比如，某些必填项要提示用户。

学习的内容：元素（表单构建的元素）、验证（表单验证相关的操作）、提交（表单提交相关的操作）

form元素

form的两个重要属性：elements 和 length。

即使是在form='a'里面的表单空间，如果指明form='b'，是formb的子孙表单控件，而非A的。

form的length属性，等价于elements.length.这个集合的个数。

通过form来取到它里面的表单控件。

重点说下通过名称来取控件的规则：form[name]

->返回id或name为指定名称的表单控件（除图片按钮）；

->如果结果为空，则返回id为指定名称的img元素。

-> 如果有多个同名的元素，则返回这些元素的动态节点集合。

-> 一旦用指定名称取过该元素，则不管该元素的id或name怎么变化，只要节点还在页面上均可使用原名称获取该元素。

form除了上述属性，还有接口 reset() submit() checkValidity()

reset()

-> 可重置元素：input、keygen、output、select、textarea

-> 当我们在表单做reset操作时，就会触发reset事件，阻止该事件的默认行为可取消重置；

-> 元素重置时不再触发元素上的change和input事件

label元素

指定了label的for属性后，浏览器会自动生成control属性。用来关联这个节点。form指定了这个表单控件属于哪个表单，也是由浏览器动态生成的。

label.htmlFor：

-> 关联表单控件激活行为，点击这个表单控件的行为就和这个表单保持一致。

-> 可关联元素：button、input（除hidden外），keygen、meter、output、progress、select、textarea

这样就可以用各种复杂的图片来美化上传文件表单控件。

label.control

-> 如果指定了for属性，则为该for属性关联对应的id的可关联元素

-> 如果没有指定for属性，则为第一个子孙可关联元素。

label.form

-> 关联归属表单 所有的表单控件也都有这个属性

-> 可关联元素：button、fieldset、input、keygen、label、object、output、select、textarea

-> 对应的form的值是浏览器自己算的，是一个只读属性，不可在程序过程中直接修改。

input元素

input.type 属性

-> 控件外观 不同的type有不同的展示效果

-> 数据类型 不同的type有不同的数据类型，如果不指定，则默认为 text

select 元素

选项列表里面选择一个选项 （子元素：optgroup、 option）

属性：name、value、multiple、options（动态集合）、selectedOptions（所有已经选中的选项的动态集合）、selectedIndex（第一个选中的选项的索引值，如果没有选中的，则返回-1）、add（element [, before]）在指定的元素之前添加选项，如果没有指定参照物，则在最后添加这个选项、remove（[index]）用来表示删除某个选项。

optgroup元素（把一些相关性比较大的选项作为分组）的属性：disabled（当前这个分组里的选项都是不可选的）、label（必选的，我们在分组的时候可以看到某些选项下面归属于哪个分组的，对这个分组的说明，就用label来表示）。

option元素的属性：disabled、label、value、text、index、selected、defaultSelected。

select主要包含对选项的操作：

创建选项（1- document.createElement 2-new Option([text [, value [, defaultSelected [,selected]]]]）

添加（1- insertBefore 2- select.add）

删除（1-removeChild 2-select.remove）

select元素级联下拉选择器：

textarea元素

textarea.selection 选择区域，没有中的时候，selectionStart 和 selectionEnd都是光标位置。当选中某个区域时，selectionStart 和 selectionEnd会到相应的位置。

selectionDirection：键盘上按下了shift功能键或者方向键，如果指定了forward，则shift+左右键改变的是selectionEnd。如果指定是backward，则shift+左右键改变的是selectionStart。

@输入提示

还有一些不常用的元素：fieldset、button、keygen、output、progress、meter等。

支持情况：

How well does your browser support HTML5?​html5test.com

表单验证：

哪些元素需要做表单验证：button、input、select、textarea

以下情况不做验证：1-input 的 type值为 hidden、reset、button之一的话，不用做验证 2-button的type值为reset或者button 也不用做，3-input或textarea 只读 也就是readonly时，不用做验证。4-可验证元素作为datalist的子孙节点时。5-元素为disabled时。

验证时的接口：

1-willvalidate：表单在提交时是否会验证 2-checkValidity 用来验证元素，通过验证会返回true，否则会触发元素上的invalid事件。3-validity 存储验证结果，不同的异常状态都会在这个属性下面标识出来。4-validationMessage 显示验证的异常信息 5-setCustomeValidity（message）传入一个自定义的消息，用来显示异常显示的信息。主要用来做自定义的验证错误。

validity（包含内容）

自定义异常：

1-oninvalid 2-setCustomValidity

禁止验证：

表单隐式提交：

如： 聚焦在输入框时回车提交表单 需要满足任意一个条件：1-表单有非禁用的提交按钮 2-没有提交按钮时，不超过一个类型为text、search、url、email、password、date、time、number的input元素（只有一个这样的元素）。

提交过程：

1- 浏览器根据表单提交的enctype指定的值，构建要提交的数据结构。2- 使用method指定的方式发送数据到action指定的目标上。

浏览器构建提交数据：

1- 浏览器从可提交元素中提取数据组装成指定的数据结构 2- 可提交元素：button、input、keygen、object、select、textarea

提交过程用的编码方式（enctype）：

1-application/x-wwww-form-urlencoded [默认] 2- multipart/form-data 3- text/plain 这三种方式都是在请求的 Content-typ处，组织形式：1- &符号分割 2-字节流 3-回车和键值对

特殊案例：

1-->name='isindex' && type='text' 1- 编码方式为url，作为表单的第一个提交元素，提交时只发送value值，不会包含name

2--> name = '_charset_' && type='hidden' 1-没有设置value值，提交时value自动用当前提交的字符集填充。

提交：

submit（），除了用提交按钮提交表单之外，还可以用这个接口。form.submit()

不管用什么形式去提交表单，都会触发一个onsubmit事件。在这个事件触发的时候，我们可以做一些表单提交之前的数据验证。如果验证没有通过，可以通过这个事件的默认行为来取消表单提交。虽然表单有自带的一些验证规则，但是也有很多情况，自带的规则没有体现出来。这样我们就可以在onsubmit这个事件中去做验证。

无刷新表单提交：

比较常见的可能是ajax的方式，再介绍下另外一种方式：用iframe做中间代理，结合表单的form、target来做无刷新的表单提交。原理：页面上放一个iframe和一个form元素。