表單

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屬性, 表示是否選中