HTML5 改良的 input 元素的種類 -开发者知识库

HTML5 改良的 input 元素的種類 -开发者知识库,第1张

html5中增加改良的input 元素

HTML5 改良的 input 元素的種類 -开发者知识库,第2张

在過去我們制作網頁輸入框,會用到不少JS驗證,如今有了HTML5寫這種效果已經沒有那么麻煩了,下面我來給大家介紹兩種HTML5的input的新增加的類型應用。
1、URL類型:
<form>
        <input name="urls" type="url" value="http://www.jb51.net/"/>
        <input type="submit" value="提交"/>
</form>
設置此類型后,從外觀上來看與普通的元素差不多,可是如果你將此類型放到表單中之后,當點擊提交按鈕,如果此輸入框中輸入的不是一個URL地址,將無法提交。

2、Email類型:
<form>
        <input name="email" type="email" value="http://www.jb51.net/"/>
        <input type="submit" value="提交"/>
</form>

3、時間類型
如果我們講上面的URL類型的代碼中的type修改為email,那么在表單提交的時候,會自動驗證此輸入框中的內容是否為email格式,如果不是,則無法提交。

HTML5里的dateinput類型給了給了瀏覽器實現原生日歷的機會,從此之后,JavaScript版的日歷組件將退出歷史舞台。

HTML5規范里只規定date新型input輸入類型,並沒有規定日歷彈出框的實現和樣式。所以,各瀏覽器根據自己的設計實現日歷。
目前只有谷歌瀏覽器完全實現日歷功能。相信這種局面很快就會結束,所有的瀏覽器最終都將會提供原生的日歷組件。

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复