HTML中強大的input標籤屬性 HTML中強大的input標籤屬性

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和火狐不支持