表單類標簽
操作者用於輸入信息,並將信息提交給服務器的標簽集合。
表單標簽介紹
form標簽:表單元素(其余標簽)標簽的容器標簽
input標簽:用於用戶信息輸入的標簽。
button標簽:按鈕標簽。
select/option標簽:下拉框標簽。
textarea標簽:文本域標簽。
lable標簽:修飾輸入元素的文字標簽。
表單元素標簽公有的屬性(html4標准)
id:表單標簽的唯一索引,一般在js中根據唯一索引獲取表單元素。
name:表單標簽的名稱,在提交數據時,以name屬性作為實際值的索引。
disabled:禁用當前表單元素。
readonly:規定表當前表單元素為只讀元素。
value:設定或獲取當前表單元素的輸入值。
accessKey:訪問當前元素的快捷鍵,非表單類屬性,但通常用在表單元素中。
form標簽:輸入標簽項的容器,封裝子輸入標簽,主要作用如下
設定當前表單提交的目標服務器地址。
設定提交的http請求類型。
設定提交數據的編碼格式。
通過js可以在提交前驗證數據的合法性。
method的設定
取值范圍
get:聲明本次請求的目的是從服務器獲取數據。
post:聲明本次請求的目的是向服務器傳送數據。
get與post的區別
目的不同
提交方式不同(一個在響應頭,一個在響應體)
提交數據長度不同,get:不超過255個字符,post理論上不受限制。
安全性get在地址欄顯示信息,不安全。
緩存機制不同,get請求的地址會保存到瀏覽器的訪問歷史記錄中,post不會。
enctype的設定的取值范圍
input標簽:用來聲明一組用於用戶輸入信息的標簽,使用type屬性可以設定輸入的類型。
input標簽的分類
輸入類
text:文本框,type的默認值,
password:密碼框,密碼框的文字以黑點方式顯示。
hidden:隱藏框,元素不顯示,可以通過此標簽提交用戶不可見信息如id等。
私有屬性(具備表單標簽的公有屬性)
maxlength:限定輸入字符的長度。
<input type="text" value="userName" name="text" maxlength="10" /> <input type="password" value="password" name = "password" maxlength="10" />
選擇類
checkbox:多選框。
radio:單選框,表單中name屬性相同的radio,只能有一個被選中。
私有屬性(具備表單標簽的公有屬性)
checked:設定是否被選中,在html中只要聲明此屬性就被選中
<input type="radio" name = "sex" value = "1"/></br> <input type="checkbox" name="fav" checked="false" value="1"/>
文件類
file:文件選擇框。
私有屬性(具備表單標簽的公有屬性)
multiple:設定是否可以多選,在html中只要聲明此屬性就可以多選。
accept:設定選擇文件的mime類型,多個類型用逗號分隔開。
<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>
按鈕類
button:按鈕標簽。
image:圖片按鈕標簽。
submit:提交按鈕標簽,默認行為是提交當前form表單。
reset:重置按鈕標簽,默認行為是當前表單恢復到網頁初始化狀態。
<input type="submit" value = "提交" /> <input type="reset" value = "重置" />
button標簽:按鈕標簽,非閉合標簽,可以在該標簽內部插入其他html元素,因此可以定義出功能強大的按鈕。
私有屬性(具備表單標簽的公有屬性)
type:按鈕的類型。
reset:重置類型按鈕
submit:提交類型按鈕
button:不同按鈕,無默認行為。
<button type="submit"><div>大家好</div></button>
下拉框標簽:使用select、option兩個標簽聲明下拉框。
<select name="pro" > <option value="1">北京</option> <option value="2">上海</option> </select>
select標簽私有屬性
multiple:規定可選擇多個選項。
size:規定可見下拉框選項的數量。
option標簽私有屬性
selected:當前下拉明細項是否被選中。
textarea標簽:設定多行的文本輸入控件。
私有屬性(具備表單標簽的公有屬性)
cols:規定文本區內的可見寬度。
rows:規定文本區內的可見行數。
maxlength:文本輸入的最大字符數量。
<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>
label元素:輸入標簽的文字描述標簽,可以代替輸入標簽響應用戶的操作。
私有屬性說明
for:輸入標簽的id屬性值。
<label for="sex1">女</label> <input id = "sex1" type="radio" name = "sex" value = "1"/>