Thuộc tính enctype HTML chỉ định định dạng mã hóa cho dữ liệu biểu mẫu. Khi phương thức post được sử dụng thì thuộc tính enctype có thể được chỉ định.
Ở đây, thuộc tính enctype có thể có các giá trị sau -
| Giá trị | Mô tả |
|---|---|
| application / x-www-form-urlencoded | Đây là giá trị mặc định. Tất cả các ký tự được mã hóa trước khi chúng được gửi đi (dấu cách được chuyển đổi thành ký hiệu "+" và các ký tự đặc biệt được chuyển đổi thành giá trị ASCII HEX) |
| đa phần / biểu mẫu-dữ liệu | Nó không mã hóa các ký tự. Giá trị này là bắt buộc nếu người dùng đang sử dụng các biểu mẫu có kiểm soát tải lên tệp |
| văn bản / đơn giản | Với giá trị này, khoảng trắng kiểu enctype được chuyển đổi thành ký hiệu "+", nhưng không có ký tự đặc biệt nào được mã hóa |
Hãy để chúng tôi xem một ví dụ về HTML enctype tài sản:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML enctype attribute</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<fieldset>
<legend>HTML-enctype-attribute</legend>
<label for="EmailSelect">Email Id:
<input type="email" id="EmailSelect">
<input type="button" onclick="getUserEmail('david')" value="David">
<input type="button" onclick="getUserEmail('shasha')" value="Shasha"><br>
<input type="button" onclick="login()" value="Login">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
function getUserEmail(userName) {
if(userName === 'david')
inputEmail.value = 'davidMiller@MNC.com';
else
inputEmail.value = 'shashaGreen@MNC.com';
}
function login() {
if(inputEmail.value !== '')
divDisplay.textContent = 'Successful Login. Hello '+inputEmail.value.split("@")[0];
else
divDisplay.textContent = 'Enter Email Id';
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
1) Nhấp vào ‘Đăng nhập’ nút có trường email trống -
2) Sau khi nhấp vào ‘Đăng nhập’ nút có đặt trường email -
