html5拥有很多新的表单输入类型，这些类型提供更好的输入控制和验证，以前我们需要自己通过脚本去控制的功能，现在标签已经帮我们完成了。这里我将详细介绍input类型为：date、datetime、datetime-local、time、month、week、email、number、range、search、tel、url、color的用法！
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。建议使用Opera浏览器测试
date类型
date类型允许你从一个时机选择期选择一个日期，以前我们都是使用JS时间插件完成的功能，现在已经如此简单！代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
生日: <input type="date" name="bday">
</body>
</html>
效果：
date类型.png
注意:低版本的火狐和IE不支持该属性，建议使用Opera浏览器测试！
datetime类型
datetime类型的input元素是专门用来输入UTC日期和实践的文本框，在提交的时候，对日期和时间进行有效的检查。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form>
<input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
<input type="submit" value="提交"/>
</form>
</form>
</body>
</html>
效果：
datetime类型.png
注意:建议使用Opera浏览器测试！
datetime-local类型
datetime-local 类型允许你选择一个日期和时间 (无时区)。此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。
time类型
time 类型允许你选择一个时间，在提交的时候检查是否输入了有效的时间。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
选择时间: <input type="time" name="usr_time">
</body>
</html>
效果：
time类型.png
注意:建议使用Opera浏览器测试！
month类型
month是一种专门输入月份的文本框，在日历中，你只能选择某一个月，不能选择某一天。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
</body>
</html>
效果：
month类型.png
注意:建议使用Opera浏览器测试！
week类型
week是专门用来输入周（星期）的文本框，W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周，同样不能选择某一天。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
</body>
</html>
效果：
week类型.png
注意:建议使用Opera浏览器测试！
email类型
email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
</body>
</html>
注意: Internet Explorer 9 及更早IE版本不支持type="email" 。
number类型
number 类型用于应该包含数值的输入域。我们还能够设定对所接受的数字的限定，step为上一个数字与下一个数字的间隔，value - 规定默认值。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
<input type="number" max="9" min="0" step="2"/>
<input type="submit">
</form>
</body>
</html>
range类型
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。step - 规定合法的数字间隔，value - 规定默认值。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="submit">
</form>
</body>
</html>
search类型
search 类型用于搜索域，比如站点搜索或 Google 搜索。一般是语义话，代码如下：
<input type="search" name="googlesearch">
tel类型
tel可输入一个电话号码,大部分浏览器不支持，代码如下：
<input type="tel" name="usrtel">
url类型
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证是否符合url标准。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
添加您的主页: <input type="url" name="homepage">
<input type="submit">
</form>
</body>
</html>
color类型
color 类型用在input字段主要用于选取颜色，代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor">
<input type="submit">
</form>
</body>
</html>
效果：
color类型.png
注意:建议使用Opera浏览器测试！
网友评论