新增HTML5的八類INPUT輸入

這篇文章主要介紹了HTML5新增的8類INPUT輸入類型介紹,這8個新的輸入類型分別是email類型、url類型、number類型、range類型、日期類型、search類型、tel類型,本文分別對它們一一介紹,需要的朋友可以參考下

已經有的輸入類型HTML程式碼範例：

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

    在HTML5中，增加了多個新的表單input輸入類型，透過使用這些新增元素，可以實現更好的輸入控制和驗證。
1、email類型的應用程式
email類型的input元素是一種專門用於輸入E-mail地址的文字輸入框，在提交表單的時候，會自動驗證email輸入框的值。

<input type="email" name="user_email" />

2、url類型的應用程式
url類型的input元素提供用於輸入url位址這類特殊文字的文字方塊。

<input type="url" name="user_url" />

3、number類型的應用程式
number類型的input元素提供用於輸入數值的文字方塊。

<input type="number" name="number1" min="1" max="20" step="4" />

4、range類型的應用程式
range類型的input元素提供用於輸入包含一定範圍內數字值得文字框，在網頁中顯示為捲軸。

<input type="range" name="range1" min="1" max="30" />

5、日期檢出類型的應用
輸入類型HTML代碼  功能說明

date <input type="date">

選取日、月、年

#

month <input type="month">

選取月、年

week <input type="week">

選取週和年

time <input type="time">

選取時間（小時和分鐘）

datetime <input type="datetime">

選取時間、日、月、年（UTC時間）

datetime-local
<input type="datetime-local"> 选取时间、日、月、年（本地时间）

6、search類型的應用程式

search類型的input元素提供用於輸入搜尋關鍵字的文字方塊。

<input type="search" name="search1" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7、tel類型的應用程式
tel類型的input元素提供專門用於輸入電話號碼的文字方塊。

<input type="tel" name="tel" />

8、color類型的應用程式
color類型的input元素提供專門用來設定顏色的文字方塊。

<input type="color" name="color" />

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關建議：

HTML5的觸控事件

#

以上是新增HTML5的八類INPUT輸入的詳細內容。更多資訊請關注PHP中文網其他相關文章！