คุณสมบัติ enctype ของแบบฟอร์ม HTML เชื่อมโยงกับแอตทริบิวต์ enctype ขององค์ประกอบแบบฟอร์ม คุณสมบัตินี้ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ enctype ของแบบฟอร์ม แอตทริบิวต์ enctype จะใช้ก็ต่อเมื่อค่าแอตทริบิวต์ method คือ "POST" คุณสมบัติ enctype ใช้สำหรับระบุข้อมูลในแบบฟอร์มที่จะส่งควรเข้ารหัส
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ enctype -
formObject.enctype = encoding
ในที่นี้ การเข้ารหัสอาจเป็น “application/x-www-form-urlencoded” ซึ่งหมายความว่าอักขระทั้งหมดจะได้รับการเข้ารหัสก่อนที่จะส่ง และนี่คือการเข้ารหัสเริ่มต้น
อีกส่วนหนึ่งคือ “multipart/form-data” ซึ่งระบุว่าไม่ควรเข้ารหัสอักขระใด ๆ และใช้สำหรับอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์
การเข้ารหัสที่สามคือ "ข้อความ/ธรรมดา" และจะแปลงเฉพาะช่องว่างเป็นสัญลักษณ์ "+" เท่านั้น และไม่มีการเข้ารหัสอื่นๆ ไม่ควรใช้การเข้ารหัส text./plain เนื่องจากไม่ปลอดภัย
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CHANGE -
ในตัวอย่างข้างต้น −
เราได้สร้างแบบฟอร์มด้วย id=“Form1”, method=“post” และตั้งค่า enctype เป็น “multipart/form-data” enctype ระบุประเภทการเข้ารหัสสำหรับข้อมูลในแบบฟอร์ม และในกรณีของเราถูกตั้งค่าเป็น "multipart/form-data" การเข้ารหัสนี้มีประโยชน์สำหรับการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ แบบฟอร์มประกอบด้วยช่องข้อความและช่องรหัสผ่านด้วย
<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>
จากนั้นเราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด changeEnc() เมื่อผู้ใช้คลิก -
<button onclick="changeEnc()">CHANGE</button>
เมธอด changeEnc() รับองค์ประกอบของฟอร์มโดยใช้เมธอด getElementById() และตั้งค่าคุณสมบัติ enctype เป็น “application/x-www-form-urlencoded” ซึ่งทำให้อักขระทั้งหมดของเราถูกเข้ารหัสและเป็นการเข้ารหัสแบบ enctype เริ่มต้น การใช้คุณสมบัติ innerHTML ของย่อหน้าที่มีรหัส "ตัวอย่าง" เราจะแสดงการเปลี่ยนแปลงนี้โดยแสดงข้อความให้ผู้ใช้เห็น -
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' ";
} 