html5表单新特性
学习的笔记，记录备忘。
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
<title>form表单</title>
<style>
form{width:300px;line-height: 38px;}
input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;padding-left: 6px;}
input[type="color"],input[type="submit"]{width:90px;}
#form_content,#article_content{float: left;}
#article_content{padding-left: 50px;}
</style>
</head>
<body>
<section id="form_content">
<form>
用户名 : <input type="text" placeholder="Please enter username" autofocus="autofocus" required/><br />
邮箱 : <input type="email" required/><br />
个人主页：<input type="url" required/><br />
生日：<input type="date" required/><br />
完善程度：<input type="range" max="10" min="0" value="2" step="2"/><br />
查找：<input type="search" results=s/><br />
选择颜色：<input type="color" /><br />
<input type="submit" value="提交" formaction="OneController.java" formmethod="post"/>
<input type="submit" value="取消" formaction="TwoController.java" formmethod="post"/>
</form>
</section>
<section id="article_content">
<hgroup>
<h2>表单新特性</h2>
</hgroup>
<article>
<p>①type添加了很多新内容自行尝试，其验证效果没有Jquery.validate效果好</p>
<p>②placeholder 提示信息</p>
<p>③autofocus 聚焦</p>
<p>④required 必填内容、pattern正则表达式验证</p>
<p>⑤重写form属性formation指向action，formmethod请求方法</p>
<p>⑥autocomplete="on/off" 打开或关闭自动补齐</p>
</article>
</section>
</body>
</html>