html5表單新增的其他屬性

2021-10-06 06:56:23 字數 2236 閱讀 6802

下面來看**

placeholder

placeholder : 提示文字,提示佔位

autofocus

autofocus : 自動獲取焦點

autocomplete

autocomplete: 自動完成: on 開啟 off 關閉

1.必須成功提交過 : 提交過才會記錄

2.當前autocomplete的元素必須有 name 屬性

required

required : 必須輸入,如果沒有輸入,則會阻止當前資料提交

pattern

pattern:正規表示式驗證

multiple

multiple : 可以選擇多個檔案 在type為file時

multiple : 在email中,允許輸入多個郵箱位址,以逗號分開

form(有用重點)

form指定表單id,那麼在將來指定id號的表單進行資料提交的時候,也會將當前表單元素一起提交

<

!doctype html>

"en"

>

"utf-8"

>

title<

/title>

<

/head>

"" id=

"myform"

>

<

!-- placeholder : 提示文字,提示佔位--

>

<

!-- autofocus : 自動獲取焦點--

>

<

!-- autocomplete: 自動完成: on 開啟 off 關閉

1.必須成功提交過 : 提交過才會記錄

2.當前autocomplete的元素必須有 name 屬性--

>

使用者名稱:

"text" placeholder=

"請輸入使用者名稱" autofocus

autocomplete=

"on" name=

"username"

>

<

!-- tel並不會實現驗證,僅僅是在移動端彈出數字鍵盤--

>

<

!-- required : 必須輸入,如果沒有輸入,則會阻止當前資料提交--

>

<

!-- pattern:正規表示式驗證

*: 代表任意個

?: 代表0或1個

+: 代表1或多個

|: 轉譯元字元--

>

手機號:

"tel" name=

"userphone" required pattern=

"^(\+86)?1\d$"

>

<

!-- multiple : 可以選擇多個檔案--

>

檔案:"file" name=

"photo"

>

<

!-- multiple : 在email中,允許輸入多個郵箱位址,以逗號分開--

>

郵箱:"email" name=

"email" multiple>

<

!-- 提交: 可以在瀏覽器的network中檢視提交的東西--

>

"submit" multiple>

<

/form>

<

!-- 下面這個表單元素並沒有包含在form中,預設情況下面的表單資料並不會進行提交--

>

<

!-- form指定表單id,那麼在將來指定id號的表單進行資料提交的時候,也會將當前表單元素一起提交--

>

位址:"text" name=

"address" form=

"myform"

>

<

/body>

<

/html>

Html5中的表單新增屬性

name 標識表單提交時的key值 min 輸入框中的最小值 max 輸入框中的最大值 step 增加 減小的步長 文字框會自動校驗是否符合郵箱的正規表示式 效果圖 顯示數字的範圍框 在h5中,不用增加外掛程式,就能實現日曆的功能,當前只有谷歌提供了原生的日曆 屬性值 week 周 date 日期 ...

HTML5新增表單的property屬性

html5中新增表單的property多用於表單驗證 validity物件上面有8個屬性值 通過下面的invalid可以檢視驗證是否通過,如果八種驗證都通過返回true,一種驗證失敗返回false 首先要給元素節點新增事件監聽 node.addeventlistener invalid fn1,fa...

HTML5新增input表單的屬性

html5新增input表單的屬性 input表單屬性 required required 此處內容不能為空,必填 placeholder 請輸入使用者名稱 方框空裡的灰色 提示語 請輸入使用者名稱 為提示語舉例 autofocus autofocus 網頁載入出來後,游標自動聚焦到需要輸入的框裡 ...