form 表单

主要内容： form表单的作用及常用的input 标签介绍，GET和 POST的区别。

form表单的作用及常用的input 标签

form表单的作用

HTML

元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息，拥有以下属性：

• action 一个处理这个form信息的程序所在的URL。

• autocomplete 用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。

• enctype 当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型，可能的取值有三个，application/x-www-form-urlencoded: 如果属性未指定时的默认值。multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的 元素。text/plain (HTML5)。

• method 浏览器使用这种 HTTP 方式来提交 form。 可能的值有get和post。

• target 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复

常见的Input标签

元素是最重要的表单元素 , 标签用于搜集用户信息。
常见的Input标签主要由type属性控制。如果这个属性没有指定，默认的类型是 text。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。常见的 input 标签如下 ：

类型	描述
text	定义常规文本输入 （文本字段的默认宽度是 20 个字符 ）。单行字段，换行会将自动从输入的值中移除。
placeholder	提供可描述输入字段预期值的提示信息（hint）；该提示会在输入字段为空时显示，并会在字段获得焦点时消失（placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password）
password	一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度
radio	单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
checkbox	定义复选框 , 必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）
submit	定义提交按钮（提交表单）
button	无缺省行为按钮。定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
file	此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
image	image 输入类型将图像定义为提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
reset	定义重置按钮(清除文本区域内容，重置所有表单值为默认值)
hidden	hidden 输入类型定义隐藏字段, 不显示在页面上的控件，但它的值会被提交到服务器。
color	HTML5 用于指定颜色的控件
date	HTML5 用于输入日期的控件（年，月，日，不包括时间）
datetime	HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local	HTML5 用于输入日期时间控件，不包含时区。
email	HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
file	此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
month	HTML5 用于输入年月的控件，不带时区。
number	HTML5 用于输入浮点数的控件。
range	HTML5 用于输入不精确值控件
reset	用于将表单所内容设置为缺省值的按钮。
search	HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel	HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
time	HTML5 用于输入不含时区的时间控件。
url	HTML5 用于编辑URL的字段。 换行会被自动从输入值中移除。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
week	HTML5 用于输入一个由星期-年组成的日期，日期不包括时区。

关于input的几个重要补充

1. 在input里，name 的作用

由于表单提交的数据一般都是以key:value的方式提交，所以input中的name属性主要用来标识提交的数据的key值，好让服务器处理程序分辨。

例如：

则服务器在后台收到的数据格式可能是这样的：

{
name:adam,
age:18
}

2. 分组

• 单选分组
  radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 每出现一次，一个 radio 对象就会被创建。
  使用radio的时候，可以用name 属性来进行分组， "name" 相同的为一组。比如下面这个， 其中男女为一组， 看书和羽毛球一组：

男
女
看书
打羽毛球
在网页上效果是这样的，

image.png

• 多选分组
  checkbox 对象代表一个 HTML 表单中的 一个选择框，同样是用name属性进行分组。

3. placeholder 属性

placeholder为HTML5的新属性。
placeholder 属性提供可描述输入字段预期值的提示信息（hint）；该提示会在输入字段为空时显示，并会在字段获得焦点时消失（placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password）
示例 ：

效果如下：

image.png

PS：当两个标签之间有空格时， placeholder的内容将不能被正确的显示（通常删一行才可以看到）。所以当你设置了placeholder属性， 而没有任何变化时， 不妨检查一下空格哦 !

4. type=hidden隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

• 暂存信息
  隐藏域的最常见用途之一是跟踪当提交编辑表单时需要更新哪些数据库记录。 典型的工作流程如下所示：
  ① 用户决定编辑他们可以控制的某些内容，例如博客文章或产品条目。 他们通过按编辑按钮开始。
  ② 要编辑的内容取自数据库并加载到HTML表单中，以允许用户进行更改。
  ③ 编辑后，用户提交表单，更新的数据将发送回服务器，以便在数据库中进行更新。

在步骤 ② 中，正在更新的记录的ID被保存在隐藏域中。 当表单在步骤 ③ 中提交时，ID将自动发送回具有记录内容的服务器。 ID允许站点的服务器端组件确切地知道需要使用提交的数据更新哪些记录。

• 提高网站安全性
  隐藏域也用于存储和提交安全令牌, 以提高网站安全性。 基本思想是form表单被提交时，服务器会收到验证信息，并通过一定的算法校验该验证信息，可以有效防止非法请求对数据库的增删改查。
  这将阻止恶意用户创建假冒险的表单，并将表单通过电子邮件发送给不知情的用户，以欺骗他们转移到错误的地方。 这种攻击称为跨站请求伪造（CSRF） ; 任何信誉良好的服务器端框架都使用隐藏的秘密来防止这种攻击。

举例：

1. 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey等。当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。

2. 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick=”document.form.command.value=”xx””然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

3. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。

4. JavaScript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。

5. 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

form 表单使用

提交、提交、三者有什么区别？

• 提交定义一个按钮，。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
• 提交是一个a标签定义的超链接，而其样式用class="btn"标记。
• 定义了提交按钮，点击并向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

常见问题

表单中readonly和disabled属性的区别

• 设置了readonly的input[text]在提交表单的时候还是会提交input上声明的数据。

• 设置了disabled的则不会提交input上声明的数据。

表单提交文件的正确方式

• 添加input[type=file]的input标签

• 设置表单的method为post

• 设置表单的enctype为multipart/form-data

如何无刷新提交表单

• 在页面设置一个iframe，设置好它的name属性值，用css控制他是'消失'的。

• 设置form的target属性为iframe的name属性即可。

默认情况下，form中的button按钮不声明type属性，则一律视为submit

post 和 get 方式的区别

在客户机和服务器之间进行请求-响应时，两种最常被用到的 HTTP方法 是 GET和 POST。
在form表单中，可以通过设置Method指定提交方式为GET或者POST提交方式，默认为GET提交方式。

	GET	POST
语义	从指定的资源请求数据 （获取数据 ）	向指定的资源提交要被处理的数据 （提交数据）
缓存	可被缓存	不会被缓存
历史	参数保留在浏览器历史记录中	参数不会保留在浏览器历史记录中
书签	可被收藏为书签	不能被收藏为书签
对数据长度的限制	有限制。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）	无限制
可见性	数据在 URL 中对所有人都是可见的 查询字符串（名称/值对）是在 GET 请求的 URL 中发送的（使用 GET 时，表单数据在页面地址栏中是可见的， URL 会跟着变化）	查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的（使用POST时， URL 不会变化）
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。GET 请求只应当用于取回数据 ， 不应在处理敏感数据时使用	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
幂等性	幂等	非幂等
用途	一般用于获取/查询资源信息	一般用于更新资源信息

GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）

• GET编码类型application/x-www-form-url，POST编码类型application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
• GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。

其他资料阅读：

• CSRF 详解与攻防实战