h5表单介绍与案例
<!DOCTYPE html>
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
新的输入类型如：
- email：类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。
- url：类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
- number：类型用于应该包含数值的输入域。 您还能够设定对所接受的数字的限定
- range：类型用于应该包含一定范围内数字值的输入域，类型显示为滑动条。 您还能够设定对所接受的数字的限定
- Date pickers (date, month, week, time, datetime, datetime-local)
- HTML5 拥有多个可供选取日期和时间的新输入类型：如下所示
1. date - 选取日、月、年
2.month - 选取月、年
3.week - 选取周和年
4.time - 选取时间（小时和分钟）
5.datetime - 选取时间、日、月、年（UTC 时间）
6. datetime-local - 选取时间、日、月、年（本地时间）
search：类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域
案例：
<html>
<head>
<meta charset="utf-8" />
<title>学生信息</title>
<style type="text/css">
fieldset {
width: 260px;
margin: 0 auto;
}
input {
width: 250px;
height: 30px;
}
i{
font: 16px/30px arial;
}
#but {
width: 255px;
height: 38px;
margin-top: 10px;
}
meter{
width: 255px;
height: 38px;
}
</style>
</head>
<body>
<fieldset>
<legend>学生信息</legend>
<form action="#" method="get">
<i>姓名：</i><br />
<input type="text" placeholder="请输入姓名" autofocus="autofocus" /><br />
<i>手机号码：</i><br />
<input type="tel" maxlength="11" pattern="^1[3578]\d{9}$" name="" /><br />
<i>邮箱：</i><br />
<input type="email" required="required" /><br />
<i>所属学校：</i><br />
<input type="text" list="school" /><br />
<datalist id="school">
<option value="华中农业大学"></option>
<option value="武汉大学"></option>
<option value="厦门大学"></option>
<option value="清华大学"></option>
</datalist>
<i>入学成绩：</i><br />
<input type="number" min="0" id="num" /><br />
<i>基本水平：</i><br />
<meter min="0" max="100" low="70" high="90" id="met"></meter><br />
<i>入学时间：</i><br />
<input type="date" /><br />
<i>毕业时间</i>：<br />
<input type="date" /><br />
<input type="submit" value="提交" id="but" /><br />
</form>
</fieldset>
<script type="text/javascript">
var num = document.getElementById("num");
var met = document.getElementById("met");
num.oninput = function(){
met.value = num.value;
}
</script>
</body>
</html>
图片显示：
