關於HTML5中得input表單,你所不知道的幾點

2021-10-09 10:07:05 字數 1797 閱讀 5274

當我們一提到表單,就會想起驗證兩個字,而驗證最離不開的就是正規表示式,我相信這個東西或多或少地讓大部分程式設計師都頭疼過那麼一段時間

當然,也有很多地**提供了一些常用的用於驗證的正規表示式,jquery也封裝了乙個jquery validity庫來幫助大家減少這個我們頭疼的東西。不過現在

html5提供了一些input的新屬性,讓驗證變得更加地容易,接下來,讓我們看看是哪些新屬性吧。

1.

email

這個email屬性直接提供了郵箱的驗證,輸入錯誤的郵箱會有相應的提示,當然了這個提示內容是可以自己更改的,

具體更改方法如下

//驗證不通過時觸發 document.getelementbyid("tel").oninvalid=function()

是不是比

^[a-za-z0-9_-]+@[a-za-z0-9_-]+(\.[a-za-z0-9_-]+)+$
更簡單呢

tel

tel這個屬性,字面意思一下就看得出來的**相關的,但是仔細一想,好像各個國家的**號碼長度形式的規則都不一樣,難道開發人員有這個精力去統計這個東西嗎?

答案是no那既然沒用,為什麼又要設定這個屬性呢?

因為它在移動端有很大的左右,設定這個tel屬性可以方便在移動端開啟數字鍵盤。

有的時候也必須要使用正規表示式,可以這麼做,新增以以乙個

3.

url

*注意!*設定了這個url屬性,url格式必須是以https://開頭的

range

這個有點類似於進度條的那種效果,上面的屬性一看便懂辣

color

這個可以在網頁中開啟乙個選色器,非常地方便

date

這個可以在網頁中開啟乙個日期選擇器

time

這個可以在網頁中開啟乙個時間選擇器

datetime-local

這個可以在網頁中開啟乙個日期時間選擇器

month

這個可以在網頁中開啟乙個月份選擇器

week

這個可以在網頁中開啟乙個週數選擇器

file

可以呼叫檔案介面直接開啟電腦的檔案對話方塊

這個autocomplete屬性可以將上次輸入地值存下來,下次輸入的時候自動填充

接下來我們來看乙個表單案例的總結

有趣得html5儲存

html5的幾種儲存方式 html5在引入webstorage之前,主要用cookies.web storage html5的webstorage 分兩種 localstorage 和sessionstorage,兩者的差別主要在生命週期不同。localstorage localstorage用於持...

HTML5新增input型別

發表於 2016 06 16 分類於 前端 閱讀次數 4在html4等早期版本中,input元素已經有了一些type型別,type可取的值有下面這些 text文字型別 password密碼型別 radio 單選型別 選項 checkbox 多選型別 選項 file 檔案型別 submit 提交按鈕 ...

HTML5新增input表單

html5新增input表單 input表單及其屬性 type email 限制使用者輸入必須為e mail型別 type url 限制使用者輸入必須為 和 型別 type date 限制使用者輸入必須為日期型別 type month 限制使用者輸入必須為月份型別 type time 限制使用者輸入...