1.單行輸入框< input type=“text”/>

單行文本輸入框常用來(lái)輸入簡(jiǎn)短的信息，如用戶名、賬號(hào)等，常用的屬性有name、value、 maxlength。

 

2.密碼輸入框< input type=" password"/>

密碼輸入框用來(lái)輸入密碼，其內(nèi)容將以圓點(diǎn)的形式顯示。

 

3.單選按鈕< input type=" radio"/>

單選按鈕用于單項(xiàng)選擇，如選擇性別、是否操作等。需要注意的是，在定義單選按鈕時(shí)，必須為同一組中的選項(xiàng)指定相同的name值，這樣“單選”才會(huì)生效。此外，可以對(duì)單選按鈕應(yīng)用 checked屬性，指定默認(rèn)選中項(xiàng)。

 

4.復(fù)選框< input type=" checkbox"/>

復(fù)選框常用于多項(xiàng)選擇，如選擇興趣、愛(ài)好等，可對(duì)其應(yīng)用 checked屬性，指定默認(rèn)選中項(xiàng)。

 

5.普通按鈕< input type=" button"/>

普通按鈕常常配合Javascript腳本語(yǔ)言使用，初學(xué)者了解即可。

 

6.提交按鈕< nput type=" 'submit"/>

提交按鈕是表單中的核心控件，用戶完成信息的輸入后一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交。可以對(duì)其應(yīng)用 value屬性，改變提交按鈕上的默認(rèn)文本。

 

7.重置按鈕< input type=" reset"/>

當(dāng)用戶輸入的信息有誤時(shí)，可單擊重置按鈕取消已輸入的所有表單信息。可以對(duì)其應(yīng)用 value屬性，改變重置按鈕上的默認(rèn)文本。

 

8.圖像形式的提交按鈕< input type=" image"/>

圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。需要注意的是，必須為其定義src屬性指定圖像的url地址。

 

9.隱藏域< input type=" hidden"/>

隱藏域?qū)τ谟脩羰遣豢梢?jiàn)的，通常用于后臺(tái)的程序，初學(xué)者了解即可。

 

10.文件域< input type=“file”/>

當(dāng)定義文件域時(shí)，頁(yè)面中將出現(xiàn)一個(gè)“選擇文件”按鈕和提示信息文本，用戶可以通過(guò)單擊按鈕然后直接選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。

 

11.emai類型< input type=“email”/>

 

emai類型的標(biāo)記是一種專門(mén)用于輸入E-mai地址的文本輸入框，用來(lái)驗(yàn)證emai輸入框的內(nèi)容是否符合E-mai地址格式;如果不符合，將提示相應(yīng)的錯(cuò)誤信息。

 

12.url類型 <input type “url”/>

Url類型的< input />標(biāo)記是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器;如果輸入的值不符合URL地址格式，則不允許提交，并且會(huì)有提示信息。

 

13.tel類型< input type=“tel”/>

tel類型用于提供輸入電話號(hào)碼的文本框，由于電話號(hào)碼的格式千差萬(wàn)別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此，tel類型通常會(huì)和 pattern屬性配合使用。

 

14 search類型< input type=" search"/>

 

search類型是一種專門(mén)用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符，如站點(diǎn)搜索或者Google搜索。在用戶輸入內(nèi)容后，其右側(cè)會(huì)附帶一個(gè)刪除圖標(biāo)，單擊這個(gè)圖標(biāo)按鈕可以快速清除內(nèi)容。

 

15 color類型< input type=" color"/>

color類型用于提供設(shè)置顏色的文本框，用于實(shí)現(xiàn)一個(gè)RGB顏色輸入。其基本形式是# RRGGBB，默認(rèn)值為#000000，通過(guò)value屬性值可以更改默認(rèn)顏色。單擊clor類型文本框，可以快速打開(kāi)拾色器面板，方便用戶可視化選取一種顏色。

 

16 number類型< input type=" number/>

number類型的 <input/標(biāo)記用于提供輸入數(shù)值的文本框。在提交表單時(shí)，會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)則會(huì)出現(xiàn)錯(cuò)誤提示。

 

number類型的輸入框可以對(duì)輸入的數(shù)字進(jìn)行限制，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認(rèn)值等。具體屬性說(shuō)明如下。

●vale:指定輸入框的初始值

●max:指定輸入框可以接受的最大的輸入值。

min:指定輸入框可以接受的最小的輸入值。

●sep:輸入域合法的數(shù)字間隔，如果不設(shè)置，默認(rèn)值是1。

 

17 range類型< input type=" range"/>

range類型的<inpu標(biāo)記用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁(yè)中顯示為滑動(dòng)條。它的常用屬性與 number類型一樣，通過(guò)min屬性和max屬性，可以設(shè)置最小值與最大值，通過(guò)step屬性指定每次滑動(dòng)的步幅。如果想改變mnge的vale值，可以通過(guò)直接拖動(dòng)滑動(dòng)塊或者單擊滑動(dòng)條來(lái)改變。

 

18.Date pickers類型< input type= date， month，week…"/>

Date picker類型是指時(shí)間日期類型。HML中提供了多個(gè)可供選取日期和時(shí)間的輸入類型，用于驗(yàn)證輸入的日期、具體。

Date：選取日、月、年

Month：選取月、年

Week：選取周、年

Time：選取時(shí)間(小時(shí)和分鐘)

Datetime：選取時(shí)間、日、月、年(UTC時(shí)間)

datetime-local：選取時(shí)間、日、月、年(本地時(shí)間)

 

UTC是 Universal Time Coordinated的英文縮寫(xiě)，即“協(xié)調(diào)世界時(shí)”，又稱世界標(biāo)準(zhǔn)時(shí)間。簡(jiǎn)單地說(shuō)，UTC時(shí)間就是0時(shí)區(qū)的時(shí)間。例如，如果北京時(shí)間為早上8點(diǎn)，則UTC時(shí)間為0點(diǎn)，即UC時(shí)間比北京時(shí)間晚8小時(shí)。

 

注意:對(duì)于瀏覽器不支持的標(biāo)記輸入類型，則會(huì)在網(wǎng)頁(yè)中顯示為一個(gè)普通輸入框。