HTML5新增的8類INPUT輸入類型介紹_html5教學技巧

已經有的輸入類型HTML代碼示例：

複製代碼

代碼如下:

文字域
單選按鈕
複選框
下拉清單
密碼域
提交按鈕
可點選按鈕
圖片按鈕
隱藏域
重設按鈕
檔案域

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

複製程式碼

程式碼如下:

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

複製程式碼

程式碼如下:

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

複製程式碼

程式碼如下:

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

複製程式碼

程式碼如下:

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

複製代碼

程式碼如下:

date

選取日、月、年
month
選取月、年

複製代碼

代碼如下:

week

選取週長🎜>代碼如下:

time

選取時間（小時和分鐘）

複製程式碼

程式碼如下:

datetime

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

複製代碼

代碼如下:

datetime-local

選取時間、日、月、年（本地時間）

6、search類型的應用

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

複製程式碼

程式碼如下:

input[type="search"]{
-webkit-appearance:textfield;
}

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

複製程式碼

程式碼如下:

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

複製程式碼

程式碼如下: