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

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

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

HTML DOM Form method প্রোপার্টি ফর্ম এলিমেন্টের method অ্যাট্রিবিউটের সাথে জড়িত। এই প্রোপার্টি ফর্ম ডেটা সার্ভারে কীভাবে পাঠানো উচিত তা নির্দিষ্ট করতে ব্যবহৃত হয়। ডেটা পাঠানোর ঠিকানা action অ্যাট্রিবিউট দ্বারা নির্দিষ্ট হয়। এই প্রোপার্টি ফর্ম মেথড প্রোপার্টির মান সেট বা গেট করে।

সিনট্যাক্স

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

formObject.method = get|post;

এখানে, get ডিফল্ট মেথড এবং ফর্ম-ডেটাকে URL-এ অ্যাপেন্ড করে। উদাহরণ: URL?name=value&name=value। এটি সাধারণত সুরক্ষিত নয় এবং প্রাইভেট না হয় এমন ডেটার জন্য ব্যবহৃত হয়। ইউজার URL স্ট্রিং देखकर পাঠানো ডেটা দেখতে পারে।

দ্বিতীয় মেথড post ডেটাকে HTTP post ট্রানজ্যাকশন হিসেবে পাঠায় এবং সাধারণত সুরক্ষিত, কারণ কেউ ডেটা সার্ভারে পাঠানোর সময় সেটি দেখতে পারে না।

উদাহরণ

Form method প্রোপার্টির একটি উদাহরণ:

<!DOCTYPE html> <html> <head> 
<style> 
    form{ 
        border:2px solid blue; 
        margin:2px; 
        padding:4px; 
    } 
</style> 
<script> 
    function ChangeMethod() { 
        document.getElementById("FORM1").method="get"; 
        document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' "; 
    } 
</script> </head> <body> 
<h1>Form length property example</h1> 
<form id="FORM1" method="post" action="/sample_page.php"> 
<label>User Name <input type="text" name="usrN"></label> <br><br> 
<label>Age <input type="text" name="Age"></label> <br><br> 
<input type="submit" value="SUBMIT"> 
</form> 
<p>নিচের বাটনে ক্লিক করে উপরের ফর্মের method অ্যাট্রিবিউটের মান পরিবর্তন করুন</p> 
<button onclick="ChangeMethod()">Change</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

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

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

"SUBMIT" বাটনে ক্লিক করলে এবং URL দেখলে:

127.0.0.1:5500/sample_page.php

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

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

এখন "SUBMIT" বাটনে ক্লিক করলে এবং লিংক দেখলে:

127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22

ব্যাখ্যা

  • প্রথমে একটি ফর্ম তৈরি করা হয়েছে যার id="FORM1", method="post" এবং action="/sample_page.php"। এখানে method="post" নিশ্চিত করে যে ফর্ম ডেটা নিরাপদে ট্রান্সফার হচ্ছে এবং সবাই দেখতে পাচ্ছে না। ফর্মে দুটি টেক্সট ইনপুট ফিল্ড এবং একটি সাবমিট বাটন আছে সার্ভারে ফর্ম ডেটা জমা দিতে।
  • তারপর একটি "Change" বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changeMethod() ফাংশন এক্সিকিউট করবে।
  • ChangeMethod() ফাংশন ডকুমেন্ট অবজেক্টের getElementById() মেথড ব্যবহার করে ফর্ম এলিমেন্টটি পায় এবং এর method অ্যাট্রিবিউটের মান "get" সেট করে। মান "get" এ পরিবর্তন মানে ইউজার ডেটা এখন URL-এ প্রদর্শিত হবে। প্যারাগ্রাফের (আইডি "Sample") innerHTML প্রোপার্টি ব্যবহার করে এই পরিবর্তন সম্পর্কে টেক্সট প্রদর্শন করা হয়।
function ChangeMethod() { 
    document.getElementById("FORM1").method="get"; 
    document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' "; 
}
  1. HTML DOM Form reset() মেথড

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

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

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