Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第23天 关于<form>标签的enctype属性你有哪些了解？ #78

Open
haizhilin2013 opened this issue May 8, 2019 · 9 comments
Open

[html] 第23天 关于<form>标签的enctype属性你有哪些了解？ #78

haizhilin2013 opened this issue May 8, 2019 · 9 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第23天 关于<form>标签的enctype属性你有哪些了解？
@haizhilin2013 haizhilin2013 added the html html label May 8, 2019
@chenfaxiang
Copy link

form 标签的 enctype 属性指定将数据回发到服务器时浏览器如果对表单数据进行编码，其有三种编码形式：

  1. application/x-www-form-urlencoded(也是默认格式)
    application/x-www-form-urlencoded编码类型会将表单中发送到服务器之前都会进行编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)，数据编码成键值对的形式，当表单的action为post时，它会把form数据封装到 http body 中，然后发送到服务器；当表单的action位get时，它会把表单中发送的数据转换成一个字符串(如：a=1&b=2&c=3)并使用?连接到 url 后面。在不指定 enctype 属性时 application/x-www-form-urlencoded 是默认属性。
  2. multipart/form-data
    它不对字符进行编码，在使用包含文件(如图片、mp4等文件)上传控件的表单时必须使用该值
  3. text/plain
    数据以纯文本格式进行编码，空格转换为 "+" 加号，但不对特殊字符编码

@kokokele
Copy link

https://blog.csdn.net/bigtree_3721/article/details/82809459

这个比较全面。
少了 json

@Konata9
Copy link

Konata9 commented Aug 7, 2019

<form> 标签的 enctype 属性，用来控制表单上传的数据的编码格式。其值和 HTTP 请求的 Content-type 值一样。在数据提交到服务器之前，会以 enctype 的值进行编码。

enctype 对应的值如下

值 用法
application/x-www-form-urlencoded 默认值，会对所有字符转进行编码 （将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）
multipart/form-data 不会对字符进行编码，当表单中有文件时必须要此编码
text/plain 将空格转换为 "+" 符号，但不编码特殊字符

参考文章:
HTML <form> enctype 属性

@seho-dev
Copy link

seho-dev commented Aug 9, 2019

代表了form表单提交的数据发送到服务器如何进行编码，
默认是会对所有字符进行编码，空格转换+，特殊字符转换ASCLL
muitipart/form-data 不对字符进行编码，传递文件时该值是必需的
text/plain 对空格进行编码，剩余不编码

@blueRoach
Copy link

规定了form表单提交时发送到服务器的数据如何变编码

  • application/x-www-form-urlencoded | 在发送前编码所有字符（默认）
  • multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
  • text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。

@CoderLeiShuo
Copy link

借助前辈们的力量，再整理一下：

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码

注意：只有method = "post"时才使用enctype属性。

语法

<form enctype="value"></form>

属性值

值 描述
application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain 将空格转换为 "+" 符号，但不编码特殊字符。

上面的话太笼统？那看下面的解释吧：

  1. 当你指定了method = "post"时，就会用到enctype属性，这个属性可以设置三 种类型的值。如果你没有设置enctyp的值，那么它将会使用默认值application/x-www-form-urlencoded

  2. application/x-www-form-urlencoded编码类型：

    • 在不指定 enctype 属性时 application/x-www-form-urlencoded 是默认属性。

    • 会将表单中发送到服务器之前都会进行编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)，数据编码成键值对的形式

    • 当表单的action为post时，它会把form数据封装到 http body 中，然后发送到服务器；

    • 当表单的action为get时，它会把表单中发送的数据转换成一个字符串(如：a=1&b=2&c=3)并使用?连接到 url 后面。

  3. multipart/form-data：它不对字符进行编码，在使用包含文件(如图片、mp4等文件)上传控件的表单时必须使用该值

  4. text/plain：数据以纯文本格式进行编码，空格转换为'+'号，但不对特殊字符编码

示例

HTML代码如下：

<body>
    <form action="" enctype="application/x-www-form-urlencoded">
        First name: <input type="text" name="fname">
        Last name: <input type="text" name="lname">
        <input type="submit" value="提交">
    </form>
</body>

这段代码有以下几点需要注意：

  1. form的提交行为需要通过type=submit实现
  2. form中的method属性不指定时，默认的提交方式为get请求，那么也就是说如果不指定method为post，那么是不会使用enctype属性的。
  3. form表单的enctype属性是application/x-www-form-urlencoded

网页页面如下：

image-20200731103529766

例如：在上图中的表单填写相应的信息后，进行提交。可以注意到：

  • 表单中含有的空格被转换成了+号
  • 当表单的action为ge时，表单中发送的数据被通过?连接，连接到原url后面

@MrZ2019
Copy link

MrZ2019 commented Sep 23, 2020

form 标签的 enctype 属性指定将数据回发到服务器时浏览器如果对表单数据进行编码，其有三种编码形式：

application/x-www-form-urlencoded(也是默认格式)
application/x-www-form-urlencoded编码类型会将表单中发送到服务器之前都会进行编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)，数据编码成键值对的形式，当表单的action为post时，它会把form数据封装到 http body 中，然后发送到服务器；当表单的action位get时，它会把表单中发送的数据转换成一个字符串(如：a=1&b=2&c=3)并使用?连接到 url 后面。在不指定 enctype 属性时 application/x-www-form-urlencoded 是默认属性。
multipart/form-data
它不对字符进行编码，在使用包含文件(如图片、mp4等文件)上传控件的表单时必须使用该值
text/plain
数据以纯文本格式进行编码，空格转换为 "+" 加号，但不对特殊字符编码

@amikly
Copy link

amikly commented Nov 10, 2021 •
edited

HTMLFormElement.enctype 属性常用来指明提交表单的内容类型，可选的值如下：

  • application/x-www-form-urlencoded: 初始的默认值
  • multipart/form-data: 适用于使用input标签上传文件
  • text/plain: HTML5 引入的类型

这些值可以通过元素 button和input 的属性form.enctype来改写
设置表单的MIME编码，就是设置enctype的值。默认值为"application/x-www-form-urlencoded"，默认值不支持文件上传
如果要上传文件的话，是一定要将encotype设置为multipart/form-data

@Iambecauseyouare
Copy link

form 标签的 enctype 属性指定将数据回发到服务器时浏览器如果对表单数据进行编码，其有三种编码形式：

application/x-www-form-urlencoded(也是默认格式)
application/x-www-form-urlencoded编码类型会将表单中发送到服务器之前都会进行编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)，数据编码成键值对的形式，当表单的action为post时，它会把form数据封装到 http body 中，然后发送到服务器；当表单的action位get时，它会把表单中发送的数据转换成一个字符串(如：a=1&b=2&c=3)并使用?连接到 url 后面。在不指定 enctype 属性时 application/x-www-form-urlencoded 是默认属性。
multipart/form-data
它不对字符进行编码，在使用包含文件(如图片、mp4等文件)上传控件的表单时必须使用该值
text/plain
数据以纯文本格式进行编码，空格转换为 "+" 加号，但不对特殊字符编码

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@kokokele @MrZ2019 @haizhilin2013 @Konata9 @chenfaxiang @blueRoach @seho-dev @amikly @CoderLeiShuo @Iambecauseyouare