HTML5 的Input 類型

一、文本類

　　Text，文本

　　Url，網(wǎng)絡(luò)地址

　　Password，密碼

　　Email，郵箱地址

二、操作類

　　Checkbox ，復(fù)選框

　　Radio，單選框

　　File，上傳文件

　　Number，數(shù)值

　　Range，百分百滑動條

三、功能類

　　Button，按鈕

　　Image，圖片提交按鈕

　　Submit，文字提交按鈕

　　Reset，重置表單

四、Date類

　　Date，年月日控件

　　Month，年月控件

　　Week，年周控件

　　Time，時間控件

　　Datetime，年月日+時間控件

　　Datetime-local，本地年月日+時間控件

五、特殊類

　　Hidden，隱藏信息

擴展：

1.文本類屬性：placeholder。這是一個占位符，可以作為提示信息，而且無法被用戶選中。

2.Url和e-mail，在H5中，會在提交表單的時候檢測其格式是否書寫正確。

3.操作類。一般input標簽會結(jié)合label標簽使用，label一般有兩種書寫方法：

①非跨度：<label><input></input></label>

②跨度：<label for="input_id"></label>
　　　　<input id="input_id"></input>

如果網(wǎng)頁結(jié)構(gòu)中，input和label是相鄰的關(guān)系，可以直接使用非跨度的書 寫方法，以減少代碼量。

4.file。在實際應(yīng)用中，網(wǎng)頁表單中需要上傳的文件一般不止一個，這時候就要用到multiple屬性，它是一個布爾值屬性，在添加這個屬性后，就可以上傳多個屬性。另外，上傳的文件可以被規(guī)定，使用accept屬性。這個一個數(shù)組屬性，屬性值是MIME規(guī)定的文件類型。

5.Button。Button類型只能在value中定義按鈕上顯示的提示文字。Image類型只能在src中鏈接圖片。

而button標簽則結(jié)合了button和image的屬性，它是一個雙標簽，也就是說它可以在內(nèi)部嵌套其他標簽，讓按鈕的顯示效果更多元化。

6.Date類。Date類型的input標簽是H5中新增加的。它實際上是一個控件，可以很方便的選擇和顯示時間數(shù)據(jù)，但是目前支持該控件的瀏覽器并不多。其中IE是完全不支持的。

7.Hidden。這個屬性的input標簽無法顯示，也無法被用戶控制。它的作用可以用來標記一些隱藏的表單信息。

例如：在一些網(wǎng)站中，對于用戶的描述，有一個信息完整度的提示。

用戶在注冊的時候，必填項有5個，可填項有5個。注冊的表單可以用hidden來記錄可填項中有多少個是有數(shù)據(jù)的。

假如，一個用戶把所有的可填項全部填寫。那么他的信息完整度就是100%。

另一個用戶的可填項一個也沒有填寫，他的信息完整度就是50%。

而這個數(shù)值可以根據(jù)hidden中記錄的數(shù)值來進行計算。

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

已經(jīng)有的輸入類型 HTML代碼示例：

代碼如下:

文本域 <input type="text">
單選按鈕 <input type="radio">
復(fù)選框 <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輸入類型，通過使用這些新增元素，可以實現(xiàn)更好的輸入控制和驗證。
1、email類型的應(yīng)用
email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，在提交表單的時候，會自動驗證email輸入框的值。

代碼如下:

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

2、url類型的應(yīng)用
url類型的input元素提供用于輸入url地址這類特殊文本的文本框。

代碼如下:

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

3、number類型的應(yīng)用
number類型的input元素提供用于輸入數(shù)值的文本框。

代碼如下:

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

4、range類型的應(yīng)用
range類型的input元素提供用于輸入包含一定范圍內(nèi)數(shù)字值得文本框，在網(wǎng)頁中顯示為滾動條。

代碼如下:

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

5、日期檢出類型的應(yīng)用
輸入類型 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類型的應(yīng)用
search類型的input元素提供用于輸入搜索關(guān)鍵詞的文本框。

代碼如下:

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

7、tel類型的應(yīng)用
tel類型的input元素提供專門用于輸入電話號碼的文本框。

代碼如下:

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

8、color類型的應(yīng)用
color類型的input元素提供專門用于設(shè)置顏色的文本框。

代碼如下:

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