HTML5 大幅度地增加与改良了 input 元素的种类,可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。
到目前为止,大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器,input 元素被统一视为 text 类型。另外,HTML5 中也没有规定这些元素在浏览器中的外观形式,因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。
type取值 | 功能 | type取值 | 功能 |
---|---|---|---|
number | 输入数字的文本框 | date | 在日历中选择日期 |
range | 输入一段范围内数值的文本框 | time | 输入时间的文本框 |
search | 输入搜索关键字的文本框 | datetime | 输入UTC日期和时间的文本框(已过时) |
输入email地址的文本框 | datetime-local | 输入本地日期和时间的文本框 | |
url | 输入url地址的文本框 | month | 输入月份的文本框 |
tel | 输入电话号的文本框 | week | 输入周号的文本框 |
color | 提供颜色选择器选择颜色 |
HTML5新增的input元素类型和属性
《HTML5新增的input元素类型:number、range、email、color、date等》
《HTML5新增的input元素属性:placeholder、required、autofocus、min、max等》
1、number 输入类型
number 类型的 input 元素是一种专门用来输入数字的文本框,并且在提交时会检查其中的内容是否数字。它与 min、max、step 属性能很好地协作。
使用方法如下:
数字:<input type="number" name="num1" value="25" min="10" max="100" step="5"/>
执行结果:
2、range 输入类型
range 类型的 input 元素是一种只允许输入一段范围内数值的文本框。它具有 min 和 max 属性,可以设置最小值与最大值(默认为0与100)。它还具有 step 属性,可以指定每次拖动的步幅。
使用方法如下:
<form oninput="x.value=parseInt(num1.value)">
选择数值:<input type="range" name="num1" value="25" min="0" max="100" step="5"/>
<output for="num1" name="x"></output>
</form>
执行结果:
3、search 输入类型
search 类型的 input 元素是一种专门用来输入搜索关键词的文本框。search 类型与 text 类型仅仅在外观上有所不同。
使用方法如下:
<fieldset>
<legend>请输入搜索关键字:</legend>
<input type="search" list="myList"/>
<datalist id="myList">
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JavaScript">JavaScript</option>
</datalist>
<input type="submit" value="搜索"/>
</fieldset>
执行结果:
4、email 输入类型
email 类型的 input 元素是一种专门用来输入电子邮件地址的文本框。提交时如果该文本框中的内容不是电子邮件地址格式的文本,则不允许提交。
使用方法如下:
电子邮箱:<input type="email"/>
5、url 输入类型
url 类型的 input 元素是一种专门用来输入 URL 地址的文本框。在提交 URL 地址时,如果该文本框中的内容不是 URL 地址格式的文本,则不允许提交。
使用方法如下:
博客地址:<input type="url" value="https://blog.csdn.net/pan_junbiao">
6、tel 输入类型
tel 类型的 input 元素是一种专门用于输入电话号码的文本框。它没有特殊的校验规则,甚至不强调只输入数字,因为很多电话号码常常带有额外的字符。
使用方法如下:
电话号码:<input type="tel">
【实例】使用 email、url、tel 类型的 input 元素。
<form>
博客地址:<input type="url" value="https://blog.csdn.net/pan_junbiao"></br>
电话号码:<input type="tel"></br>
电子邮箱:<input type="email"/></br>
<input type="submit" value="提交"/>
</form>
执行结果:
7、color 输入类型
color 类型的 input 元素用来选取颜色,它提供了一个颜色选择器。
使用方法如下:
选择颜色:<input type="color" />
执行结果:
8、date 输入类型
date 输入类型是比较受开发者喜欢的一种元素,我们经常看到网页中要求我们输入各种各样的日期,如生日、购买日期、订票日期等。date 类型的 input 元素以日历的形式,以方便用户输入。
使用方法如下:
日期:<input type="date" />
执行结果:
9、time 输入类型
time 类型的 input 元素是一种专门用来输入时间的文本框,并且在提交时会对输入时间的有效性进行校验。
使用方法如下:
时间:<input type="time" />
执行结果:
10、datetime 输入类型
datetime 类型的 input 元素是一种专门用来输入 UTC 日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。
使用方法如下:
日期和时间:<input type="datetime" />
注意:
HTML5 的 datetime 已经不再被推荐使用,因为它不符合当前的 HTML5 标准。根据 HTML5 规范,推荐使用 date 或 time 来分别处理日期和时间。
11、datetime-local 输入类型
datetime-local 类型的 input 元素是一种专门用来输入本地日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。
使用方法如下:
日期和时间:<input type="datetime-local" />
执行结果:
12、month 输入类型
month 类型的 input 元素是一种专门用来输入月份的文本框,并且在提交时会对输入的月份的有效性进行检查。
使用方法如下:
月份:<input type="month" />
执行结果:
13、week 输入类型
week 类型的 input 元素是一种专门用来输入周号的文本框,并且在提交时会对输入的周号的有效性进行检查。
使用方法如下:
周:<input type="week" />
执行结果: