คุณสมบัติ enctype ของ HTML DOM Form

คุณสมบัติ enctype ของ HTML DOM Form เกี่ยวข้องกับแอตทริบิวต์ enctype ขององค์ประกอบ form คุณสมบัตินี้ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ enctype ของฟอร์ม แอตทริบิวต์ enctype ใช้เฉพาะเมื่อค่าแอตทริบิวต์ method เป็น “POST” คุณสมบัติ enctype ใช้ระบุว่าข้อมูลในฟอร์มที่จะส่งควรเข้ารหัสอย่างไร

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ enctype:

formObject.enctype = encoding

ที่นี่ encoding สามารถเป็น “application/x-www-form-urlencoded” หมายถึงเข้ารหัสอักขระทั้งหมดก่อนส่ง และนี่คือการเข้ารหัสเริ่มต้น

อีกค่าหนึ่งคือ “multipart/form-data” ระบุว่าไม่ควรเข้ารหัสอักขระใดๆ และใช้สำหรับอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์

การเข้ารหัสที่สามคือ “text/plain” แปลงช่องว่างเป็นสัญลักษณ์ “+” เท่านั้น ไม่เข้ารหัสอื่นๆ ไม่ควรใช้ text/plain เพราะไม่ปลอดภัย

ตัวอย่าง

มาดูตัวอย่างการใช้คุณสมบัติ enctype ของ Form:

<!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 ของย่อหน้าที่มี id “Sample” แสดงการเปลี่ยนแปลง:

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' "; }