HTML表单介绍

常见问题

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

HTML 表单用于搜集不同类型的用户输入，能将数据顺利传送到后台。常用的input标签有：

标签名	作用
text	文本输入
radio	单选框
checkbox	多选框
textarea	多行文本输入
password	密码
button	按钮
submit	提交
file	文件
reset	复原
hidden	隐藏域

post 和 get 方式的区别？

原理区别：GET一般用于获取/查询 资源信息，而POST一般用于更新资源信息。
表现形式区别：GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变。因此对于GET提交时，传输数据就会受到URL长度的限制。同时，POST的安全性要比GET的安全性高。比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存， (2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击

在input里，name 有什么作用？

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

radio 如何 分组?

通过相同name属性进行分组

placeholder 属性有什么作用?

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

type=hidden隐藏域有什么作用? 举例说明

收集发送一些信息供服务器处理。
举例：获取用户当前的浏览器版本/系统的版本等。

---

用法

元素

HTML 表单用于收集用户输入。
元素定义 HTML 表单：
实例
.form elements .

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

元素

元素是最重要的表单元素。
元素有很多形态，根据不同的 type 属性。
text
定义常规文本输入。

radio
定义单选按钮输入（选择多个选择之一）

submit
定义提交按钮（提交表单）

文本输入
定义用于文本输入的单行输入字段：
实例

First name:

Last name:


单选按钮输入
定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
实例

Male
Female

提交按钮
定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
实例

First name:

Last name:




Action 属性

action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

或：

何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 "Last name" 输入字段：
实例
First name:

Last name:




用

组合表单数据

元素组合表单中的相关数据

元素为

元素定义标题。
实例

Personal information:

First name:

Last name:

以上 HTML 代码在浏览器中看起来是这样的：
Personal information:First name: Last name:

HTML Form 属性

HTML

元素，已设置所有可能的属性，是这样的：
实例
.form elements .

Here is the list of

attributes:

accept-charset
规定在被提交表单中使用的字符集（默认：页面字符集）。

action
规定向何处提交表单的地址（URL）（提交页面）。

autocomplete
规定浏览器应该自动完成表单（默认：开启）。

enctype
规定被提交数据的编码（默认：url-encoded）。

method
规定在提交表单时所用的 HTTP 方法（默认：GET）。

name
规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate
规定浏览器不验证表单。

target
规定 action 属性中地址的目标（默认：_self）。