HTML表单

最新推荐文章于 2024-09-18 10:06:00 发布

玲玲酱

最新推荐文章于 2024-09-18 10:06:00 发布

阅读量130

点赞数

分类专栏： # html5 文章标签： html html5

本文链接：https://blog.csdn.net/qq_45758587/article/details/108969776

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是表单

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，这时宽度是整数值，表示字符的数目，默认为20
maxlength	指定可以输入的字符的最大值。适用于控件类型为text,password

button表单控件

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

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

label表单控件

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

select表单组件

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

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