HTML - enctype 属性

HTML enctype 属性用于指定在将表单输入数据发送到服务器之前应如何对其进行编码。

如果 method 属性的值为 post 并且存在于 <form> 元素中，则使用此属性。此属性的默认值为“application/x-www-form-urlencoded”。

语法

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

以下是 ‘enctype’ 属性的值

text/plain: 用于调试目的。
multipart/form-data: 如果表单包含类型为 file 的 <input> 元素，则使用此属性。
application/x-www-form-urlencoded: 定义在发送之前对所有字符进行编码。

这些值可以通过 <button>、<input type = submit> 或 <input type = image> 元素上的 formenctype 属性覆盖。

应用于

以下列出的元素允许使用 HTML content 属性

元素	描述
<form>	HTML <form> 标签用于定义用于输入用户数据的应用程序表单。

HTML enctype 属性示例

在以下示例中，我们在 <form> 元素中使用 HTML ‘enctype’ 属性，其值为“text/plain”。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'enctype' Attribute</title>
   <style>
      form {
         width: 300px;
         padding: 10px;
         border-radius: 10px;
         background-color: rgb(9, 109, 190);
      }

      form h1 {
         font-family: sans-serif;
         letter-spacing: 2px;
         color: white;
         text-align: center;
         position: relative;
         top: -20px;
      }

      form input {
         padding: 12px;
         width: 80%;
         border: 1px solid white;
         border-radius: 5px;
         outline: none;
      }

      form label {
         font-size: 20px;
         color: white;
         padding: 5px 5px;
      }

      form button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
         background-color: white;
         border: 1px solid white;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'enctype' attribute-->
   <h3>Example of the HTML 'enctype' attribute</h3>
   <p>We are assigning the "text/plain" value to the enctype attribute 
   which means the data is being sent as plain text.</p>
   <form action="index.js" enctype="text/plain" method="POST">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text" id='uname' placeholder="Username">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password" id='psw' placeholder="Password">
      <br>
      <br>
      <button type='submit' onclick="Login()">Login</button>
   </form>
   <script src="index.js"></script>
</body>
</html>

index.js

function Login(){
   var uname = document.getElementById("uname").value;
   var password = document.getElementById("psw").value;

   document.write("Username: " + uname);
   document.write("<br>");
   document.write("Password: " + password);
}

支持的浏览器

属性
enctype	是	是	是	是	是

html_attributes_reference.htm

打印页面