HTML DOM ফর্ম সংগ্রহ

HTML DOM ফর্ম সংগ্রহটি এইচটিএমএল ডকুমেন্টের ভিতরে থাকা সমস্ত ফর্ম উপাদানগুলিকে সংগ্রহ হিসাবে ফিরিয়ে দেওয়ার জন্য ব্যবহৃত হয়। সংগ্রহে উপস্থিত উপাদানগুলি বাছাই করা হয় এবং HTML নথিতে যেভাবে প্রদর্শিত হয় সেই ক্রমে উপস্থাপন করা হয়৷

সম্পত্তি

নিম্নলিখিত ফর্ম সংগ্রহের বৈশিষ্ট্যগুলি রয়েছে -

৷

সম্পত্তি	বিবরণ
দৈর্ঘ্য	এটি একটি পঠনযোগ্য সম্পত্তি যা সংগ্রহে উপাদানের সংখ্যা প্রদান করে।

পদ্ধতি

ফর্ম সংগ্রহের জন্য নিম্নলিখিত পদ্ধতিগুলি রয়েছে -

পদ্ধতি	বিবরণ
[সূচী]	প্রদত্ত সূচকে সংগ্রহ থেকে উপাদান ফেরত দিতে। ইনডেক্সিং 0 থেকে শুরু হয় এবং সূচী সীমার বাইরে থাকলে শূন্য ফেরত দেওয়া হয়।
আইটেম(সূচী)	প্রদত্ত সূচকে সংগ্রহ থেকে উপাদান ফেরত দিতে। ইনডেক্সিং 0 থেকে শুরু হয় এবং সূচী রেঞ্জের বাইরে থাকলে শূন্য ফেরত দেওয়া হয়।
namedItem(id)	প্রদত্ত আইডি সহ সংগ্রহ থেকে উপাদান ফেরত দিতে। আইডি না থাকলে নাল ফেরত দেওয়া হয়।

সিনট্যাক্স

HTML DOM ফর্ম সংগ্রহ -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

document.forms

উদাহরণ

আসুন আমরা HTML DOM ফর্ম সংগ্রহের একটি উদাহরণ দেখি -

<!DOCTYPE html>
<html>
<head>
<script>
   function formCollect() {
      for(var i=0;i<document.forms.length;i++){
         var no=document.forms[i].id+"<br>";
         document.getElementById("Sample").innerHTML +=no;
      }
   }
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM ফর্ম সংগ্রহ

GET IDS বোতামে ক্লিক করলে -

HTML DOM ফর্ম সংগ্রহ

উপরের উদাহরণে -

আমরা প্রথমে যথাক্রমে “FORM1”,”FORM2” এবং “FORM3” আইডি দিয়ে তিনটি ফর্ম তৈরি করেছি। প্রথম দুটি ফর্মে টাইপ টেক্সট সহ একটি ইনপুট উপাদান রয়েছে এবং তৃতীয় ফর্মটিতে টাইপ পাসওয়ার্ড সহ ইনপুট উপাদান রয়েছে −

<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango" >
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22" >
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>

GET IDS বোতামটি ব্যবহারকারী দ্বারা ক্লিক করলে formCollect() পদ্ধতিটি কার্যকর করে −

<button onclick="formCollect()">GET IDS</button>

formCollect() পদ্ধতিটি document.forms দৈর্ঘ্যের প্রপার্টির মান পায় যা আমাদের ক্ষেত্রে 3 এবং ফর লুপের ভিতরে টেস্ট এক্সপ্রেশনে এটি ব্যবহার করে। ফর্ম সংগ্রহে সূচী নম্বর ব্যবহার করে আমরা তাদের আইডি পাই এবং এটি প্রদর্শনের জন্য আইডি "নমুনা" সহ অনুচ্ছেদে যুক্ত করি -

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}