input標(biāo)簽的type屬性匯總[web前端開發(fā)培訓(xùn)]

 
廢話不多說(shuō)，直接介紹<inuput/>標(biāo)簽的type屬性。
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="fie"/>
當(dāng)定義文件域時(shí)，頁(yè)面中將出現(xiàn)一個(gè)“選擇文件”按鈕和提示信息文本，用戶可以通過(guò)單擊按鈕然后直接選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。
 
11.emai類型< input type="emai"/>
 
emai類型的<input/>標(biāo)記是一種專門用于輸入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類型是一種專門用于輸入搜索關(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類型文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色。
 
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é)調(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ì)于瀏覽器不支持的<input/>標(biāo)記輸入類型，則會(huì)在網(wǎng)頁(yè)中顯示為一個(gè)普通輸入框。
 
以上我們介紹了<input/>標(biāo)簽的type屬性希望對(duì)您有所幫助，如果您想了解更多web前端開發(fā)的相關(guān)知識(shí)，請(qǐng)點(diǎn)擊頁(yè)面咨詢按鈕了解傳智播客web前端課程。