ফর্ম তৈরি করা (<form> ট্যাগ)

এক্সএইচটিএমএল (XHTML)-এ ফর্ম তৈরি করতে <form> ট্যাগ ব্যবহার করা হয়। ফর্মের মাধ্যমে ব্যবহারকারীরা তথ্য ইনপুট করতে পারেন এবং সেই তথ্য সার্ভারে পাঠানো হয়। এই প্রক্রিয়ায় একাধিক ইনপুট ফিল্ড (যেমন, টেক্সট বক্স, চেকবক্স, রেডিও বাটন) এবং অন্যান্য উপাদান ব্যবহার করা হয়। ফর্ম সাধারণত সার্ভারে ডেটা পাঠাতে GET অথবা POST পদ্ধতি ব্যবহার করে।

১. <form> ট্যাগের গঠন

১.১ বেসিক ফর্ম গঠন

<form action="submit_form.php" method="post">
    <!-- ইনপুট ফিল্ড এবং অন্যান্য উপাদান এখানে থাকবে -->
</form>

এখানে:

• action: ফর্মটি সাবমিট হওয়ার পর যেখানে ডেটা পাঠানো হবে, সেই URL। এটি একটি স্ক্রিপ্ট বা সার্ভার ফাইল হতে পারে যা ডেটা প্রসেস করবে।
• method: ফর্ম ডেটা সার্ভারে পাঠানোর পদ্ধতি। সাধারণত এটি দুটি হতে পারে:
  • GET: URL-এর মাধ্যমে ডেটা পাঠানো হয় (এটি সাধারণত অল্প পরিমাণ ডেটার জন্য ব্যবহৃত হয়)।
  • POST: ফর্ম ডেটা HTTP রিকোয়েস্টের মাধ্যমে পাঠানো হয়, এবং এটি নিরাপদ এবং বড় ডেটা পাঠানোর জন্য ব্যবহৃত হয়।

২. ইনপুট ফিল্ড

২.১ টেক্সট ইনপুট (<input type="text">)

ব্যবহারকারীদের থেকে সাধারণ টেক্সট ইনপুট নিতে type="text" ব্যবহার করা হয়।

<form action="submit_form.php" method="post">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" />
    <input type="submit" value="সাবমিট" />
</form>

• name: ইনপুটের নাম, যা সার্ভারে ডেটা প্রেরণের সময় ব্যবহৃত হয়।
• id: ইনপুট ফিল্ডের একটি ইউনিক চিহ্ন, যা লেবেলের সাথে সংযুক্ত করতে ব্যবহৃত হয়।

২.২ পাসওয়ার্ড ইনপুট (<input type="password">)

পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করতে type="password" ব্যবহার করা হয়, যা ইনপুটের মান গোপন রাখে।

<form action="submit_form.php" method="post">
    <label for="password">পাসওয়ার্ড:</label>
    <input type="password" id="password" name="password" />
    <input type="submit" value="সাবমিট" />
</form>

৩. রেডিও বাটন (Radio Button)

একটি ফর্মে একাধিক বিকল্প থেকে একটি নির্বাচন করতে radio টাইপ ইনপুট ব্যবহার করা হয়। রেডিও বাটন একে অপরের সাথে সম্পর্কিত থাকে এবং একসময় শুধুমাত্র একটি বাটন নির্বাচন করা যায়।

<form action="submit_form.php" method="post">
    <label for="gender">লিঙ্গ:</label>
    <input type="radio" id="male" name="gender" value="male" />
    <label for="male">পুরুষ</label>
    <input type="radio" id="female" name="gender" value="female" />
    <label for="female">মহিলা</label>
    <input type="submit" value="সাবমিট" />
</form>

এখানে:

• name: সমস্ত রেডিও বাটনের জন্য একযোগভাবে ব্যবহার করা হয়, যাতে একটি রেডিও বাটন নির্বাচন করা হলে অন্যগুলো নির্বাচন অপসৃত হয়।

৪. চেকবক্স (Checkbox)

চেকবক্স ব্যবহারকারীদের একাধিক অপশন থেকে যেকোনো একাধিক নির্বাচন করতে দেয়।

<form action="submit_form.php" method="post">
    <label for="subscribe">সাবস্ক্রাইব করুন:</label>
    <input type="checkbox" id="subscribe" name="subscribe" value="yes" />
    <label for="subscribe">হ্যাঁ, আমি সাবস্ক্রাইব করতে চাই</label>
    <input type="submit" value="সাবমিট" />
</form>

এখানে:

• value: চেকবক্সটি নির্বাচিত হলে, এর মান হিসেবে পাঠানো হবে।
• যদি চেকবক্সটি চেক করা না থাকে, তাহলে এটি পাঠানো হবে না।

৫. সিলেক্ট ড্রপডাউন (Select Dropdown)

ব্যবহারকারীদের জন্য একাধিক পছন্দের মধ্যে থেকে একটি নির্বাচন করতে select এবং option ট্যাগ ব্যবহার করা হয়।

<form action="submit_form.php" method="post">
    <label for="country">দেশ:</label>
    <select id="country" name="country">
        <option value="bangladesh">বাংলাদেশ</option>
        <option value="india">ভারত</option>
        <option value="pakistan">পাকিস্তান</option>
    </select>
    <input type="submit" value="সাবমিট" />
</form>

এখানে:

• name: ফর্মের ডেটা সার্ভারে পাঠানোর সময় এই নাম ব্যবহার করা হবে।
• value: প্রতিটি option এর মান, যা ফর্ম সাবমিট হওয়ার সময় পাঠানো হবে।

৬. টেক্সট এরিয়া (Text Area)

বড় আকারের টেক্সট ইনপুটের জন্য textarea ট্যাগ ব্যবহার করা হয়।

<form action="submit_form.php" method="post">
    <label for="message">বার্তা:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <input type="submit" value="সাবমিট" />
</form>

এখানে:

• rows এবং cols: টেক্সট এরিয়ার আকার নির্ধারণ করে।

৭. ফাইল ইনপুট (File Input)

ব্যবহারকারীদের ফাইল আপলোড করার জন্য type="file" ইনপুট ব্যবহার করা হয়।

<form action="submit_form.php" method="post" enctype="multipart/form-data">
    <label for="file">ফাইল নির্বাচন করুন:</label>
    <input type="file" id="file" name="file" />
    <input type="submit" value="আপলোড" />
</form>

এখানে:

• enctype="multipart/form-data": ফাইল ডেটা সার্ভারে পাঠানোর জন্য এই এনকোডিং ব্যবহার করা হয়।

৮. সাবমিট বাটন

ফর্মটি সাবমিট করতে type="submit" ব্যবহার করা হয়। এই বাটনটি ফর্মের সব ইনপুট ডেটা সার্ভারে পাঠিয়ে দেয়।

<form action="submit_form.php" method="post">
    <input type="submit" value="ফর্ম সাবমিট করুন" />
</form>

XHTML-এ ফর্ম তৈরি করা বেশ সহজ, এবং এটি বিভিন্ন ইনপুট ফিল্ড ব্যবহার করে তথ্য সংগ্রহের জন্য খুবই কার্যকর। <form> ট্যাগের সাহায্যে আপনি ব্যবহারকারীদের কাছ থেকে বিভিন্ন ধরনের ইনপুট নিতে পারেন এবং সেই ডেটা সার্ভারে পাঠাতে পারেন। এই ফর্মগুলোর মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশনে ডেটা সংগ্রহ এবং প্রক্রিয়া করতে পারেন।