HTML5 的Input 類型

一、文本類

　　Text，文本

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

　　Password，密碼

　　Email，郵箱地址

二、操作類

　　Checkbox ，復(fù)選框

　　Radio，單選框

　　File，上傳文件

　　Number，數(shù)值

　　Range，百分百滑動(dòng)條

三、功能類

　　Button，按鈕

　　Image，圖片提交按鈕

　　Submit，文字提交按鈕

　　Reset，重置表單

四、Date類

　　Date，年月日控件

　　Month，年月控件

　　Week，年周控件

　　Time，時(shí)間控件

　　Datetime，年月日+時(shí)間控件

　　Datetime-local，本地年月日+時(shí)間控件

五、特殊類

　　Hidden，隱藏信息

擴(kuò)展：

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

2.Url和e-mail，在H5中，會(huì)在提交表單的時(shí)候檢測(cè)其格式是否書(shū)寫(xiě)正確。

3.操作類。一般input標(biāo)簽會(huì)結(jié)合label標(biāo)簽使用，label一般有兩種書(shū)寫(xiě)方法：

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

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

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

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

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

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

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

7.Hidden。這個(gè)屬性的input標(biāo)簽無(wú)法顯示，也無(wú)法被用戶控制。它的作用可以用來(lái)標(biāo)記一些隱藏的表單信息。

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

用戶在注冊(cè)的時(shí)候，必填項(xiàng)有5個(gè)，可填項(xiàng)有5個(gè)。注冊(cè)的表單可以用hidden來(lái)記錄可填項(xiàng)中有多少個(gè)是有數(shù)據(jù)的。

假如，一個(gè)用戶把所有的可填項(xiàng)全部填寫(xiě)。那么他的信息完整度就是100%。

另一個(gè)用戶的可填項(xiàng)一個(gè)也沒(méi)有填寫(xiě)，他的信息完整度就是50%。

而這個(gè)數(shù)值可以根據(jù)hidden中記錄的數(shù)值來(lái)進(jìn)行計(jì)算。

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中，增加了多個(gè)新的表單input輸入類型，通過(guò)使用這些新增元素，可以實(shí)現(xiàn)更好的輸入控制和驗(yàn)證。
1、email類型的應(yīng)用
email類型的input元素是一種專門(mén)用于輸入E-mail地址的文本輸入框，在提交表單的時(shí)候，會(huì)自動(dòng)驗(yàn)證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)頁(yè)中顯示為滾動(dòng)條。

代碼如下:

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

5、日期檢出類型的應(yīng)用
輸入類型 HTML代碼  功能說(shuō)明

代碼如下:

date <input type="date">

選取日、月、年
month <input type="month">
選取月、年

代碼如下:

week <input type="week">

選取周和年

碼代碼如下:

time <input type="time">

選取時(shí)間（小時(shí)和分鐘）

代碼如下:

datetime <input type="datetime">

選取時(shí)間、日、月、年（UTC時(shí)間）

代碼如下:

datetime-local
<input type="datetime-local"> 選取時(shí)間、日、月、年（本地時(shí)間）

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元素提供專門(mén)用于輸入電話號(hào)碼的文本框。

代碼如下:

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

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

代碼如下:

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