表单操作

一、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

1. 创建选项

• 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 节点操作';
  都生成
  1.2 节点操作

2. 添加选项

• insertBefore

• select.add

  在1.1前插入1.0实例：

  
  

  

  屏幕快照 2016-08-30 下午12.19.03.png

3. 删除选项

• removeChild
• select.remove

>删除1.2

屏幕快照 2016-08-30 下午12.30.42.png

4. 级联下拉选择器

• 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