HTML中强大的input标签属性

时间:2022-11-03 13:59:47

用了许久的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和火狐不支持