构建表单 → 服务器处理 → 配置表单
1、内容
元素、验证、提交
2、元素
⑴form
①name
②autocomplete
③elements
④reset()
⑵label
①htmlFor
②control
③form
⑶input
①type
图片预览
⑷select
创建选项
添加选项
删除选项
级联下拉选择器
<!DOCTYPE html>
<html>
<head>
<title>级联选择器</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>请选择章目录</option>
</select>
<select name="section">
<option>请选择节目录</option>
</select>
</form>
<script>
// 数据定义
var chapters = [
{text:'1. DOM基础',value:'1'},
{text:'2. 事件模型',value:'2'}
];
var sections = {
1:[
{text:'1.1 文档树',value:'1.1'},
{text:'1.2 节点操作',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 事件应用',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
