登录注册模块是几乎所有网站的必要模块，因此，设计一个精美的登录注册页面尤为必要。html5对input元素的功能进行了进一步的改进，下面就对学习的内容进行总结。
改良的input元素包括：
url类型 email类型 date类型 time类型 datetime类型 datetime-local类型
month类型 week类型 number类型 range类型 search类型 Tel类型 color类型
表单验证
email：必须输入email地址的文本框
url：必须输入url地址的文本框
number：必须输入数值的文本框
range：必须输入一定范围内数字值的文本输入框
tel：电话号码输入框
Date相关有好几种，date，month，week，time，datetime，datetime-local
为了方便下面结合事例讲解，再介绍几个表单input相关的新增属性。
autofocus：载入时自动获得焦点
placeholder：输入框提示用户输入什么内容
form：声明元素属于哪个表单，放在页面上任何位置，不一定在表单之内
required：不能为空，一定要输入内容
pattern：设置输入内容的类型 例如：pattern="[A-Z]{3}" 输入3个大写字母
此外还有autocomplete，min，max，，step（步伐）等等。
一下是举例：
<!--url类型-->
<form action="www.baidu.com">
<input name="url" type="url" value="http://www.baidu.com">
<input type="submit" value="提交" >
</form>
<!--email类型-->
<form>
<input name="email" type="email" >
<input type="submit" value="提交" >
</form>
<!--date类型-->
<form>
<input name="date" type="date" >
<input type="submit" value="提交" >
</form>
<!--time类型-->
<form>
<input name="time" type="time" >
<input type="submit" value="提交" >
</form>
<!--datetime类型-->
<form>
<input name="datetime" type="datetime" >
<input type="submit" value="提交" >
</form>
<!--datetime-local类型-->
<form>
<input name="datetimelocal" type="datetime-local" >
<input type="submit" value="提交" >
</form>
<!--month类型-->
<input name="month" type="month" value="2010-10-10"><br>
<!--week类型-->
<input name="week" type="week" ><br>
类似一个计算器模型，运用了javascript
<script>
function sum(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}
</script>
<!--number类型-->
<input name="number" type="number" value="15" max="100" step="5"><br>
<br>
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum()">
</form>
<!--range类型-->
<input name="range" type="range" value="25" min="0" max="100" step="5"><br>
<!--search类型-->
<input type="search"><br>
<!--tel类型-->
<input type="tel"><br>
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById("currentcolor").textContent=this.value;">
<span id="currentcolor"></span>
<script>
function change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<!--output类型--><!--进度条-->
<form id="testform">
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="change()">
<output id="output">10</output>
</form>
表单验证（以email为例）
<script>
function check(){
var email=document.getElementById("email");
if(email.value==""){
alert("请输入email地址");
return false;
}else if(!email.checkValidity())
{
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" novalidate="true">
<label for="email">Email</label>
<input name="email" type="email" id="email">
<input type="submit">
</form>
下面我们举一个完整的例子进行说明：
原文：http://www.cnblogs.com/lgeek/p/5162349.html