input標簽的type屬性及兼容性


input標簽type的值有很多,今天就來給大家總結一下

1. < input type ="button"> 定義可點擊按鈕 (這個不用我多說,做前端應該都知道)

2.< input type ="checkbox"> 定義復選框,允許用戶選擇中選取一個或多個選項。

3.< input type ="file"> 用於輸入字段和 "瀏覽"按鈕,文件上傳。不過這個在ie下有個兼容性問題,不能上傳文件,其實這個是IE的安全限制問題,就是在ie下必須點擊file的瀏覽按鈕才能上傳文件,既然IE非得要親自點擊,我們可以改變思路,解決的思路就是:我們可以讓< input type ="file">設置成絕對定位,位於某個標簽之上,這樣就可以啦,如果你想改變我們肉眼看到的樣式,你可以把< input type ="file">設置成透明的,然后去改變下面標簽的樣式就ok啦。

4.< input type ="hidden">用於定義隱藏的字段,這個很important,通常如果你想給不想讓用戶看見又能前后端交互,這個就很方便了,其實在實際操作中< input type ="text"> css樣式設為display:none,也可以實現在各種效果,本人目前還不知道他倆有啥區別

5.< input type ="image" src="圖片路徑" alt="">用於定義圖像形式的提交按鈕

6.< input type ="password">定義密碼字段。

7.< input type ="radio">定義單選按鈕。允許用戶選取給定數目的選擇中的一個選項,例如,讓用戶選擇性別的時候用到。

8.< input type ="reset">定義重置按鈕。重置按鈕會清除表單中的所有數據。

9.< input type ="submit">定義提交按鈕。提交按鈕會把表單數據發送到服務器。

10.< input type ="text">定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為 20 個字符。

11.< input type ="number"> 定義用戶只能輸入數字,這個用在移動端當用戶觸發了這個input之后,彈出的小鍵盤直接數字,特別方便

12.< input type ="tel"> 定義用於電話號碼的文本字段

13.< input type ="email"> 定義郵件的文本字段

14.< input type ="range"> 定義帶有 slider 控件的數字字段

15.< input type ="time"> 定義日期字段的時、分、秒

16.< input type ="search"> 定義用於搜索的文本字段

17.< input type ="url"> 定義用於 URL 的文本字段

18.< input type ="week"> 定義日期字段的周

19.< input type ="month">定義日期字段的月

20.< input type ="datetime-local">定義日期字段

21.< input type ="datetime">定義日期字段

22.< input type ="date">定義日期字段

23.< input type ="color">定義拾色器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM