form 元素属性

form 元素共 8 个属性，其中 action 和 name 属性为必需项。

name 表单名称

accept-charset 字符集

action 提交地址

target 打开方式

enctype 数据编码

method 数据发送

autocomplete 自动完成

novalidate 表单验证

[1] name 表单名称

<form method="get" action="form.php" name="test"></form>    

// Javascript可以使用document.forms.test来获取该表单
<script>
    var oForm = document.forms.test;
    console.log(oForm.method);//get
</script>

// Javascript可以使用document.forms.test来获取该表单

var oForm = document.forms.test;

console.log(oForm.method);//get

</script>

[2] accept-charset 字符集

它是一个空格分隔的字符集列表，规定了服务器处理表单数据所接受的字符集；它允许指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据。该属性的值是用引号包含字符集名称列表。

如果可接受字符集与用户所使用的字符即不相匹配的话，浏览器可以选择忽略表单或是将该表单区别对待。

此属性的默认值是 "unknown"，表示表单的字符集与包含表单的文档的字符集相同。

之前版本的 HTML 中，不同字符编码可以用空格或逗号分隔。HTML5 中，只有空格可以允许作为分隔符。

[3] action 提交地址

action 属性规定提交表单时，向何处发送表单数据；如果忽略这个属性，表单会重定向到表单所在的 URL。这个值可以被 button 或者 input 元素中的 formaction 属性重载。

[4] target 打开方式

target 属性规定在何处打开 action URL。共 5 个值：_blank、_self、_parent、_top、framename。

[5] enctype 数据编码，规定在发送到服务器之前应该如何对表单数据进行编码。

大多数情况下该属性不需要设置。这个值可以被 button 或者 input 元素中的 formenctype 属性重载。

当 method 属性值为 post 时， enctype 是提交 form 给服务器的内容的 MIME 类型。可能的取值有：

application/x-www-form-urlencoded 在发送前编码所有字符（默认）

multipart/form-data 　　　　　　　　不对字符编码。使用包含文件上传控件的表单时，必须使用该值

text/plain 　　　　　　　　　　　　空格转换为 "+" 加号，但不对特殊字符编码

[6] method 数据发送

表单可以用两种方式（method）发送数据：GET和POST，默认为 GET 方法。这个值可以被 button或者input元素中的 formmethod 属性重载。

01. POST方法

如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

服务器端，一旦 POST 的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值前，须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

[ 应用场景 ]

大数据处理，因为 POST 方法相比 GET 方法而言，处理更多字段。

安全数据，因为 GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录；而 POST 方法则没有这方面的漏洞。

02. GET方法

如果采用 GET 方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

[ 应用场景 ]

获得最佳表单传输性能，因为 GET 发送只有少数简单字段。

简单处理，因为 GET 方法无需处理编码解码方法。

传参处理，因为 GET 方法允许把表单的参数包括进来作为 URL 的一部分。

<h3>get方法</h3>
<form method="get" action="form.php" target = "_blank">
    <p><label>x:<input name="x"></label></p>
    <p><label>y:<input name="y"></label></p>
    <p><button type="submit">Submit</button></p>
</form>    
<a title="form.php?x=28&y=66" href="form.php?x=28&amp;y=66">a标签传参</a>
<h3>post方法</h3>
<form method="post" action="form.php"  target = "_blank">
    <p><label>x:<input name="x"></label></p>
    <p><label>y:<input name="y"></label></p>
    <p><button type="submit">Submit</button></p>
</form>

<h3>get方法</h3>

<p><button type="submit">Submit</button></p>

</form>

<a title="form.php?x=28&y=66" href="form.php?x=28&y=66">a标签传参</a>

<h3>post方法</h3>

<p><button type="submit">Submit</button></p>

</form>

//GET方法的URL显示为： http://127.0.0.1/form.php?x=1&y=2
//POST方法的URL显示为：http://127.0.0.1/form.php
<p>
<?php
if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){
    echo "x: " .$_REQUEST["x"] ."<br>";
    echo "y: " .$_REQUEST["y"];
}
?>    
</p>

//GET方法的URL显示为： http://127.0.0.1/form.php?x=1&y=2

//POST方法的URL显示为：http://127.0.0.1/form.php

<p>

<?php

if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){

echo "x: " .$_REQUEST["x"] ."<br>";

echo "y: " .$_REQUEST["y"];

}

</p>

[7] autocomplete 自动完成

autocomplete 是 HTML5 新增的一个属性，规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

[注意] IE 浏览器不支持该属性，只有元素拥有 name 属性，该属性才有效。

<form autocomplete="on | off"> // 该属性默认为on，当设置为off时，规定禁用自动完成功能

1

<form autocomplete="on | off">  // 该属性默认为on，当设置为off时，规定禁用自动完成功能

<button id="btn1">打开自动完成</button> <button id="btn2">关闭自动完成</button> <form method="get" action="#" name="test"> <p><label>x:<input name="x"></label></p> <p><label>y:<input name="y"></label></p> <p><button type="submit">Submit</button></p> </form> <script> var oForm = document.forms.test; btn1.onclick = function(){ oForm.autocomplete = 'on'; }; btn2.onclick = function(){ oForm.autocomplete = 'off'; }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<button id="btn1">打开自动完成</button>
<button id="btn2">关闭自动完成</button>
<form method="get" action="#" name="test">
    <p><label>x:<input name="x"></label></p>
    <p><label>y:<input name="y"></label></p>
    <p><button type="submit">Submit</button></p>
</form>
<script>
var oForm = document.forms.test;
btn1.onclick = function(){
    oForm.autocomplete = 'on';
};
btn2.onclick = function(){
    oForm.autocomplete = 'off';
};
</script>

[8] novalidate 表单验证 // IE9- 不支持

novalidate 是 HTML5 新增的一个属性，规定当提交表单时不对其进行验证。