HTML中強大的input標簽屬性


用了許久的html,<input>這個標簽是最常用的標簽之一。

<input type="">標簽中type屬性是必不可少的,以往我最常用的有 type="text"(單行文本輸入) 類型、 type="button"(按鈕類型)、 type="password"(密碼輸入框)等。卻忽略了很多很實用卻很少用到的屬性,這里重新整理一下。

 

在HTML5中,規定的 input type 屬性值如下:

1.button                定義可點擊按鈕

2.checkbox                復選框

<form action="demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike"> 我有一輛自行車<br>
  <input type="checkbox" name="vehicle[]" value="Car"> 我有一輛小轎車<br>
  <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
  <input type="submit" value="提交">
</form>

 

 

 

3.color                   定義拾色器,定義后出現顏色調板,只支持谷歌和opera

4.date                        定義 date 控件(包括年、月、日,不包括時間)。只支持谷歌、opera、safari

5.datetime               定義date和time空間,僅支持safari、opera

6.datetime-local             定義date和time空間。只支持谷歌、opera、safari

7.email                定義用於e-mail地址字段,提交時會驗證。safari不支持

8.file                  上傳文件

9.hidden               定義隱藏字段

10.image                定義圖像為提交按鈕

 

<input type="image" src="img_submit.gif" alt="Submit">

 

 

 

11.month              定義month和year空間。只支持谷歌、opera、safari

12.number              定義數字輸入的字段。只支持谷歌、opera、safari

 

數量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">

 

 

 

 

13.password             定義密碼字段

14.radio               單選項

 

<form>
  <input type="radio" name="gender" value="女"><br>
  <input type="radio" name="gender" value="女"><br>
</form>

 

 

 

 15.range             定義用於精確值不重要的輸入數字的控件(比如 slider 控件)。您也可以設置可接受數字的限制:

 

<input type="range" name="points" min="1" max="10">

 

 

16.reset              定義重置按鈕,重置為初始值

17.search              定義搜索字段。只支持谷歌、opera

18.submit             定義提交按鈕

19.tel               定義輸入電話號碼字段,注:目前主流瀏覽器都不支持

20.text              文本

21.time             定義輸入時間 IE和火狐不支持

22.url              輸入url字段,蘋果瀏覽器不支持

23.week             定義week和year控件,IE和火狐不支持

 


免責聲明!

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



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