HTML5表單

<input type=>

text:在表單中輸入字母、數字等內容,默認寬度為20字符

radio:單選按鈕

checkbox:復選按鈕

<select><option>:下拉菜單,兩個配合一起使用

password:密碼

submit:提交按鈕

button:普通按鈕

image:圖像按鈕

hidden:定義隱藏的輸入字段

reset:重置按鈕,設置單擊,清楚表單中的所有數據

file:定義輸入字段和瀏覽按鈕,用于上傳文件


email類型的應用

專門用于輸入email地址的文本輸入框,在提交表單的時候,會自動驗證email輸入框的值。


url類型的應用

同樣,如果輸入錯誤的網址,按提交按鈕會有提示


number類型的應用



range類型應用

用于輸入包含一定范圍內數字值得文本框,在網頁中顯示為滑動條。

不支持range類型的瀏覽器,則會將其顯示為普通的純文本輸入框





日期類型的應用

1. date類型

用于選取年月日

date

2. month類型

用于選取年、月,不能選日


month

3. week類型

用于選取年和 第幾周

<input type=“week”>

week

4. time類型

選取時間,具體到小時和分鐘

<input type="time">


time

5. datetime:選取時間、年月日、時間為UTC時間(國際時間)

6. datetime-local:選取時間、年月日、時間為本地時間


search類型的應用

用于輸入搜索關鍵詞的文本框,他不是普通的搜索框,而是任意網頁中的任意一個搜索框

tel類型的應用

用于輸入電話號碼的文本框

<input type="tel">

color類型的應用

用于設置顏色的文本框

<input type="color">



新增的input屬性

1. autocomplete屬性

可以幫助用戶在input類型的輸入框中實現自動完成內容功能,(歷史記錄?)

某些瀏覽器中要打開,瀏覽器本身的這個功能

他有3個值:on off 空值? ?默認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屬性就行,布爾值

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容