HTML enctype 语法
在 HTML 中，enctype 属性用于定义表单数据在提交到服务器时的编码方式。它只能应用于 form 元素。
语法：
<form enctype="编码类型">
</form>说明：
enctype 属性决定了表单数据如何在提交时进行编码。根据编码方式的不同，表单数据会以不同的格式发送到服务器。
enctype 属性取值有以下 3 种。
application/x-www-form-urlencoded（默认值）：表示在发送前对所有字符进行编码（空格会转换为 “+” 符号，特殊字符会转换为十六进制 ASCII 值）。这种方式适用于发送简单的文本数据，如用户名、密码等，但不适合用于上传文件。multipart/form-data：表示不对字符进行编码。在表单包含文件上传 <input type="file"> 元素时，必须使用此值。它表示将表单数据分割成多个部分，每个文件或字段都是一个独立的部分。text/plain：表示将空格转换为 “+” 符号，但不编码特殊字符。它不适合大多数实际的表单提交，因此该值主要用于调试目的，并且也不推荐在生产环境中使用。
注意: enctype 属性仅在 form 元素的 method="post" 时有效。如果 method 为 "get"，则浏览器会忽略 enctype 属性，而始终使用默认的 "application/x-www-form-urlencoded" 编码。
HTML enctype 摘要
| 适用元素 | form |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML enctype 示例
接下来，我们通过几个简单的例子来讲解一下 HTML enctype 属性是如何使用的。
示例 1：enctype 属性使用默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/index.php" method="post">
<p>
<label>
用户名：
<input type="text" name="username">
</label>
</p>
<p>
<label>
评论：
<textarea name="comment"></textarea>
</label>
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们并没有给 form 标签设置 enctype 属性，因此它会使用默认值 "application/x-www-form-urlencoded"。
当我们提交表单时，所有文本字段的数据都会被编码成 “key=value&key2=value2” 的形式，并发送到服务器。例如，如果用户名是 "Jack"，评论是 "Hello China!"，那么发送的数据可能类似下面这样的字符串：
username=Jack&comment=Hello+China%21示例 2：enctype 属性用于文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<p>
<label>
选择照片：
<input type="file" name="photo">
</label>
</p>
<p>
<label>
文件描述：
<textarea name="description"></textarea>
</label>
</p>
<p>
<button type="submit">上传文件</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们将 enctype 属性的值设置为 "multipart/form-data"。这样能够使得浏览器能够正确处理文件上传，将文件数据作为二进制流的一部分发送，同时也能发送其他表单字段（如 “description”）。如果缺少 enctype="multipart/form-data"，文件将无法被正确上传到服务器。
