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=example@domain.com 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>