一、form屬性

1.autocomplete

• on 可選 依據(jù)輸入信息篩選
• off 無可選、提示信息

2.elements

• 該表單子孫表單空間（除圖片按鈕）
  如：button,fieldset,input,keygen,object,output,select,textarea

• 歸屬于該表單的表單控件（除圖片按鈕）
  elements是動態(tài)節(jié)點集合

  
  
  屏幕快照 2016-08-29 下午5.44.19.png

3.length
等價于 elements.length
用于表示節(jié)點元素包涵元素的個數(shù)

二、如何獲取form下的節(jié)點

屏幕快照 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

  • 如果有多個同名元素，則返回這些元素的動態(tài)節(jié)點集合

  • 一旦用指定名稱取過該元素，則不管該元素的id或者name怎么變化，只要節(jié)點還在頁面上均可使用原名稱獲取該元素

三、form方法

• reset()
  可重置元素:input,keygen,output,select,textarea
  觸發(fā)表單reset事件，阻止該事件的默認行為可取消重置
  元素重置時不再觸發(fā)元素上的change和input事件
• submit()
• checkValidity()

四、label

htmlFor

• 關聯(lián)表單控件激活行為
• 可關聯(lián)元素：button,input(hidden除外),keygen,meter,output,progress,select,textarea
  control
• 如果指定了for屬性，則為該for屬性對應的ID的可關聯(lián)元素
• 如果沒有指定for屬性，則為第一個子孫可關聯(lián)元素
  form
• 關聯(lián)歸屬表單
• 可關聯(lián)元素：button,fieldset,input,keygen,label,object,output,select,textarea
• 只讀屬性，不可在程序中修改
  label.setAttribute('form','newFormId');

五、input

• type
• 控件外觀
• 數(shù)據(jù)類型
• 默認為text

> 

屏幕快照 2016-08-29 下午11.01.24.png

屏幕快照 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. 創(chuàng)建選項

• document.createElement

• new Option([text[,value[,defaultSelected[,selected]]]])

  document.createElement('option'); 等價于 new Option();
  new Option('1.2 節(jié)點操作','1.2'); 等價于
  var option = document.createElement('option');
  option.value='1.2';
  option.textContent='1.2 節(jié)點操作';
  都生成
  <option value="1.2">1.2 節(jié)點操作</option>

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. 級聯(lián)下拉選擇器

• on change
• remove
• add

效果如下：

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

實現(xiàn)：

屏幕快照 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

  實現(xiàn)范例

  
  

  屏幕快照 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