HTML Form - এইচটিএমএল ফর্ম (পর্ব ১৩)

HTML Form - এইচটিএমএল ফর্ম

যখন আমাদের ইউজার থেকে ইনপুট নিতে হয়, যেমন — নাম, ইমেইল, পাসওয়ার্ড — তখন আমরা HTML ফর্ম ব্যবহার করি। ফর্ম দিয়ে নেওয়া তথ্য আমরা সার্ভারে পাঠাতে পারি অথবা অন্য কোনো পেজে ব্যবহার করতে পারি।এই ফর্ম তৈরিতে মূলত তিনটি জিনিস গুরুত্বপূর্ণ — <form>, action, এবং method।

এই টপিকটা ওয়েব ডেভেলপমেন্টের জন্য খুবই গুরুত্বপূর্ণ, কারণ প্রায় সব ওয়েবসাইটেই ফর্ম থাকে।
তাই চলুন, সরাসরি দেখে নেওয়া যাক একটি বেসিক HTML ফর্ম কিভাবে বানাতে হয়!”

💻 HTML কোড উদাহরণ:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic HTML Form</title>
</head>
<body>
  <h1>Contact Us</h1>

  <form action="submit_form.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="username"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="useremail"><br><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

📘 প্রতিটি লাইনের ব্যাখ্যা :

🔹 ১. `<form>` ট্যাগ

👉 “আমরা <form> ট্যাগ ব্যবহার করি যখন ইউজারের কাছ থেকে ইনপুট নেওয়ার প্রয়োজন হয়। যেমন: নাম, ইমেইল, পাসওয়ার্ড ইত্যাদি। ফর্ম ট্যাগ একটি কন্টেইনার যা ইনপুট ফিল্ড, সাবমিট বাটন ইত্যাদিকে ঘিরে রাখে।”

🔍 কোড ব্যাখ্যা:

<form action="submit_form.php" method="post">

action="submit_form.php" → ইউজারের তথ্য কোথায় পাঠানো হবে, সেটি নির্ধারণ করে। (এখানে একটি সার্ভার ফাইলে)
method="post" → কোন পদ্ধতিতে ডেটা যাবে — post বা get যে কোন একটি হতে পারে। তবে post হলে ইনফরমেশন URL-এ দেখা যাবে না।

🔹 ২. `<label>` ও `<input>` ফিল্ড

👉 “ইউজার ইনপুট নেওয়ার জন্য আমরা <input> ট্যাগ ব্যবহার করি। আর label হচ্ছে ইনপুটের নাম, যেন ইউজার বুঝতে পারে।”

🔍 কোড ব্যাখ্যা:

<input type="text" id="name" name="username">

for="name" → এটি input এর id এর সাথে যুক্ত, অ্যাক্সেসিবিলিটির জন্য ভালো।
type="text" → ইনপুট ফিল্ডে টেক্সট টাইপ ইনপুট আসবে।
name="username" → ফর্ম ডেটা সার্ভারে পাঠানোর সময় এই নামেই ডেটা যাবে।

🔹 ৩. `<input type="email">`

👉 “যখন আমরা চাই ইউজার শুধু ইমেইল টাইপ ইনপুট দিক, তখন type="email" ব্যবহার করি। এটি ইমেইল ফরম্যাট না হলে ফর্ম সাবমিট হবে না।”

🔹 ৪. `<input type="submit">`

👉 “সব শেষে সাবমিট বাটনের মাধ্যমে ইউজার ডেটা পাঠাতে পারে। এজন্য আমরা ব্যবহার করি <input type="submit">।”

🔍 কোড ব্যাখ্যা:

<input type="submit" value="Submit">

value="Submit" → বাটনে যে টেক্সট দেখাবে।

📌 Form Method - GET vs POST:

Method	Description	নিরাপত্তা
GET	URL-এ ডেটা পাঠায়	কম
POST	হিডেনভাবে ডেটা পাঠায়	বেশি ✅

🎯 উপসংহার :

👉 “আজ আমরা শিখলাম কীভাবে একটি বেসিক HTML ফর্ম তৈরি করা যায়। <form>, action, method এবং ইনপুট ফিল্ডগুলোর ব্যবহার।

Topic Covered: html form, এইচটিএমএল ফর্ম, what is html form, form method, form action, ফর্ম Target এট্রিবিউট

HTML Form - এইচটিএমএল ফর্ম (পর্ব ১৩)