Skip to content

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

New issue
New issue
Open
Open
[html] 第23天 关于<form>标签的enctype属性你有哪些了解？#78
Labels
htmlhtml
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on May 8, 2019
Collaborator

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

Activity

haizhilin2013
added
htmlhtml
on May 8, 2019
chenfaxiang

chenfaxiang commented on May 9, 2019

@chenfaxiang
chenfaxiang
on May 9, 2019

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

kokokele commented on Jul 15, 2019

@kokokele
kokokele
on Jul 15, 2019

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

这个比较全面。
少了 json

Konata9

Konata9 commented on Aug 7, 2019

@Konata9
Konata9
on 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

seho-dev commented on Aug 9, 2019

@seho-dev
seho-dev
on Aug 9, 2019

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

blueRoach

blueRoach commented on Jun 15, 2020

@blueRoach
blueRoach
on Jun 15, 2020

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

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

CoderLeiShuo commented on Jul 31, 2020

@CoderLeiShuo
CoderLeiShuo
on Jul 31, 2020

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

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后面
smile-2008

smile-2008 commented on Sep 23, 2020

@smile-2008
smile-2008
on 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

amikly commented on Nov 10, 2021

@amikly
amikly
on Nov 10, 2021 · edited by amikly

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

Iambecauseyouare commented on Mar 8, 2023

@Iambecauseyouare
Iambecauseyouare
on Mar 8, 2023

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @kokokele@smile-2008@haizhilin2013@Konata9@chenfaxiang

        Issue actions
          [html] 第23天 关于<form>标签的enctype属性你有哪些了解？ · Issue #78 · haizlin/fe-interview