第 10 章 表單元素[上]
第 10 章 表單元素[上]
學習要點：
1.表單元素解析
本章主要探討 HTML5 中表單元素，表單元素用於獲取用戶的輸入數據。
一．表單元素解析
1.<form>定義表單
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
解釋：<form>元素主要是定義本身是一組表單。
Action：表示表單提交的頁面
Method：表示表單的請求方式：有 POST 和 GET 兩種，默認 GET
Enctype：
pplication/x-www-form-urlencoded（默認編碼，不能將文件上傳到服務器）、
multipart/form-data（用於上傳文件到服務器）、
text/plain（未規範的編碼，不建議使用，不同瀏覽器理解不同）
Name：設置表單名稱，以便程序調用
Target：設置提交時的目標位置：_blank、_parent、_self、_top
Autocomplete：設置瀏覽器記住用戶輸入的數據，實現自動完成表單。默認為 on 自動完成，
如果不想自動完成則設置 off。
Novalidate：設置是否執行客戶端數據有效性檢查
//使用 get 提交數據
method="get"
//喪失自動提示功能
autocomplete="off"
//使用_blank 新建目標
target="_blank"
2.<input>表示用戶輸入數據
<input name="user">
解釋：<input>元素默認情況會出現一個單行文本框，有五個屬性。
Autofocus：讓光標聚焦在某個 input 元素上，讓用戶直接輸入
Disabled：禁用 input 元素
Autocomplete:單獨設置 input 元素的自動完成功能
Form:讓表單外的元素和指定的表單掛鉤提交
Type:input 元素的類型
Name:定義 input 元素的名稱，以便接收到相應的值
//聚焦光標
<input name="user" autofocus>
//禁用 input
<input name="user" disabled>
//禁止自動完成
<input name="user" autocomplete="off">
//表單外的 input
<form method="get" id="register">
...
</form>
<input name="email" form="register">
3.<label>添加說明標簽
<p><label for="user">用戶名：<input id="user" name="user"></label></p>
解釋：<label>元素可以關聯 input，讓用戶體驗更好。且更加容易設置 CSS 樣式。
4.<fieldset>對表單進行編組
<fieldset>...</fieldset>
解釋：<fieldset>元素可以將一些表單元素組織在一起，形成一個整體。
Name:給分組定義一個名稱
Form:讓表單外的分組與表單掛鉤
Disabled:禁用分組內的表單
5.<legend>添加分組說明標簽
<fieldset>
<legend>註冊表單</legend>
</fieldset>
解釋：<legend>元素給分組加上一個標題。
6.<button>添加按鈕
<button type="submit"></button>
解釋：<button>元素添加一個按鈕，type 屬性有如下幾個值：
Submit:表示按鈕的作用是提交表單，默認
Reset:表示按鈕的作用是重置表單
Button:表示按鈕為一般性按鈕，沒有任何作用
//提交表單
<button type="submit">提交</button>
//重置表單
<button type="reset">重置</button>
//普通按鈕
<button type="button">按鈕</button>
對於 type 屬性為 submit 時，按鈕還會提供額外的屬性。
Form:指定按鈕關聯的表單
Formaction：覆蓋 form 元素的 action 屬性
Formenctype：覆蓋 form 元素的 enctype 屬性
Formmethod：覆蓋 form 元素的 method 屬性
Formtarget：覆蓋 form 元素的 target 屬性
Formnovalidate：覆蓋 form 元素的 novalidate 屬性
//表單外關聯提交
<button type="submit" form="register">提交</button>
第 10 章 表單元素[上]