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

 
廢話不多說，直接介紹<inuput/>標簽的type屬性。
1.單行輸入框< input type"text"/>
單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號等，常用的屬性有name、value、 maxlength。
 
2.密碼輸入框< input type=" password"/>
密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。
 
3.單選按鈕< input type=" radio"/>
單選按鈕用于單項選擇，如選擇性別、是否操作等。需要注意的是，在定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣“單選”才會生效。此外，可以對單選按鈕應(yīng)用 checked屬性，指定默認選中項。
 
4.復選框< input type=" checkbox"/>
復選框常用于多項選擇，如選擇興趣、愛好等，可對其應(yīng)用 checked屬性，指定默認選中項。
 
5.普通按鈕< input type=" button"/>
普通按鈕常常配合JavaScript腳本語言使用，初學者了解即可。
 
6.提交按鈕< nput type=" 'submit"/>
提交按鈕是表單中的核心控件，用戶完成信息的輸入后一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交?？梢詫ζ鋺?yīng)用 value屬性，改變提交按鈕上的默認文本。
 
7.重置按鈕< input type=" reset"/>
當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息?？梢詫ζ鋺?yīng)用 value屬性，改變重置按鈕上的默認文本。
 
8.圖像形式的提交按鈕< input type=" image"/>
圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認的按鈕，外觀上更加美觀。需要注意的是，必須為其定義src屬性指定圖像的url地址。
 
9.隱藏域< input type=" hidden"/>
隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺的程序，初學者了解即可。
 
10.文件域< input type="fie"/>
當定義文件域時，頁面中將出現(xiàn)一個“選擇文件”按鈕和提示信息文本，用戶可以通過單擊按鈕然后直接選擇文件的方式，將文件提交給后臺服務(wù)器。
 
11.emai類型< input type="emai"/>
 
emai類型的<input/>標記是一種專門用于輸入E-mai地址的文本輸入框，用來驗證emai輸入框的內(nèi)容是否符合E-mai地址格式;如果不符合，將提示相應(yīng)的錯誤信息。
 
12.url類型< <input type"url"/>
Url類型的< input />標記是一種用于輸入URL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會提交數(shù)據(jù)到服務(wù)器;如果輸入的值不符合URL地址格式，則不允許提交，并且會有提示信息。
 
13.tel類型< input type"tel"/>
tel類型用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實現(xiàn)一個通用的格式。因此，tel類型通常會和 pattern屬性配合使用。
 
14. search類型< input type=" search"/>
 
search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動記錄一些字符，如站點搜索或者Google搜索。在用戶輸入內(nèi)容后，其右側(cè)會附帶一個刪除圖標，單擊這個圖標按鈕可以快速清除內(nèi)容。
 
15. color類型< input type" color"/>
color類型用于提供設(shè)置顏色的文本框，用于實現(xiàn)一個RGB顏色輸入。其基本形式是# RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色。單擊clor類型文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色。
 
16. number類型< input type=" number
number類型的 <input/標記用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)則會出現(xiàn)錯誤提示。
 
number類型的輸入框可以對輸入的數(shù)字進行限制，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認值等。具體屬性說明如下。
●vale:指定輸入框的初始值
●max:指定輸入框可以接受的最大的輸入值。
min:指定輸入框可以接受的最小的輸入值。
●sep:輸入域合法的數(shù)字間隔，如果不設(shè)置，默認值是1。
 
 
17. range類型< input type=" range"/>
range類型的<inpu標記用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動條。它的常用屬性與 number類型一樣，通過min屬性和max屬性，可以設(shè)置最小值與最大值，通過step屬性指定每次滑動的步幅。如果想改變mnge的vale值，可以通過直接拖動滑動塊或者單擊滑動條來改變。
 
18. Date pickers類型< input type= date， month，week…"/>
Date picker類型是指時間日期類型。HML中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期、具體。
Date：選取日、月、年
Month：選取月、年
Week：選取周、年
Time：選取時間(小時和分鐘)
Datetime：選取時間、日、月、年(UTC時間)
datetime-local：選取時間、日、月、年(本地時間)
 
UTC是 Universal Time Coordinated的英文縮寫，即“協(xié)調(diào)世界時”，又稱世界標準時間。簡單地說，UTC時間就是0時區(qū)的時間。例如，如果北京時間為早上8點，則UTC時間為0點，即UC時間比北京時間晚8小時。
 
注意:對于瀏覽器不支持的<input/>標記輸入類型，則會在網(wǎng)頁中顯示為一個普通輸入框。
 
以上我們介紹了<input/>標簽的type屬性希望對您有所幫助，如果您想了解更多web前端開發(fā)的相關(guān)知識，請點擊頁面咨詢按鈕了解傳智播客web前端課程。