js form 表单属性学习

一、<form></form>标签      引用借鉴：http://www.cnblogs.com/fizx/p/6703370.html

form标签的属性规定了当前网页上传数据的地址和方式。

1.1 action 属性（常用）

action：接受请求的URL；URL为处理上传数据的页面。

1.2 method 属性（常用）

method属性有两种，分别为：get、post

get：

1>采用 GET 方法发送数据时，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action 的 URL 之后，这两者之间用问号进行分隔。这种方式并不安全，因为上传的数据可以直接在URL中反映出来。

2>GET方法提交数据后的URL链接是可以添加书签的，每次打开该书签都相当于向服务器提交了相同的数据。

3>URL的长度是有限的（约3000字符），所以get方式经常用来提交较小的数据。

4>结合以上特性，一般使用get方式来提交非敏感内容，比如说搜索查询。不仅速度较快，还可以将页面保存到书签之中

post：

1>采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系；一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。通过这种方式来上传数据安全性较高。

2>POST方法上传的数据没有长度限制，可以传输大量的数据，所以在上传文件只能使用Post。

3>大多数情况都应该使用POST方式进行数据的传输。

1.3.accept-charset

accept-charset属性的值规定了服务器使用哪一种字符集编码来处理本页面所上传的数据。常用的有“UTF-8”、“ISO-8859-1"、"gb2312"等。

一般不推荐使用。默认属性为：unknown  意思是与当前html 使用相同的字符集。

服务器端可以来验证

1.4.name属性

Form 标签元素自身并没有数据传输，它的 name 属性只是提供了一种在脚本中引用表单的方法。与此同时，form标签元素内的数据都是通过name来传递的，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

其余属性还有：

5.enctype属性

Enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

1>默认的属性是application/x-www-form-urlencoded，意味着在发送前对所有字符进行编码，把 "+" 转换为空格，并且把特殊字符转换为 ASCII 十六进制值。在不涉及文件传输时，一般使用这种方式。

2>multipart/form-data，这种编码类型不对字符编码，数据通过二进制的形式传送到服务器端。这个是专门用来传输特殊类型数据的，当我们上传文件时，比如图片、视频、MP3等，必须要使用这种编码方式。它的编码方式为：把form的内容瓜分成段，每段代表一个input属性，每个段落间用分隔符隔开。其中每个段落登记这个段落的消息，例如Content-Disposition，name，Content-Type等等，还有这个段落与下个段落的分隔符boundary，以及这个段落的value数据。

3>text/plain，将内容设置为纯文本的形式，空格转换为 "+" 加号，但不对特殊字符编码。

6.target属性

Form标签的target属性和a标签的功能相似，规定了在何处打开表单上传后的处理页面。

1>_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
2>_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
3>_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
4>_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

7.autocomplete属性（HTML5新增属性）

Autocomplete 属性规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在该字段中填写过的选项，从而简化用户的输入。autocomplete只有两个值，on 和 off，分别对应启用和关闭这个功能。默认值为on。

8.novalidate

Novalidate属性规定当提交表单时不对其进行验证。通过将novalidate=novalidate属性放置到form元素上，form元素的原生校验特征就会忽略，这样就可以防止它同JavaScript的校验方法起冲突。