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

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

form表单的作用

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

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

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

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

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

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

常见的Input标签

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

关于input的几个重要补充

1. 在input里，name 的作用

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

例如：

<input name=name value=Adam>
<input name=age value=18>

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

{
name:adam,
age:18
}

2. 分组

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

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="hobby" value="看书">看书
<input type="radio" name="hobby" value="打羽毛球">打羽毛球
在网页上效果是这样的，

image.png

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

3. placeholder 属性

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

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 表单使用

<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？

• <button>提交</button>定义一个按钮，。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
• <a class="btn" href="#">提交</a>是一个a标签定义的超链接，而其样式用class="btn"标记。
• <input type="submit" value="提交">定义了提交按钮，点击并向服务器发送表单数据。数据会发送到表单的 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编码类型application/x-www-form-url，POST编码类型application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
• GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。

其他资料阅读：

• CSRF 详解与攻防实战