html5新增的input類型

你可能已經聽說過現(xiàn)在HTML5里引入了幾種新的input類型，在HTML5之前，大家熟知的input類型包括：text(文本輸入框)，hidden(隱藏域)，submit(提交按鈕)等。而HTML5到來之后，新增的input類型包括： email (e-mail 地址)，date(日期)，number(數(shù)字)等等。下面我們來看看HTML5中新增input類型都有哪些吧~~~

新增input類型的屬性值如下表所示：

下面是這幾種新型input類型的實例演示：

1、 email類型，在Android和IOS下效果分別為：

PS：當input類型為email時，在Android下可以進行簡單的驗證判斷，但在IOS下卻不可以。

2、url類型，在Android和IOS下效果分別為：

PS：當input類型為url時，在Android下可以進行簡單的驗證判斷，但在IOS下卻不可以。

3、date類型，在Android和IOS下效果分別為：

PS：當input類型為date時，無論在Android下，還是IOS下，都帶有日歷calendar 控件，只是樣式不同而已。

4、time類型，在Android和IOS下效果分別為：

PS：當input類型為time時，無論在Android下還是IOS下，都帶有時間帶有 time 控件，只是樣式不同而已。

5、datetime類型，在Android和IOS下效果分別為：

PS：當input類型為datetime時，無論在Android下，還是IOS下，都沒有日歷calendar 或時間 time 控件。

6、datetime-local類型，在Android和IOS下效果分別為：

PS：當input類型為datetime-local時，無論在Android下，還是IOS下，都帶有日歷calendar 和時間time 控件。

7、month類型，在Android和IOS下效果分別為：

PS：當input類型為month時，無論在Android下，還是IOS下，都帶有日歷calendar控件，但是在Android下的日歷calendar控件可選取到日，但在輸入框中還是只顯示年、月；在IOS下的日歷calendar控件只可選取年、月。

8、week類型，在Android和IOS下效果分別為：

PS：當input類型為week時，在Android下，帶有日歷calendar控件，但在IOS下week類型的輸入框無法使用。

9、number類型，在Android和IOS下效果分別為：

PS：當input類型為number時，在Android下，點擊輸入框即出現(xiàn)鍵盤，但在IOS下點擊輸入框出現(xiàn)的是數(shù)字鍵盤。

10、range類型，在Android和IOS下效果分別為：

PS：當input類型為range時，在Android下，滑塊的樣式是一個矩形滑塊，在IOS下卻是圓形滑塊。

11、search類型，在Android和IOS下效果分別為：

PS：當input類型為search并加上results屬性時，在Android下，輸入框里左側有一個搜索icon圖標，而在IOS下卻沒有，但是在IOS下輸入框的邊框卻發(fā)生了變化，有了較大的圓弧樣式。

12、tel類型，在Android和IOS下效果分別為：

PS：當input類型為tel時，在Android下，點擊輸入框即出現(xiàn)鍵盤，但在IOS下點擊輸入框出現(xiàn)的是數(shù)字鍵盤。

13、color類型，在Android和IOS下效果分別為：

PS：當input類型為color時，在Android下，默認輸入框里的顏色是黑色，點擊輸入框即出現(xiàn)拾色器，但在IOS下卻沒有任何效果。

由上可總結得出，現(xiàn)在Android和IOS對HTML5新增input類型是否支持：

以上為“H5案例分享”團隊原創(chuàng)文章，轉載請注明出處！

標簽

確定

分享：

海報

案列鏈接

下載截圖

收藏案例

已收藏

分享到微信朋友圈

打開微信，點擊底部的“發(fā)現(xiàn)”，

使用“掃一掃”即可將網頁分享至朋友圈。

總結

以上是生活随笔為你收集整理的html5 新增input类型,html5新增的input类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。