Thuộc tính enctype HTML DOM Form được liên kết với thuộc tính enctype của phần tử biểu mẫu. Thuộc tính này đặt hoặc trả về giá trị thuộc tính enctype của biểu mẫu. Thuộc tính enctype chỉ được sử dụng nếu giá trị thuộc tính phương thức là “POST”. Thuộc tính enctype được sử dụng để chỉ định dữ liệu trong biểu mẫu được gửi phải được mã hóa.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính enctype -
formObject.enctype = encoding
Ở đây, mã hóa có thể là “application / x-www-form-urlencoded”, có nghĩa là tất cả các ký tự đều được mã hóa trước khi được gửi và đây là mã hóa mặc định.
Một mã khác là “multiart / form-data”, chỉ định rằng không có ký tự nào nên được mã hóa và được sử dụng để tải tệp lên máy chủ.
Cách mã hóa thứ ba là “văn bản / thuần túy” và nó chỉ chuyển đổi khoảng trắng thành biểu tượng “+” và không có mã hóa nào khác. Không nên sử dụng mã hóa văn bản / miền vì nó không an toàn.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính Form enctype -
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}
</script>
</head>
<body>
<h1>Form enctype property example</h1>
<form id="FORM1" method="post" enctype="multipart/form-data">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI -
Trong ví dụ trên -
Chúng tôi đã tạo một biểu mẫu với id =“Form1”, method =“post” và enctype được đặt thành “multiart / form-data”. Enctype chỉ định kiểu mã hóa cho dữ liệu biểu mẫu và trong trường hợp của chúng ta được đặt thành “nhiều phần / biểu mẫu-dữ liệu”. Mã hóa này hữu ích cho việc tải tệp lên máy chủ. Biểu mẫu cũng chứa trường văn bản và trường mật khẩu.
<form id="FORM1" method="post" enctype="multipart/form-data"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form>
Sau đó, chúng tôi đã tạo một nút CHANGE sẽ thực thi phương thức changeEnc () khi người dùng nhấp vào -
<button onclick="changeEnc()">CHANGE</button>
Phương thức changeEnc () lấy phần tử biểu mẫu bằng cách sử dụng phương thức getElementById () và đặt thuộc tính enctype thành “application / x-www-form-urlencoded”. Điều này làm cho tất cả các ký tự của chúng tôi được mã hóa và là mã hóa enctype mặc định. Sử dụng thuộc tính innerHTML của đoạn văn có id “Mẫu”, chúng tôi thể hiện sự thay đổi này bằng cách hiển thị văn bản cho người dùng -
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}