表单
HTML <form>
元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
name属性
表单当中的表单控件(input, select等)的name属性非常重要
我们可以通过name直接找到表单控件
<form action="" id="form">
<input type="text" name="text1" value="内容">
</form>
<script>
var form = document.getElementById('form');
var alert(form.text1.value);//内容
</script>
对于多个radio,相同的name把他们划分到一组
使用name属性获取到的是多个radio的集合
<form action="" id="form">
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女"/>女
</form>
<script>
var form = document.getElementById('form');
for(var i=0; i<form.sex;i++){
alert(form.sex[i].value);
}
</script>
对于多个checkbox,也是一样
onchange事件
表单控件都有onchange事件,当值发生改变的时候触发
type="text" : 当光标离开元素的时候再去判断值是否发生了变化,如果发生了变化则触发onchange事件
<form id="form">
<input type="text" name="username" />
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked />女
<input type="checkbox" name="aihao" value="电影" />电影
<input type="checkbox" name="aihao" value="音乐" />音乐
<input type="checkbox" name="aihao" value="体育" />体育
<select name="city" value="">
<option>请选择一个城市</option>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</form>
checked
radio checkbox 有checked属性, 表示是否选中
selected
<select>
标签的<option>
有selected属性, 表示是否选中