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

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