HTML 表單用于收集用戶輸入，向服務(wù)器傳輸數(shù)據(jù)，使用<form>元素來定義一個HTML表單。
表單可以包含 input, label, menus, textarea, filedset 和 legend 元素。
下面簡單介紹這些表單中常見元素的用法。

1. form 元素

常用屬性：
action：提交表單的地址
method：提交表單使用的方法，一般有g(shù)et和post兩種，具體區(qū)別見 HTML表單 -- 相關(guān)概念

<form action="/getInfo" method="get">
</form>

2. input 元素

input 元素通過 type 屬性來設(shè)置不同的input 類型。

2.1 文本域

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用戶名">
</div>

效果：

其中 placeholder 屬性可以設(shè)置在控件未獲得焦點時顯示的提示信息，而在獲得焦點時提示消失。

2.2 密碼域

<div class="password">
    <label for="password">密碼</label>
    <input id="password" type="password" name="password" placeholder="請輸入密碼">
</div>

效果：

密碼域的輸入框會對輸入信息做掩碼處理。

2.3 復(fù)選框

<div class="hobby">
    <label for="hobby">愛好</label>
    <input type="checkbox" name="hobby" value="dota">dota
    <input type="checkbox" name="hobby" value="travel">旅游
    <input type="checkbox" name="hobby" value="pet">寵物
</div>

效果：

name 屬性為相同的復(fù)選框元素會被分到同一個分組。復(fù)選框的 value 值是必須有的，否則后臺接收到數(shù)據(jù)無法識別究竟勾選了什么值。可以對 input 標簽增加 checked 屬性實現(xiàn)預(yù)選。

2.4 單選按鈕

<div class="sex">
    <label>性別</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</div>

效果：

單選按鈕和復(fù)選框一樣，通過相同的name 屬性值來識別同一組按鈕，value 屬性是必需的。可以對 input 標簽增加 checked 屬性實現(xiàn)預(yù)選。

2.5 下拉列表

<div class="section">
    <label for="car">我的car</label>
    <select id="car" name="car">
        <option value="TT">TT</option>
        <option value="SAAB" selected>薩博</option>
        <option value="GTR">GTR</option>
    </select>
</div>

效果：

option 的 value 屬性是必需的，可以對 option 設(shè)置 selected 屬性實現(xiàn)預(yù)選擇。

2.6 提交按鈕

<input type="submit" value="提交">

效果：

2.7 隱藏字段

<input type="hidden" name="country" value="Norway" />

隱藏字段對于用戶是不可見的。

2.8 重置按鈕

<input type="reset" />

效果：

重置按鈕可以清空表單中填寫的所有內(nèi)容。

2.9 打開文件

<input type="file" name="pic" accept="image/gif" />

效果：

3. label 元素

在介紹 input 元素時，label 元素已出現(xiàn)多次，例如：

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用戶名">
</div>

label 元素為 input 元素定義標注，當(dāng)鼠標選擇該標簽時，關(guān)聯(lián)的元素控件會獲得焦點，for 屬性與關(guān)聯(lián)元素的 id 屬性要相同。

4. textarea 元素

<textarea name="criticism">ddd</textarea>

效果