HTML表单

什么是表单

Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给 Web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件 组成，这些表单控件是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，使用表 单控件时一般要配合label标签，用于描述其目的。Form标签可用属性如下：

action： 用于处理表单信息的应用程序的地址。 method ：浏览器用来提交表单的HTTP方法，常用的get/post。 get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔 post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。 name 设定表单的名称 target 表示浏览器接收到form的提交信息后在哪里显示回应。 _self 在当前选项卡打开响应内容 _blank 在新选项卡打开响应内容

补充说明一下get/post

表单数据的内容类型

通过enctype属性设定表单数据的内容类型

1.application/x-www-form-urlencoded

在发送前编码所有字符（默认）使用到的编码方式,会将表单内的数据转换为键值对，比如,name=java&age = 23

1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用 来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里 HH表示两个十六进制数字，代表该字符的ASCII码）进行转换

2）控件的“名称/值”对按照它们在文档数据流中出现的顺序列出来。“名称”“值”使 用“=”分割，两个“名称/值”之间使用&隔开。(查询字符串)

2.multipart/form-data 不对字符编码。

在使用包含【文件上传控件】的表单时，必须使用该值。数据分 成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一 个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部 分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的 格式是： Content-Disposition:form-data;name="myControl"

它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；

由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。

3.text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

multipart/form-data与x-www-form-urlencoded区别

multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息； x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。

Input表单控件

Input控件用于接受来自用户的数据

type属性，用于设定控件类型，取值如下：

text单行文本框password密码框，输入的内容将会被遮挡checkbox复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选 中。radio单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认 选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的 某一个控件。submit提交按钮reset重置按钮file文件按钮，该控件用于选中文件系统中的某个文件hidden隐藏域，该控件不显示在页面中，但是其值会被提交。image图像按钮，必须使用src来加载图片，使用alt来声明替换文本。button普通按钮name用于设定控件名和提交数据的属性名value用于控件值初始化，可选checked单选框，复选框默认选中属性disabled表示禁用组件，禁用组件的值也不能被提交size当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20maxlength指定可以输入的字符的最大值。适用于控件类型为text,password

button表单控件

按钮控件，在form表单内的按钮有提交表单的功能。其可用属性如下：

type指定控件类型 取值：button，submit，resetname按钮名称

label表单控件

label 用于表示某一表单控件的标题 ， for 与为设定标题的表单控件的ID值一致

select表单组件

select用于表示下拉列表或列表，其可用属性如下：

multiple指定控件类型 ，布尔类型的值，表示是否允许多选，如果select元素不包含属性size和属性 multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中 的任意一个，则表单类型显示为列表框。size显示的行数 ，当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示。disabled表示禁用控件，禁用控件的值也不能被提交name用于指定该组件的名字，会与其option子元素的value值组成键值对随其 他表单数据一齐被提交

option表单组件

option用于表示选项，常包含在 <select>, <optgroup>中

disabled 表示禁用组件，禁用组件的值也不能被提交 value 定义控件的初始值。提交表单时，初始值会被提交给服务器selected 表示该选项默认被选中

optgroup表单组件

optgroup用于表示包含option的选项组，常包含在<select>中

disabled 表示禁用组件，禁用组件的值也不能被提交 label 表示选项组的名称

textarea

textarea用于表示多行文本框，没有value属性，其值被包含在标签内

rows 定义文本框的行数 cols 定义文本框的列数 disabled 表示禁用控件，禁用组件的值也不能被提交 readonly 表示该控件只读，其值依然会被提交 name 用于指定该控件的名字，会随着其值一同被提交到后台

fieldset控件

fieldset控件用于在一个web表单中对多个控件和标签进行分组

disabled :禁用filedset元素，该属性会影响fieldset的子元素

name :fieldset元素的名称

fieldset的标题由<legend>标签提供

progress

progress表示任务的完成情况，常用于进度条

max 定义进度元素所要求的任务的工作量，默认值为1 value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小 数。

output

output 表示用户动作产生的结果

name 定义元素的名称 for 其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)， 语义上的含义，但是未实现功能。

媒体元素

音频：<audio src="" controls autoplay loop muted></audio>

视频：<video src="" controls autoplay loop muted></video>