HTML | enctype 属性

在HTML中，enctype属性被用于定义表单数据的编码类型。在提交Form表单时，表单数据会被编码成指定的数据类型，并且传到后台服务器进行处理。enctype属性的默认值是application/x-www-form-urlencoded，但是在使用上传文件表单时需要把它设置为multipart/form-data。

语法

enctype 属性的语法如下所示：

<form action="..." method="POST" enctype="enctype_type">
    ......
</form>

• enctype_type属性表示的是表单中数据编码类型的值。

常用类型

以下是常见的 enctype 类型及使用场景说明：

1. application/x-www-form-urlencoded

默认的编码类型，通常在表单提交时使用它。它会将表单数据作为普通的 URL 查询参数（URL-encoded）形式进行编码，数据会通过 POST 方法或者 GET 方法来提交。如果不设置 enctype 属性，默认使用 application/x-www-form-urlencoded，使用该参数是必须的。

<form action="example.php" method="POST" enctype="application/x-www-form-urlencoded">
    <label for="username">用户名:</label>
    <input type="text" name="username">
    <br>
    <label for="password">密码:</label>
    <input type="password" name="password">
    <br>
    <input type="submit" value="提交">
</form>

2. multipart/form-data

当我们需要向服务器上传文件的时候，需要使用 multipart/form-data。该类型下，表单数据经过二进制编码，可以附带文件类型，通常使用POST方式执行提交。在使用 ajax 时，如果表单上传的文件超过 2M，或者需要多个文件上传，需要将 enctype 属性值设置为multipart/form-data。

<form action="example.php" method="POST" enctype="multipart/form-data">
    <!-- 其他表单数据 -->
    <input type="file" name="file">
    <br>
    <input type="submit" value="提交">
</form>

3. text/plain

该类型下，表单数据不会被编码，表单数据是纯文本格式，通常用于发送邮件或者将数据复制到纯文本控件。

<form action="example.php" method="POST" enctype="text/plain">
    <label for="username">用户名:</label>
    <input type="text" name="username">
    <br>
    <label for="password">密码:</label>
    <input type="password" name="password">
    <br>
    <input type="submit" value="提交">
</form>

总结

使用 enctype 属性能够确保在提交表单数据时不会丢失或错误。根据提交的具体情况合理使用不同的编码类型，可以提高表单数据的安全性以及系统的性能。