一、form属性
1.autocomplete
- on 可选 依据输入信息筛选
- off 无可选、提示信息
2.elements
- 该表单子孙表单空间（除图片按钮）
如：button,fieldset,input,keygen,object,output,select,textarea -
归属于该表单的表单控件（除图片按钮）
elements是动态节点集合
屏幕快照 2016-08-29 下午5.44.19.png
3.length
等价于 elements.length
用于表示节点元素包涵元素的个数
二、如何获取form下的节点
屏幕快照 2016-08-29 下午5.49.43.png
屏幕快照 2016-08-29 下午5.50.05.png
- form[name]
返回id或name为制定名称的表单控件（除图片按钮）
-
如果结果为空，则返回id为指定名称的img元素
屏幕快照 2016-08-29 下午5.54.45.png 如果有多个同名元素，则返回这些元素的动态节点集合
一旦用指定名称取过该元素，则不管该元素的id或者name怎么变化，只要节点还在页面上均可使用原名称获取该元素
三、form方法
- reset()
可重置元素:input,keygen,output,select,textarea
触发表单reset事件，阻止该事件的默认行为可取消重置
元素重置时不再触发元素上的change和input事件 - submit()
- checkValidity()
四、label
htmlFor
- 关联表单控件激活行为
- 可关联元素：button,input(hidden除外),keygen,meter,output,progress,select,textarea
control - 如果指定了for属性，则为该for属性对应的ID的可关联元素
- 如果没有指定for属性，则为第一个子孙可关联元素
form - 关联归属表单
- 可关联元素：button,fieldset,input,keygen,label,object,output,select,textarea
- 只读属性，不可在程序中修改
label.setAttribute('form','newFormId');
五、input
- type
- 控件外观
- 数据类型
- 默认为text
>
屏幕快照 2016-08-29 下午11.01.24.png
不同type所支持属性有差异：
>
屏幕快照 2016-08-29 下午11.02.36.png
屏幕快照 2016-08-29 下午11.03.48.png
本地图片预览
onchage
-
accept
可选值：audio/* video/* image/* 不带“；”的MIME type 以“."开始的文件后缀名 如果是多个类型用逗号分隔
- multiple
- files
屏幕快照 2016-08-30 上午11.12.29.png
六、select
案例：
屏幕快照 2016-08-30 上午11.54.20.png
属性
屏幕快照 2016-08-30 上午11.58.49.png
- 创建选项
document.createElement
-
new Option([text[,value[,defaultSelected[,selected]]]])
document.createElement('option'); 等价于 new Option();
new Option('1.2 节点操作','1.2'); 等价于
var option = document.createElement('option');
option.value='1.2';
option.textContent='1.2 节点操作';
都生成
<option value="1.2">1.2 节点操作</option>
- 添加选项
insertBefore
-
select.add
在1.1前插入1.0实例：
屏幕快照 2016-08-30 下午12.19.03.png
- 删除选项
- removeChild
- select.remove
>删除1.2
屏幕快照 2016-08-30 下午12.30.42.png
- 级联下拉选择器
- on change
- remove
- add
效果如下：
屏幕快照 2016-08-30 下午12.34.11.png
实现：
屏幕快照 2016-08-30 下午12.36.42.png
屏幕快照 2016-08-30 下午12.37.40.png
屏幕快照 2016-08-30 下午12.41.29.png
七、 textarea
屏幕快照 2016-08-30 下午12.46.26.png
-
@输入提示
- on input
- selectionStart
- setRangeText
实现范例
屏幕快照 2016-08-30 下午12.52.08.png
八、 其它元素
- fields
- button
- keygen
- output
- progress
- meter
九、验证元素
屏幕快照 2016-08-30 下午7.27.01.png
验证
屏幕快照 2016-08-30 下午7.35.09.png
validity
屏幕快照 2016-08-30 下午7.40.44.png
自定义异常(异常情况自定义)
- oninvalid
- setCustomValidity
禁止验证 - novalidate
