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

HTML DOM Form target প্রপার্টি ব্যবহার করে ফর্ম ডেটা সাবমিট হওয়ার পর রেসপন্স কোথায় প্রদর্শিত হবে তা নির্দিষ্ট করা হয়। এটি নতুন ট্যাব, বর্তমান ট্যাব বা নতুন উইন্ডোতে খোলা হতে পারে। Form target প্রপার্টি target অ্যাট্রিবিউটের মান সেট বা গেট করে।

সিনট্যাক্স

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

formObject.target = "_blank|_self|_parent|_top|framename"

এখানে, _blank রেসপন্স নতুন উইন্ডোতে খুলবে, _self একই উইন্ডোতে, _parent প্যারেন্ট ফ্রেমে, _top পুরো উইন্ডো বডিতে এবং framename নির্দিষ্ট নামকৃত ফ্রেমে খুলবে।

উদাহরণ

HTML DOM Form target প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> 
<style> 
  form { 
    border:2px solid blue; 
    margin:2px; 
    padding:4px; 
  } 
</style> 
<script> 
  function SubmitForm() { 
    document.getElementById("FORM1").submit(); 
  } 
</script> 
</head> 
<body> 
<h1>Form submit() method 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="button" onclick="SubmitForm()" value="SUBMIT"> 
</form> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে। সাবমিট ক্লিক করলে রেসপন্স একই উইন্ডোতে খুলবে:

CHANGE বাটনে ক্লিক করলে এবং তারপর সাবমিট করলে; রেসপন্স এখন নতুন ট্যাবে প্রদর্শিত হবে:

এতে দুটি টেক্সট টাইপের ইনপুট ফিল্ড এবং একটি SUBMIT বাটন আছে:

<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="button" onclick="SubmitForm()" value="SUBMIT"> </form>

তারপর আমরা একটি CHANGE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে changeTarg() মেথড এক্সিকিউট করবে:

<button onclick="ChangeTarg()">CHANGE</button>

ChangeTarg() মেথড document অবজেক্টের getElementById() মেথড ব্যবহার করে <form> এলিমেন্ট পায় এবং এর target প্রপার্টির মান "_blank"-এ পরিবর্তন করে। এটি ফর্ম ডেটা সাবমিট হওয়ার পর রেসপন্স নতুন ট্যাবে দেখাতে দেয়। এই পরিবর্তনটি "Sample" আইডি वाले প্যারা গ্রাফে টেক্সট অ্যাসাইন করে innerHTML প্রপার্টি ব্যবহার করে দেখানো হয়:

function ChangeTarg() { 
  document.getElementById("FORM1").target = "_blank"; 
  document.getElementById("Sample").innerHTML = "The target attribute value is now _blank."; 
}