কম্পিউটার টিউটোরিয়াল

HTML DOM Form enctype প্রোপার্টি

HTML DOM Form enctype প্রোপার্টি

HTML DOM Form enctype প্রোপার্টি ফর্ম এলিমেন্টের enctype অ্যাট্রিবিউটের সাথে জড়িত। এই প্রোপার্টি ফর্মের enctype অ্যাট্রিবিউটের মান সেট বা রিটার্ন করে। enctype অ্যাট্রিবিউট শুধু তখন ব্যবহৃত হয় যখন method অ্যাট্রিবিউটের মান "POST" হয়। enctype প্রোপার্টি ফর্মে থাকা ডেটা সাবমিট করার আগে কীভাবে এনকোড হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।

সিনট্যাক্স

Enctype প্রোপার্টি সেট করার সিনট্যাক্স:

formObject.enctype = encoding

এখানে, encoding হতে পারে "application/x-www-form-urlencoded", যার মানে সাবমিট করার আগে সব ক্যারেক্টার এনকোড হবে এবং এটি ডিফল্ট এনকোডিং।

অন্যটি "multipart/form-data", যা নির্দেশ করে কোনো ক্যারেক্টার এনকোড হবে না এবং সার্ভারে ফাইল আপলোড করার জন্য ব্যবহৃত হয়।

তৃতীয় এনকোডিং "text/plain" যা শুধু স্পেসকে "+" সিম্বলে কনভার্ট করে এবং অন্য কোনো এনকোডিং করে না। 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>

আউটপুট

উপরের কোডটি নিচের আউটপুট দেবে:

HTML DOM Form enctype প্রোপার্টি

"CHANGE" বাটনে ক্লিক করার পর:

HTML DOM Form enctype প্রোপার্টি

ব্যাখ্যা

  • id="Form1", method="post" এবং enctype="multipart/form-data" সেট করে একটি ফর্ম তৈরি করা হয়েছে। enctype ফর্ম ডেটার এনকোডিং টাইপ নির্দিষ্ট করে এবং এখানে এটি "multipart/form-data" সেট করা হয়েছে। এই এনকোডিং সার্ভারে ফাইল আপলোডের জন্য উপযোগী। ফর্মে একটি টেক্সট ফিল্ড এবং একটি পাসওয়ার্ড ফিল্ডও আছে।
  • তারপর "CHANGE" বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changeEnc() মেথড এক্সিকিউট করবে।
  • changeEnc() মেথড getElementById() ব্যবহার করে ফর্ম এলিমেন্টটি পায় এবং এর enctype প্রোপার্টি "application/x-www-form-urlencoded" সেট করে। এটি আমাদের সব ক্যারেক্টার এনকোড করে এবং এটি ডিফল্ট enctype এনকোডিং। প্যারাগ্রাফের (আইডি "Sample") 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' "; 
}
  1. HTML DOM Form action প্রোপার্টি

  2. HTML DOM Form target প্রপার্টি

  3. HTML DOM Textarea form প্রোপার্টি: টেক্সটএরিয়ার ফর্ম খুঁজে বের করা

  4. HTML DOM Object form প্রপার্টি