url
test1.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>s</title></head><body>url提交成功</body></html>
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form ??action="test1.html" ?method="post"> ????<input type="url" ??name="url" value="http://baidu.com"> ??????<input type="submit" ?value="提交"></form></body></html>
效果：
test1.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>s</title></head><body>email提交成功</body></html>
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form ??action="test1.html" ?method="post"> ????<input type="email" ??name="email" value="1774761877@qq.com"> ??????<input type="submit" ?value="提交"></form></body></html>
效果：
date
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form ??> ????<input type="date" ??name="date" value=""></form></body></html>
效果：
time
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form ??> ????<input type="time" ??name="time" value="10:00"></form></body></html>
效果：
month
test..html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form> ????<input type="month" ??name="month" ?value="2017-9-3"></form></body></html>
效果：
week
test.html
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>test</title>
</head>
<body>
<form>
???<input type="week" ??name="week" ?value="">
</form>
</body>
</html>
效果：
number
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form> ???<input type="number" ??name="number" ?value="20" ?min="10" max="100" step="10"></form></body></html>
效果：
range
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form> ???<input type="range" ??name="range" ?value="20" ?min="10" max="100" step="5"></form></body></html>
效果：
color
test.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title></head><body><form> ???<input type="color" ??name="color" ??????????onchange="document.body.style.backgroundColor=document.getElementById(‘currentColor‘).textContent=this.value" > ????<span id="currentColor"> ????</span></form></body></html>
效果：
2017-09-03 11:02:15
html5 新增和改良的input 类型实例
原文地址：http://www.cnblogs.com/guangzhou11/p/7468974.html