HTML5之表单示例

<form method=post><fieldset><ol><li style=height:30px;><label for=username>用户名</label><input name=username required autofocus type=text pattern=[a-zA-Z0-9]{6,16}><font color=red>*</font></li><li style=height:30px;><label for=uemail>邮　箱</label><input name=uemail placeholder=[e-mail] required type=email><font color=red>*</font></li><li style=height:30px;><label for=upwd>密　码</label><input name=upwd placeholder=请填写密码 required type=password><font color=red>*</font></li><li style=height:30px;><label for=age>年　龄</label><input type=text id=agetext name=agetext size=3><input name=age min=18 max=60 value=20 type=range onchange=checkAge(this);><span id=agev>最小18周岁</span></li><li style=height:30px;><label for=age2>数　字</label><input name=age2 min=18 max=60 placeholder=数字 type=number></li><li style=height:30px;><label for=tel>电　话</label><input type=tel name=tel></li><li style=height:30px;><label for=birthday>日　期</label><input name=birthday type=date></li><li style=height:30px;><label for=birthday>时　间</label><input name=birthday type=datetime></li><li style=height:30px;><label for=month>月　份</label><input name=month type=month></li><li style=height:30px;><label for=month>星　期</label><input name=month type=week></li><li style=height:30px;><label for=htturl>网　址</label><input name=htturl type=url></li><li style=height:30px;><label for=bgcol>颜　色</label><input name=bgcol type=color></li><li style=height:30px;><label for=search>搜　索</label><input name=search type=search results=s></li><li style=height:30px;><label for=list>列　表</label><input name=list type=text list=searchlist><datalist id=searchlist><option label=a value=我><option label=b value=你><option label=c value=他></datalist></li></ol></fieldset><div><input type=submit value=提交></div></form>