HTML5新增的8類INPUT輸入類型介紹

2020-03-24 18:31:42

字體：大中小

來源：轉載

供稿：網友

已經有的輸入類型 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" /
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：在HTML里select標簽有哪些用法

下一篇：基于HTML5 audio元素播放聲音jQuery小插件