HTML5新增的input元素类型：number、range、email、color、date等

HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。

到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。

type取值	功能	type取值	功能
number	输入数字的文本框	date	在日历中选择日期
range	输入一段范围内数值的文本框	time	输入时间的文本框
search	输入搜索关键字的文本框	datetime	输入UTC日期和时间的文本框（已过时）
email	输入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 属性能很好地协作。

使用方法如下：

html 复制代码

数字：<input type="number" name="num1" value="25" min="10" max="100" step="5"/>

执行结果：

2、range 输入类型

range 类型的 input 元素是一种只允许输入一段范围内数值的文本框。它具有 min 和 max 属性，可以设置最小值与最大值（默认为0与100）。它还具有 step 属性，可以指定每次拖动的步幅。

使用方法如下：

html 复制代码

<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 类型仅仅在外观上有所不同。

使用方法如下：

html 复制代码

<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 元素是一种专门用来输入电子邮件地址的文本框。提交时如果该文本框中的内容不是电子邮件地址格式的文本，则不允许提交。

使用方法如下：

html 复制代码

电子邮箱：<input type="email"/>

5、url 输入类型

url 类型的 input 元素是一种专门用来输入 URL 地址的文本框。在提交 URL 地址时，如果该文本框中的内容不是 URL 地址格式的文本，则不允许提交。

使用方法如下：

html 复制代码

博客地址：<input type="url" value="https://blog.csdn.net/pan_junbiao">

6、tel 输入类型

tel 类型的 input 元素是一种专门用于输入电话号码的文本框。它没有特殊的校验规则，甚至不强调只输入数字，因为很多电话号码常常带有额外的字符。

使用方法如下：

html 复制代码

电话号码：<input type="tel">

**【实例】**使用 email、url、tel 类型的 input 元素。

html 复制代码

<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 元素用来选取颜色，它提供了一个颜色选择器。

使用方法如下：

html 复制代码

选择颜色：<input type="color" />

执行结果：

8、date 输入类型

date 输入类型是比较受开发者喜欢的一种元素，我们经常看到网页中要求我们输入各种各样的日期，如生日、购买日期、订票日期等。date 类型的 input 元素以日历的形式，以方便用户输入。

使用方法如下：

html 复制代码

日期：<input type="date" />

执行结果：

9、time 输入类型

time 类型的 input 元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行校验。

使用方法如下：

html 复制代码

时间：<input type="time" />

执行结果：

10、datetime 输入类型

datetime 类型的 input 元素是一种专门用来输入 UTC 日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

使用方法如下：

html 复制代码

日期和时间：<input type="datetime" />

注意：

HTML5 的 datetime 已经不再被推荐使用，因为它不符合当前的 HTML5 标准。根据 HTML5 规范，推荐使用 date 或 time 来分别处理日期和时间。

11、datetime-local 输入类型

datetime-local 类型的 input 元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

使用方法如下：

html 复制代码

日期和时间：<input type="datetime-local" />

执行结果：

12、month 输入类型

month 类型的 input 元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。

使用方法如下：

html 复制代码

月份：<input type="month" />

执行结果：

13、week 输入类型

week 类型的 input 元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号的有效性进行检查。

使用方法如下：

html 复制代码

周：<input type="week" />

执行结果：