Blog

JavaScript: document.forms নিয়ে সম্পূর্ণ বাংলা টিউটোরিয়াল

document.forms একটি JavaScript প্রপার্টি যা HTML ডকুমেন্টে উপস্থিত সব <form> ট্যাগের একটি সংগ্রহ (collection) রিটার্ন করে। এটি একটি HTMLFormControlsCollection যার মাধ্যমে আপনি ফর্মের এলিমেন্টগুলোতে সরাসরি অ্যাক্সেস করতে পারেন।

<form> ট্যাগ সম্পর্কে সংক্ষেপে

HTML ডকুমেন্টে <form> ব্যবহার করে আমরা ইউজার ইনপুট নেই এবং সার্ভারে পাঠাই। প্রতিটি ফর্মে থাকে বিভিন্ন input, textarea, select, button ইত্যাদি এলিমেন্ট।

<form name="loginForm">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>
  

document.forms দিয়ে JavaScript-এ ফর্ম ব্যবস্থাপনা:

// সব ফর্ম লিস্ট দেখানো
console.log(document.forms);

// নির্দিষ্ট ফর্ম এক্সেস (index দিয়ে)
console.log(document.forms[0]);

// ফর্মের নাম দিয়ে এক্সেস
let loginForm = document.forms["loginForm"];
console.log("ইউজারনেম:", loginForm.username.value);
console.log("পাসওয়ার্ড:", loginForm.password.value);
  

টেবিল: document.forms এর ব্যবহারিক বৈশিষ্ট্য

⚠️ সতর্কতা

• ফর্মের name অ্যাট্রিবিউট থাকা আবশ্যক যদি আপনি document.forms["name"] দিয়ে এক্সেস করতে চান।
• form এলিমেন্টের ইনপুট ফিল্ডেও অবশ্যই name অ্যাট্রিবিউট দিতে হবে, না হলে সেগুলোর value এক্সেস করতে পারবেন না।

ফর্ম ডেটা যাচাই (Validation) এর একটি উদাহরণ

নিচের কোডে ইউজারনেম ফাঁকা থাকলে সতর্ক বার্তা দেখানো হয়েছে:

let form = document.forms["loginForm"];
form.addEventListener("submit", function(event) {
    if (form.username.value.trim() === "") {
        alert("ইউজারনেম ফাঁকা রাখা যাবে না!");
        event.preventDefault(); // ফর্ম সাবমিট বন্ধ
    }
});
  

✅ সারসংক্ষেপ

• document.forms দিয়ে HTML ডকুমেন্টের সকল ফর্ম এক্সেস করা যায়।
• এটি live HTMLCollection, DOM পরিবর্তনের সাথে এটি আপডেট হয়।
• ফর্মের ইনপুট ভ্যালু পড়া, যাচাই করা ও প্রসেস করার জন্য অত্যন্ত কার্যকর।