HTML5--常见的新属性（中）
上一篇文章：HTML5–常见的新属性（前）
表单相关属性
这里涉及到的标签，包括form标签、input标签、button标签、textarea标签、select标签、keygen标签、label标签等等。
新增属性主要包括以下几种：
- autocomplete
- novalidate和formnovalidate
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 与 width
- list
- min 、max与step
- multiple
- pattern (regexp)
- placeholder
- required
演示环境配置
为了方便演示，我使用了node.js，用于演示相关内容。
var http=require("http");
var querystring = require('querystring');
http.createServer(function(req,res){
switch(req.url){
case '/form':
if(req.method=="POST"){
console.log('[200]'+req.method+"to"+req.url);
var fullBody='';
console.log(req.url);
req.on("data",function(chunk){
fullBody +=chunk;
});
req.on("end",function(){
res.writeHead(200,"OK",{"Content-Type":"text/html;charset=utf-8"});
res.write(`
<html>
<head>
<title>Post datatitle>
head>
<style>
th,td{text-align:left;padding:5px;color:black}
th{background-color:grey;color:while;min-width:10em}
td{backgroun-color:lightgrey}
caption{font-weight:bold}
style>
<body>
<table border="1">
<caption>Form datacaption>
<tr><th>Nameth><th>Valueth>tr>
`);
fullBody=querystring.parse(fullBody);
for(var prop in fullBody){
res.write(`<tr><td>`+prop+`td><td>`+fullBody[prop]+`td>tr>`);
}
res.write(`table> body> html>`);
res.end();
});
}else{
console.log("[405]"+req.method+"to"+req.url);
res.writeHead(405,'Method not support',{"Content-Type":'text/html'});
res.end(`
<html>
<head>
<title>405-Method not supportedtitle>
head>
<body>
<h1>Method not supported.h1>
body>
html>
`)
}
break;
default:
res.writeHead(404,"Not found",{"Content-Type":"text/html"});
res.end(`
<html>
<head>
<title>404-Not foundtitle>
head>
<body>
<h1>Not found.h1>
body>
html>
`);
console.log('[404]'+req.method+"to"+req.url);
}
}).listen(8080)这段脚本将获取浏览器发来的数据，并汇总成一个简单的HTML文档(表格形式)。它在8080端口监听浏览器的连接请求，并且只处理浏览器用http post方法发送到/form这个URL的表单数据。
我们只要在其目录下启动它就好:
node form.js然后在打开浏览器本地端口：
http://localhost:8080/
这说明端口正常打开了，可以用于验证表单新属性了。
autocomplete属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。该属性有两个值:on和off。如果不设置这个属性的话，其默认值为on，表示允许浏览器填写表单（具体因浏览器而异，有的浏览器需要手动设置）。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
适用标签：
-
-
注意：
对于该属性，form标签作用于整个表单而input标签只作用于当前标签。如果是在form标签中开启了这个属性，那么其内部的input标签是默认开启这个属性的，除非手动关闭——。
代码测试：
<form method="post" action="http://localhost:8080/form" autocomplete="on">
账号：<input type="text" name="account"><br>
密码：<input type="password" name="password"><br>
<button>submitbutton>
form>浏览器最低版本号的支持：
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| 6 | 2 | 16 | 5.1 | 10.1 |
效果图 
novalidate属性和formnovalidate属性
novalidate 属性规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。
适用标签：
novalidate属性是form标签的专属属性。formnovalidate属性是form标签的子标签的属性，并且它会覆盖标签的novalidate属性。
它适用于以下标签：
不添加novalidate和formnovalidate属性：
<form method="post" action="http://localhost:8080/form" autocomplete="on">
Email：<input type="email" name="account"><br>
<button>submitbutton>
form>如果是，则会出现相关提示： 
添加novalidate属性
<form method="post" action="http://localhost:8080/form" autocomplete="on" novalidate>
Email：<input type="email" name="account"><br>
<button>submitbutton>
form>添加formnovalidate属性
<form method="post" action="http://localhost:8080/form">
Email：<input type="email" name="account"><br>
<button formnovalidate>submitbutton>
form>
效果图 : 
浏览器的支持情况：
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| 10或以上版本 | 支持 | 支持 | 不支持 | 支持 |
注意：
在HTML 与 XHTML 之间该属性存在差异——在 XHTML 中，禁止属性最小化，novalidate 属性必须定义为 。
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
适用标签：