表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。

form表单简介

一个完整的表单包含三个基本组成部分

• 表单标签
  是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
• 表单域
  是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等）
• 表单按钮
  用来提交< form >表单中所有信息到服务器
  *表单域和表单按钮都属于表单元素

form表单属性

form支持HTML的全局属性

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集
action	URL	规定当提交表单时向何处发送表单数据
autocomplete	on / off	规定是否启用表单的自动完成功能
enctype	application / x-www-form-urlencoded multipart / form-data text / plain	规定在向服务器发送表单数据之前如何对其进行编码（适用于 method=“post” 的情况）
method	get / post	规定用于发送表单数据的 HTTP 方法
name	text	规定表单的名称
target	_blank _self _parent _top	规定在何处打开 action URL

accept

以弃用

accept-charset

定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
语法:

<form accept-charset="value" >

常用值:

• UTF-8 - Unicode 字符编码
• ISO-8859-1 - 拉丁字母表的字符编码
• gb2312 - 简体中文字符集
  服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。
  理论上讲，可使用任何字符编码，但没有浏览器可以理解所有的编码。字符编码使用得越广泛，浏览器对其支持越好。

action

定义和用法: 必需的 action 属性规定当提交表单时，向何处发送表单数据。
语法:

<form action="value">

常用值:

• 绝对 URL - 指向其他站点（比如 src=“www.example.com/example.htm”）
• 相对 URL - 指向站点内的文件（比如 src=“example.htm”

autocomplete

定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>，以及下面的 < input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
语法:

<form autocomplete="on|off">

常用值:

• on 默认。规定启用自动完成功能。
• off 规定禁用自动完成功能。

enctype

定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
语法:

<form enctype="value"> 

常用值:

• application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
• multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的,窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
• text/plain 将空格转换为 “+” 符号，但不编码特殊字符,窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

method

定义和用法: method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）。

• 关于 GET 的注释：

  将表单数据以名称/值对的形式附加到 URL 中
  URL 的长度是有限的（大约 3000 字符）
  绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
  对于用户希望加入书签的表单提交很有用
  GET 更适用于非安全数据，比如在 Google 中查询字符串

• 关于 POST 的注释：

  将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
  没有长度限制
  通过 POST 提交的表单不能加入书签
  语法:

<form method="get|post"> 

常用值:

• get 默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value。
• post 以 HTTP post 事务的形式发送表单数据（form-data）。

name

定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
语法:

<form name="text">

常用值:
text 规定表单的名称。

novalidate

定义和用法: novalidate 属性是一个布尔属性。
novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。
语法: < form novalidate ="novalidate ">
常用值:

• novalidate 如果使用该属性，则提交表单时不进行验证。

target

定义和用法: target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。
语法:

<form target="_blank|_self|_parent|_top|framename">

常用值:

• _blank 在新窗口/选项卡中打开。

• _self 同一框架中打开。（默认）

• _parent 父框架中打开。

• _top 整个窗口中打开。

• framename 在指定的 iframe 中打开。

HTML 表单输入元素

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。
大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过< input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form><span>First name:<span><input type="text" name="firstname"><br><span>Last name:<span/><input type="text" name="lastname">
</form>

显示效果如下:

表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form><span>Password:<span/>
<input type="password" name="pwd"></form>

显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

< input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male"><span>Male<span/><br>
<input type="radio" name="sex" value="female"><span>Female<span/>
</form>

显示效果如下:

复选框（Checkboxes）

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br>
<input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>
</form>

显示效果如下:

提交按钮(Submit Button)

< input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
<span>Username:<span/>
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

fieldset标签

< fieldset> 标签可以将表单内的相关元素分组。
< fieldset> 标签会在相关表单元素周围绘制边框。

属性	值	描述
disabled	disabled	规定该组中的相关表单元素应该被禁用。
rmNew	form_id	规定 fieldset 所属的一个或多个表单。
name	text	规定 fieldset 的名称。

实例如下

<form><fieldset><legend>Personalia:</legend>Name: <input type="text"><br>Email: <input type="text"><br>Date of birth: <input type="text"></fieldset>
</form>

效果如下

标签

标签作为计算结果输出显示(比如执行脚本的输出)。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

效果如下