首頁 > web前端 > 前端問答 > html5表單新特性有哪些

html5表單新特性有哪些

青灯夜游
發布: 2021-12-17 14:01:52
原創
3059 人瀏覽過

html5表單新特性有:1、新增input type類型值(email、url、number、tel、color、date等);2、新增表單元素屬性(placeholder、autofocus、form、min 、max、patter等)。

html5表單新特性有哪些

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

H5的表單新特性可以分為兩大類。

一、10個input的type值

1、email:郵件輸入網域,在表單提交時提供簡單的郵箱格式驗證,並彈出一個提示窗口。

2、url:位址輸入網域,在表單提交時提供簡單的URL位址格式驗證,並彈出一個提示視窗。

3、number:數位輸入域。 (可設定min、max、step)

4、tel:電話號碼輸入域,在手機瀏覽器中彈出數位輸入域。

5、search:搜尋輸入域,在手機瀏覽器右下角呈現搜尋按鍵。

6、range:範圍選擇控制項。

7、color:顏色選擇控制項。

8、date/month/week:時間選擇控制項。

二、11個表單元素新屬性

1、autocomplete:自動補全,是否自動記錄先前提交的數據,以用於下一次輸入建議。

2、placeholder:佔位符,用於在輸入框中顯示提示性文字,與value不同,不能被提交。

3、autofocus:自動獲得輸入焦點。

4、multiple:是否允許多個輸入值,若宣告該屬性,那麼輸入框中允許輸入多個以逗號隔開的值。

5、form:值為某個表單的id,若設定,則該輸入域可放在該表單外。

6、required:在表單提交時會驗證是否有輸入,沒有則會彈出提示訊息。

7、maxlength:限制最大長度,只有在有輸入的情況下才有用,不區分中英文。

7.5、minlength:限制最小長度,但它不是H5標準屬性,僅部分瀏覽器支援。

8、min:限定輸入數字的最小值。

9、max:限定輸入數字的最大值。

10、step:限定輸入數字的步長,與min連用。

11、pattern:指定一個正規表示式,對輸入進行驗證。 (正規預設首尾加^$)

相關推薦:《html影片教學

以上是html5表單新特性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板