1. form 表單
| 示例 | <form name="myForm" action="www.baidu.com" method="post" target="_blank" autocomplete novalidate> |
| 屬性 | 說明 |
| name | 表單名稱，不提交 |
| action | 指定目標提交頁面 |
| method | 指定表單的請求方式，取值：get或post |
| target | 指定表單的提交方式，取值如下： _blank，在新標籤頁中打開 _self，在當標籤頁中打開 |
| autocomplete | 使瀏覽器記住用戶輸入的數據，自動填充；默認開啓 |
| novalidate | 不校驗輸入數據 |
2. input 用戶輸入
| 示例 | 用戶名：<input name="user" value="lili" autofocus disabled form autocomplete type> |
| 屬性 | 說明 |
| name | 輸入元素名稱 |
| value | 默認初始值 |
| autofocus | 自動聚焦光標 |
| disabled | 禁用，不可提交 |
| form | 指定掛鉤的表單 |
| autocomplete | 使瀏覽器記住用戶輸入的數據，自動填充；默認開啓 |
| pattern | 正則表達式，驗證時使用 |
| type | input元素的類型，詳見6-15 |
3. label 將inpute控件前的標籤與之一體化，即點擊標籤也可聚焦input控件
| 示例 | <label> 用戶名：<input name="user"> </label> | <label for="user"></label> 用戶名：<input id="user"> |
| 屬性 | 說明 | |
| for | 指定關聯的input控件 | |
4. <fieldset> 對控件進行分組
| 示例 | <fieldset name="set1" form="myForm" disabled> <legend>註冊分組</legend> //爲分組添加標題 <input name="user"> <input name="email"> </fieldset> |
| 屬性 | 說明 |
| name | 分組名稱 |
| form | 指定掛鉤的表單 |
| disabled | 禁用該組所有控件 |
5. <button> 按鈕
| 示例 | <button type="submit" > |
| 屬性 | 說明 |
| type | 按鈕功能類型，取值： - submit 提交 - reset 還原初始值 - button 無實際用途，一般與JS結合使用 |
| form | 指定掛鉤的表單 |
| formaction, formmethod, formtarget, formnovalidate | 覆蓋掛鉤表單的對應屬性 |
6. <input type="text">
| 示例 | <input type="text" name="user" value="me" readonly disabled required maxlength size> |
| 屬性 | 說明 |
| maxlength | 最多可輸入多少個字符 |
| size | 輸入框寬度，以字符個數度量 |
| list | 雙擊輸入框，列出可選輸入，用法： <input type="text" name="user" list="myList"> <datalist id="myList"> <option value="1">appple</option> <option value="2" label="orange"> <option value="banana"> </datalist> |
7. <input type="password">，包含text所有屬性
| 示例 | <input type="password" readonly disabled required maxlength size placeholder="請輸入密碼"> |
| 屬性 | 說明 |
| placeholder | 輸入提示 |
8. <input type="number/range">，
| 示例 | <input type="number" name="num" value="1" readonly required min max step> |
| 屬性 | 說明 |
| min,max | 最小值，最大值 |
| step | 步長，上下調節按鈕的增減值 |
| list | 同text |
9. <input type="date/month/time/week/datetime/datetime-local">，Firefox和IE不支持，推薦使用jQuery等前端庫來實現日曆功能
10. <input type="color">，顏色選擇器，IE不支持
11. <input type="checkbox/radio">，複選框與單選框
| 示例 | 音樂<input type="checkbox" name="music" checked value="1" > 體育<input type="checkboc" name="sport" value="2"> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 |
12. <input type="p_w_picpath">，生成一個圖片按鈕，點擊可提交併傳送分區響應數據
| 示例 | <input type="p_w_picpath" src="img.png" alt="圖片按鈕" > |
| 屬性 | 說明 |
| formaction, formmethod, formtarget, formnovalidate | 覆蓋掛鉤表單的對應屬性 |
13. <input type="email/url">
14. <input type="hidden">，隱藏控件，可提交。示例: <input type="hidden" name="id" value="1">
15. <input type="file">，上傳文件
| 示例 | <input type="file" accept="p_w_picpath/gif, p_w_picpath/png" required> |
| 屬性 | 說明 |
| accept | 可接受的MIME類型 |
16. <select> 下拉列表
| 示例 | <select name="food"> <optgroup label="fruit"> //下拉列表分組 <option value="1">apple</option> <option value="2">orange</option> <option value="3">banana</option> </optgroup> |
| 屬性 | 說明 |
| size | 下拉列表的高度 |
| multiple | 是否可多選（按ctrl健） |
17. <textarea> 多行輸入框
| 示例 | <input type="textarea" name="content" form="myForm" readonly disabled maxlength autofocus required placeholder="please enter your suggestion" rows="10" cols="30" wrap="soft"> |
| 屬性 | 說明 |
| rows, cols | 行數，列數 |
| wrap | 是否插入換行符，取值： - soft 顯示換行，但不插入真正的換行符，默認值 - hard 顯示換行，同時插入真正的換行符 |
18. <output> 與JS結合使用，表示運算結果，示例：
<form action=" name="reg" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> <input type="number" id="num1"> * <input type="number" id="num2"> = <output for="num1 num2" name="res"> </form>