简介
HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。其中比较常用的有color，date，datetime，email，month，number，range，search，tel，time，url，week本篇文章对一些常用的HTML5 input进行讲解。
input color类型
color类型的input字段用于选取颜色，浏览器（不同浏览器可能展示不同）默认提供一个颜色选择器，可以选取颜色也可以输入颜色代码，当然选取的值还得写程序去获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="test.php">
选择颜色: <input type="color" name="color"><br>
<input type="submit">
</form>
</body>
</html>
input date类型
date类型是input字段是一个日期控件，方便用户输入日期
<form action="demo.php">
日期: <input type="date" name="day">
<input type="submit">
</form>
与date类似作用的是time类型，它提供的是一个时间选择器。
<form action="demo.php">
时间: <input type="time" name="time">
<input type="submit">
</form>
input email类型
email类型的表单会自动校验输入值是否合法邮箱
<form action="demo.php">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
input month类型
month类型的input字段定义一个月份和年份的控件。
<form action="demo.php">
月和年: <input type="month" name="month">
<input type="submit">
</form>
input week类型
week类型的input字段定义一个周次和年份的控件。一年的第一个星期一 为第一周开始。
<form action="demo.php">
周次和年: <input type="week" name="week">
<input type="submit">
</form>
input number类型
number类型的input会验证值是否为数字，同时也可以设置值的区间。
IE9 以下版本浏览器兼容HTML5的方法
<form action="demo.php">
数字1~5: <input type="number" name="number" min="1" max="5">
<input type="submit">
</form>
input rang类型
rang类型的input定义一个滑动条，可以滑动选值，需要设置值区间。
<form action="demo.php">
Value: <input type="range" name="Value" min="1" max="10">
<input type="submit">
</form>
input url类型
url类型的表单会校验输入的值是否合法url。
<form action="demo.php">
主页: <input type="url" name="site"><br>
<input type="submit">
</form>
input tel类型
tel类型定义输入电话号码字段，该字段被浏览器识别保存后，下次会推荐输入值，但对号码验证似乎还没比较好的支持。
<form action="demo.php">
电话号码: <input type="tel" name="tel"><br>
<input type="submit">
</form>
input search类型
search类型定义一个搜索字段，类似搜索引擎，该类型会对值进行保存和推荐。
<form action="demo.php">
Search: <input type="search" name="search"><br>
<input type="submit">
</form>
HTML5 input的输入类型很多，但主流浏览器对这些类型的支持情况不一样，使用前建议参考浏览器兼容性。
网友评论