表单

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>