<input type=>
text:在表單中輸入字母、數字等內容,默認寬度為20字符
radio:單選按鈕
checkbox:復選按鈕
<select><option>:下拉菜單,兩個配合一起使用
password:密碼
submit:提交按鈕
button:普通按鈕
image:圖像按鈕
hidden:定義隱藏的輸入字段
reset:重置按鈕,設置單擊,清楚表單中的所有數據
file:定義輸入字段和瀏覽按鈕,用于上傳文件
email類型的應用
專門用于輸入email地址的文本輸入框,在提交表單的時候,會自動驗證email輸入框的值。
url類型的應用
同樣,如果輸入錯誤的網址,按提交按鈕會有提示
number類型的應用
range類型應用
用于輸入包含一定范圍內數字值得文本框,在網頁中顯示為滑動條。
不支持range類型的瀏覽器,則會將其顯示為普通的純文本輸入框
日期類型的應用
1. date類型
用于選取年月日
2. month類型
用于選取年、月,不能選日
3. week類型
用于選取年和 第幾周
<input type=“week”>
4. time類型
選取時間,具體到小時和分鐘
<input type="time">
5. datetime:選取時間、年月日、時間為UTC時間(國際時間)
6. datetime-local:選取時間、年月日、時間為本地時間
search類型的應用
用于輸入搜索關鍵詞的文本框,他不是普通的搜索框,而是任意網頁中的任意一個搜索框
tel類型的應用
用于輸入電話號碼的文本框
<input type="tel">
color類型的應用
用于設置顏色的文本框
<input type="color">
新增的input屬性
1. autocomplete屬性
可以幫助用戶在input類型的輸入框中實現自動完成內容功能,(歷史記錄?)
某些瀏覽器中要打開,瀏覽器本身的這個功能
他有3個值:on off 空值? ?默認on
2. autofocus屬性
在頁面加載時,某表單控件自動獲取焦點,這么控件是<input>標簽,一個頁面只能有一個autofocus屬性
3.form屬性
有了這個屬性,可以把表單內的從屬元素寫在頁面中的任意一個位置,然后需要為這個元素指定form屬性,并設置屬性值為該表單的id,這樣規定了,該表單元素屬于id表單。form屬性適用于所有input輸入類型。
他可以從屬于多個表單
<input type="text" form="form1 form2 form3" />
4. 新增的表單重寫屬性
他們只能適用于submit和image輸入類型
formaction:重寫表單的action屬性
formenctype:重寫表單的enctype屬性
formmethod:重寫表單的method屬性
formnovalidate:重寫表單的novalidate屬性
formtarget:重寫表單的target屬性
5. 新增的width和height屬性
規定用于image類型的input標簽的圖像高度和寬度,只能用于image類型的<image>標簽
<input type="image" width="50" height="50" />
6. 新增的list屬性
list屬性適用于:text search url telephone email date pickers number range color
list屬性的值是需要綁定元素的id值
7. min max step屬性
適用于date、pickers、number和range標簽
8. multiple屬性
在file類型中,只支持上傳單個文件,multiple支持上傳多個文件
9. pattern屬性
用于驗證input類型輸入框中用戶輸入的內容,是否與自定義的正則表達式相匹配。
適用于以下類型的<input>標簽: text、search、url、telephone、email和password
<input type="text" pattern="[0-9]{6}" //必須輸入6位數的數字
10. placeholder屬性
屬性為input標簽的提示功能。
適用于text、search、url、telephone、email和password
11. required屬性
規定輸入框填寫的內容不能為空
新增的form元素
1. datalist元素
用于輸入框提供一個可選的列表,該列表由datalist中的option元素創建,他也可以自行輸入其他內容。
一般都需要使用輸入框的list屬性來引用datalist元素的id。
每一個option元素必須要有value屬性。
2. keygen元素
3. output元素
用于瀏覽器中顯示計算結果或腳本輸出
新增的form屬性
1. autocomplete屬性
用于規定form表單中所有元素都擁有自動完成功能
2. novalidate屬性
用于在提交表單時取消整個表單的驗證,關閉對表單內所有元素的有效性檢車。布爾值
如果只取消表單中少部分內容的驗證,用formnovalidate屬性就行,布爾值