App下載

html5中form控件和表單屬性有哪些使用方法?使用方法案例代碼詳解!

猿友 2021-07-29 10:22:07 瀏覽數(shù) (3083)
反饋

今天我們來(lái)學(xué)習(xí)有關(guān)于:“html5中form控件和表單屬性有哪些使用方法?使用方法案例代碼詳解!”這個(gè)問(wèn)題的相關(guān)內(nèi)容,下面小編整理的相關(guān)內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助!

第一個(gè)知識(shí)點(diǎn):表單的屬性及總結(jié)

第二個(gè)知識(shí)點(diǎn):H5新增的表單控件和屬性以及總結(jié)

第一個(gè)知識(shí)點(diǎn):

我們常見(jiàn)的表單驗(yàn)證有哪些呢

text:  文本框標(biāo)簽

password: 密碼框

checkbox: 多選框

radio:  單選框

button:  按鈕

submit:  提交按鈕

以上是我們常用的一些form屬性

第二個(gè)知識(shí)點(diǎn):H5新的輸入型控件

(一)email:電子郵箱文本框,跟普通的沒(méi)什么區(qū)別

1.當(dāng)輸入不是郵箱的時(shí)候,驗(yàn)證不通過(guò)

2.移動(dòng)端鍵盤(pán)會(huì)有變化

(二)tel:電話(huà)號(hào)碼

1.主要在移動(dòng)端,一個(gè)鍵盤(pán)的切換

(三)url:網(wǎng)頁(yè)的URL

  

輸入正確的網(wǎng)址

(四)sear:搜索引擎

1.chrome下輸入文字后,會(huì)多出一個(gè)關(guān)閉的x

(五)range:特定范圍內(nèi)的數(shù)值選擇器

1.min、max、step(步數(shù))

2.例子:用js來(lái)顯示當(dāng)前數(shù)值

  

(六)number:只能包含數(shù)字的輸入框

(七)color:顏色選擇器

  

(八)detetime顯示完整日期

(九)autocomplete:是否保存用戶(hù)輸入值

默人為on,關(guān)閉提示選擇off

(十):指定表單獲取輸入焦點(diǎn)

  

(十一):此項(xiàng)必填,不能為空

如果只寫(xiě)第一個(gè)輸入框,第二個(gè)輸入框就會(huì)彈出“請(qǐng)?zhí)顚?xiě)此字段”

(十二)parrern:正則驗(yàn)證 pattrn="d{1,5}"

我設(shè)置的正則是1-5數(shù)字,如果不是就提交失敗

總結(jié)

以上就是有關(guān)于:“html5中form控件和表單屬性有哪些使用方法?使用方法案例代碼詳解!”這方方面的相關(guān)內(nèi)容分享,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解! 


0 人點(diǎn)贊