一、form屬性
1.autocomplete
- on 可選 依據(jù)輸入信息篩選
- off 無可選、提示信息
2.elements
- 該表單子孫表單空間（除圖片按鈕）
如：button,fieldset,input,keygen,object,output,select,textarea -
歸屬于該表單的表單控件（除圖片按鈕）
elements是動(dòng)態(tài)節(jié)點(diǎn)集合
屏幕快照 2016-08-29 下午5.44.19.png
3.length
等價(jià)于 elements.length
用于表示節(jié)點(diǎn)元素包涵元素的個(gè)數(shù)
二、如何獲取form下的節(jié)點(diǎn)
- form[name]
返回id或name為制定名稱的表單控件（除圖片按鈕）
-
如果結(jié)果為空，則返回id為指定名稱的img元素
屏幕快照 2016-08-29 下午5.54.45.png 如果有多個(gè)同名元素，則返回這些元素的動(dòng)態(tài)節(jié)點(diǎn)集合
一旦用指定名稱取過該元素，則不管該元素的id或者name怎么變化，只要節(jié)點(diǎn)還在頁面上均可使用原名稱獲取該元素
三、form方法
- reset()
可重置元素:input,keygen,output,select,textarea
觸發(fā)表單reset事件，阻止該事件的默認(rèn)行為可取消重置
元素重置時(shí)不再觸發(fā)元素上的change和input事件 - submit()
- checkValidity()
四、label
htmlFor
- 關(guān)聯(lián)表單控件激活行為
- 可關(guān)聯(lián)元素：button,input(hidden除外),keygen,meter,output,progress,select,textarea
control - 如果指定了for屬性，則為該for屬性對應(yīng)的ID的可關(guān)聯(lián)元素
- 如果沒有指定for屬性，則為第一個(gè)子孫可關(guān)聯(lián)元素
form - 關(guān)聯(lián)歸屬表單
- 可關(guān)聯(lián)元素：button,fieldset,input,keygen,label,object,output,select,textarea
- 只讀屬性，不可在程序中修改
label.setAttribute('form','newFormId');
五、input
- type
- 控件外觀
- 數(shù)據(jù)類型
- 默認(rèn)為text
>
不同type所支持屬性有差異：
>
本地圖片預(yù)覽
onchage
-
accept
可選值：audio/* video/* image/* 不帶“；”的MIME type 以“."開始的文件后綴名 如果是多個(gè)類型用逗號(hào)分隔
- multiple
- files
屏幕快照 2016-08-30 上午11.12.29.png
六、select
案例：
屏幕快照 2016-08-30 上午11.54.20.png
屬性
屏幕快照 2016-08-30 上午11.58.49.png
- 創(chuàng)建選項(xiàng)
document.createElement
-
new Option([text[,value[,defaultSelected[,selected]]]])
document.createElement('option'); 等價(jià)于 new Option();
new Option('1.2 節(jié)點(diǎn)操作','1.2'); 等價(jià)于
var option = document.createElement('option');
option.value='1.2';
option.textContent='1.2 節(jié)點(diǎn)操作';
都生成
<option value="1.2">1.2 節(jié)點(diǎn)操作</option>
- 添加選項(xiàng)
insertBefore
-
select.add
在1.1前插入1.0實(shí)例：
屏幕快照 2016-08-30 下午12.19.03.png
- 刪除選項(xiàng)
- removeChild
- select.remove
>刪除1.2
- 級(jí)聯(lián)下拉選擇器
- on change
- remove
- add
效果如下：
屏幕快照 2016-08-30 下午12.34.11.png
實(shí)現(xiàn)：
屏幕快照 2016-08-30 下午12.36.42.png
屏幕快照 2016-08-30 下午12.37.40.png
屏幕快照 2016-08-30 下午12.41.29.png
七、 textarea
-
@輸入提示
- on input
- selectionStart
- setRangeText
實(shí)現(xiàn)范例
屏幕快照 2016-08-30 下午12.52.08.png
八、 其它元素
- fields
- button
- keygen
- output
- progress
- meter
九、驗(yàn)證元素
驗(yàn)證
屏幕快照 2016-08-30 下午7.35.09.png
validity
屏幕快照 2016-08-30 下午7.40.44.png
自定義異常(異常情況自定義)
- oninvalid
- setCustomValidity
禁止驗(yàn)證 - novalidate
