第一個知識點:表單的屬性及總結(jié)
第二個知識點:H5新增的表單控件和屬性以及總結(jié)
第一個知識點:
我們常見的表單驗證有哪些呢
text 文本框標(biāo)簽
password 密碼框
checkbox 多選框
radio 單選框
button 按鈕
submit 提交按鈕
![](/d/20211016/fd888cd48a290d736a142302de39c45c.gif)
以上是我們常用的一些form屬性
第二個知識點:H5新的輸入型控件
(一)email:電子郵箱文本框,跟普通的沒什么區(qū)別
1.當(dāng)輸入不是郵箱的時候,驗證不通過
2.移動端鍵盤會有變化
![](/d/20211016/bdc52da7101b54b41e0560718bc875a0.gif)
(二)tel:電話號碼
1.主要在移動端,一個鍵盤的切換
![](/d/20211016/b80b008ac0aeb9fc4b24136f2cb1ff11.gif)
(三)url:網(wǎng)頁的URL
![](/d/20211016/3345f3644863c569d8ff4019a5147e7d.gif)
輸入正確的網(wǎng)址
(四)sear:搜索引擎
1.chrome下輸入文字后,會多出一個關(guān)閉的x
![](/d/20211016/16f63a12540421db888da8bda32a433d.gif)
(五)range:特定范圍內(nèi)的數(shù)值選擇器
1.min、max、step(步數(shù))
2.例子:用js來顯示當(dāng)前數(shù)值
![](/d/20211016/757b556f5f454e018b04a41a25928555.gif)
(六)number:只能包含數(shù)字的輸入框
![](/d/20211016/610c2f79c5f1ee69249574b0944f43e4.gif)
(七)color:顏色選擇器
![](/d/20211016/4b2188b2081d914e76eadae376cc4bf4.gif)
(八)detetime顯示完整日期
![](/d/20211016/c00fe9f22fdda50fba099c13a3d354d7.gif)
(九)autocomplete:是否保存用戶輸入值
默人為on,關(guān)閉提示選擇off
(十):指定表單獲取輸入焦點
![](/d/20211016/9e6779479f706c5b5f19784d080ab1c6.gif)
(十一):此項必填,不能為空
![](/d/20211016/f9d8b42336c5d36254fbf7443ed043e2.gif)
如果只寫第一個輸入框,第二個輸入框就會彈出“請?zhí)顚懘俗侄?rdquo;
(十二)parrern:正則驗證 pattrn="\d{1,5}"
![](/d/20211016/f28ddcd17b1acb129f8287fdaae32074.gif)
我設(shè)置的正則是1-5數(shù)字,如果不是就提交失敗
總結(jié)
以上所述是小編給大家介紹的HTML5新增form控件和表單屬性實例代碼詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!