構(gòu)建表單 → 服務(wù)器處理 → 配置表單
1股耽、內(nèi)容
元素女轿、驗(yàn)證贪染、提交
2缓呛、元素
⑴form
①name
②autocomplete
③elements
④reset()
⑵label
①htmlFor
②control
③form
⑶input
①type
圖片預(yù)覽
⑷select
創(chuàng)建選項(xiàng)
添加選項(xiàng)
刪除選項(xiàng)
級(jí)聯(lián)下拉選擇器
<!DOCTYPE html>
<html>
<head>
<title>級(jí)聯(lián)選擇器</title>
<meta charset="utf-8"/>
<style>
.demo select{width:200px;margin-right:10px;}
</style>
<script>
function addEvent(node,event,handler){
if (!!node.addEventListener){
node.addEventListener(event,handler,!1);
}else{
node.attachEvent('on'+event,handler);
}
}
</script>
</head>
<body>
<form class="demo" name="demoForm">
<select name="chapter">
<option>請(qǐng)選擇章目錄</option>
</select>
<select name="section">
<option>請(qǐng)選擇節(jié)目錄</option>
</select>
</form>
<script>
// 數(shù)據(jù)定義
var chapters = [
{text:'1. DOM基礎(chǔ)',value:'1'},
{text:'2. 事件模型',value:'2'}
];
var sections = {
1:[
{text:'1.1 文檔樹',value:'1.1'},
{text:'1.2 節(jié)點(diǎn)操作',value:'1.2'},
{text:'1.3 元素遍歷',value:'1.3'},
{text:'1.4 樣式操作',value:'1.4'},
{text:'1.5 屬性操作',value:'1.5'},
{text:'1.6 表單操作',value:'1.6'}
],
2:[
{text:'2.1 事件類型',value:'2.1'},
{text:'2.2 事件模型',value:'2.2'},
{text:'2.3 事件應(yīng)用',value:'2.3'}
]
};
var demoForm = document.forms.demoForm;
// 填充選擇器
function fillSelect(select,list){
for(var i=select.length-1;i>0;i--){
select.remove(i);
}
for(var i=0,l=list.length,data;i<l;i++){
data = list[i];
var option = new Option(
data.text,data.value
);
select.add(option);
}
}
// 切換章目錄
addEvent(
demoForm.chapter,
'change',function(event){
var value = demoForm.chapter.value,
list = sections[value]||[];
fillSelect(demoForm.section,list);
}
);
fillSelect(demoForm.chapter,chapters);
</script>
</body>
</html>```
⑸textarea
