input新增属性:
email
语法:<input type="email" name="">
说明:输入邮箱格式
tel
语法:<input type="tel" name="">
说明:输入手机号码格式
nember
语法:<input type="number" name="">
说明:输入数字格式
url
语法:<input type="url" name="">
说明:输入url格式
search
语法:<input type="search" name="">
说明:输入搜索框(体现语义化),后面多了个删除全部的红叉
range
语法:<input type="range" name="">
说明:自由拖动滑块
time
语法:<input type="time" name="">
说明:小时分钟
date
语法:<input type="date" name="">
说明:年月日
datetime
语法:<input type="datetime" name="">
说明:时间
month
语法:<input type="month" name="">
说明:月年
week
语法:<input type="week" name="">
说明:星期 年
color
语法:<input type="color" name="">
说明:颜色
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>HTML5新增属性验证效果</legend>
<form>
邮箱:<input type="email" name=""><br />
手机:<input type="tel" name=""><br />
数字:<input type="number" name=""><br />
URL:<input type="url" name=""><br />
搜索:<input type="search" name=""><br />
滑块:<input type="range" name=""><br />
时分:<input type="time" name=""><br />
年月日:<input type="date" name=""><br />
时间:<input type="datetime" name=""><br />
月年:<input type="month" name=""><br />
week:<input type="week" name=""><br />
颜色:<input type="color" name=""><br />
<input type="submit" name=""><br />
</form>
</fieldset>
</body>
</html>
效果如下: