网站开发 创造收益行业seo网站优化方案
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" />执行结果：
