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);
}

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页