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

列印頁面