DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5新增的8類INPUT輸入類型介紹
HTML5新增的8類INPUT輸入類型介紹
編輯:HTML5詳解     
這篇文章主要介紹了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" />
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved