表單元素彙總:
form 表示HTML表單
input 用來表示用戶輸入數據的控件
textarea 表示可以輸入多行文本的控件
select 表示用來提供一組固定的選項
option 表示提供一個選項
optgroup 表示一組關聯的option元素
button 表示可用來提交或重置的表單按鈕,或一般按鈕
datalist 定義一組供給用戶的建議值
fieldset 表示一組表單元素
legend 表示fieldset元素的說明性標籤
label 表示表單元素的說明標籤
output 表示計算結果
表單元素解析:
1.form 定義表單
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
action: 表示表單提交的頁面
method: 表示表單的請求方式:有POST和GET兩種。默認GET
enctype: 表示瀏覽器對發送給服務器所採用的編碼格式。有三種:application/x-www-form-urlencoded(默認編碼,不能將文件上傳到服務器),multipart/form-data(用於上傳文件到服務器),text/plain(未規範的編碼,不建議使用,不同瀏覽器理解不同)
name:設置表單名稱,以便程序調用
target:設置提交時的目標位置:_blank , _parent , _self , _top
autocomplete:設置瀏覽器記住用戶輸入的數據,實現自動完成表單。默認爲on自動完成,如果不想自動完成則設置off
novalidate:設置是否執行客戶端數據有效性檢查,後面課程講解
//使用GET或POST提交數據
method="GET/POST"
//喪失自動提示功能
autocomplete="off"
//使用_blank新建目標
target="_blank"
2.input 表示用戶輸入數據
<input name="user">
解釋:input元素默認情況會出現一個單行文本框,有五個屬性
autofocus 讓光標聚焦在某個input元素上,讓用戶直接輸入
disable 禁用input元素
autocomplete 單獨設置input元素的自動完成功能
form 讓表單外的元素和指定的表單掛鉤提交
type
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 讓表單外的分組與表單掛鉤
disable 禁用分組內的表單
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>