HTML5新增的INPUT輸入類型怎么用

這篇“HTML5新增的INPUT輸入類型怎么用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5新增的INPUT輸入類型怎么用”文章吧。

已經有的輸入類型 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="search2" />

input[type="search"]{

-webkit-appearance:textfield;

}

7、tel類型的應用

tel類型的input元素提供專門用于輸入電話號碼的文本框。

復制代碼

代碼如下:

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

8、color類型的應用

color類型的input元素提供專門用于設置顏色的文本框。

復制代碼

代碼如下:

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

以上就是關于“HTML5新增的INPUT輸入類型怎么用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。