一.什么是表单

格式：

作用：
form表单一般用来收集用户的信息，并把信息传送到后台。
注意点：
1.在浏览器中所有表单标签都有特殊的外观和默认功能格式。
2.表单能够包含input标签,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含非input 标签 menus textarea fieldset legend label 等。

二.标签

格式：

作用：
标签用于为用户输入创建 HTML 表单。
常用属性：
name: 表单提交时的名称
action: 提交到的地址
method: 规定用于发送 form-data 的 HTTP 方法，提交方式：get和post
enctype:规定在发送表单数据之前如何对其进行编码
application/x-www-form-urlencoded：在发送前编码所有字符（默认）
text/plain：空格转换为 "+" 加号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

三.表单提交方式method取值post 和 get 的区别

1.get提交可以在url中看到提交信息，post则是提交到后台。
2.get通常用于提交少量数据得到大量数据，一般用于获取查询信息，比如搜索。post则相反，一般用于更新资源信息，上传数据然后得到回馈信息，如提交博客。
3.get提交的数据一般受浏览器的限制，大小在1kb字节以内。post理论上大小无限制，只受服务器的性能限制。
4.get请求的数据会保留在浏览器历史记录中，安全性不好，所以信息提交一般使用post。

四.表单中的标签

格式：

作用：
标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用属性:

属性	取值	作用
name	---	定义 input 元素的名称
type	button/checkbox/file hidden/image/password radio/reset/submit/text	规定 input 元素的类型
checked	checked	加checked属性会默认选上
placeholder	---	用于在输入框中显示提示信息。输入文字时消失，不会被提交
maxlength	number	规定输入字段中的字符的最大长度
value	---	规定 input 元素的值
disabled	disabled	当 input 元素加载时禁用此元素,就是禁止输入
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）

注意点：
1.都要有name属性,用于向提交到后台的信息进行命名，若无name则后台会自动忽略该条信息。
2.action提交地址若不填写则会直接提交到当前页面。
3.所有的可以添加属性 disabled来禁用输入。
4.中除了提交按钮和重置按钮所有标签都可以添加value属性。用来指定将来提交到服务器的值。
更多属性请查阅w3c

五.常用type类型：

给标签添加不同的type属性取值可以让有多种类型，结合起来可以组成一个
表单。

type="text"：文本输入框，用于文本输入。
格式：

注意点：
标签中添加value属性可以用来给输入框设置默认文本。

type="password"：密码输入框，输入时显示星号。
格式：

注意点：
标签中添加value属性可以用来给输入框设置默认密码。

type="radio" : 单选圆圈按钮，name要相同才能实现单选，value要有值
格式：

 男
 女

注意点：
若想默认单选其中一个，可以在标签中添加checked属性。

type="checkbox" ：多选框，加checked属性会默认选上。提交时，如果选中（如bike），则bike=on
格式：

自行车
汽车

注意点：
多选框中一般必须填写每一个选项的name可以把name设置为同一个名字，然后分别设置不同的value值时

type="submit"： 提交按钮用于提交填好的信息
格式：

注意点：
form表单有另一种设置提交按钮的方式，即在form中使用button标签，这个按钮放在 form 中也会点击自动提交，提交的内容不光可以有文字，还可以有图片等多媒体内容，缺点是不同的浏览器得到的value值不一样，可能还会有其他的兼容问题。
格式：

type="reset"： 重置按钮用于清空表单中的数据。
格式：

注意点：
重置按钮上的文字默认为"重置" ，若想改变文字可以通过value修改。

type="button"：按钮
格式：

注意点：
可以通过value给按钮制定标题，通常配合JS使用。

type="hidden"： 隐藏域用户看不到，用于暂存数据。或者安全性校验
格式：

六.type="hidden"：隐藏域的作用

1.隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2.有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3.有些时候一个form里有多个提交按钮，如需使程序能够分清楚到底用户是按那一个按钮提交上来的，我们就可以写一个隐藏域，然后在每一个按钮处加上="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4.有时候一个网页中有多个form，但多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5.javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
例子:
比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

七.表单中的其它标签

标签文本域
格式：

作用：
文本域用于输入多行文本。
注意点：
1.默认情况下输入框可以无限换行，输入框有自己的宽度和高度。
2.默认情况下输入框可以手动拉伸。
3.可以给标签添加cols和rows属性来定义宽度和高度。
例

标签下拉列表
格式：

作用：
用于定义下拉列表。
注意点：
1.下拉列表不能输入，但是可以选择，也可以设置默认选项。
2.可以使用标签把下拉列表进行分组，类似建立一个列表。格式如下：

标签聚焦
格式：

作用：
标签为input 元素定义标注（标记）。在 label元素内点击文本，就会触发此控件。就是说，当用户选择label 元素内包裹的文本，浏览器就会自动将焦点转到和该文本相关的表单控件（输入框等）上。
注意点：
1.使用步骤：将文本用标签包裹起来，给文本相关的表单控件绑定的（输入框等）设置一个id名。最后在标签中设置for属性的值为id。
2.另一种聚焦格式，不过此种格式只能设置文本与表单控件单独在一行的时候，有很大的局限性。格式如下：


  账号:

标签待选项
格式：

作用：
标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。就是说给输入框绑定待选项。
注意点：
一般直接在标签中用list属性绑定。

type中的一些参数设定可检验输入框中输入的内容是否符合格式，不过部分浏览器不支持，特别是ie全部不支持。例如：

邮箱 
域名 
电话 
日历 
搜索 
范围 
颜色

作者：饥人谷_刘冲
链接：https://www.jianshu.com/p/6f1c51685c55

ITPub博客

6-HTML< form>表单标签和属性