Chapter 4 — Web Design & HTML

Form

ফর্ম

beginner#form#htmlUpdated: 2026-05-17

ফর্ম (Form)

১. ভূমিকা — তুমি কি কখনো ভর্তি ফরম পূরণ করেছ?

কলেজে ভর্তির সময় তোমাকে একটা কাগজের ফরম দেওয়া হয়েছিল। তাতে ঘর ছিল — নাম, জন্ম তারিখ, ঠিকানা, ছেলে/মেয়ে বেছে নেওয়ার বৃত্ত।

তুমি ঘরগুলো পূরণ করে ফরমটা অফিসে জমা দিলে। অফিস সেই তথ্য খাতায় তুলল।

এখন ভাবো — তুমি যখন Facebook-এ অ্যাকাউন্ট খোলো, bKash-এ লগইন করো, Google-এ সার্চ করো — প্রতিবার তুমি তথ্য দিচ্ছ আর কেউ সেটা নিচ্ছে।

এই ডিজিটাল কাগজের ফরমই হলো HTML Form (ফর্ম)।

২. সমস্যা — Website তোমার কাছ থেকে তথ্য নেবে কীভাবে?

এতক্ষণ আমরা শিখেছি Website কীভাবে আমাদের তথ্য দেখায় — heading, ছবি, টেবিল।

কিন্তু যোগাযোগ তো একমুখী হলে চলবে না। অনেক সময় Website-কেও আমাদের কাছ থেকে তথ্য নিতে হয়:

  • লগইন করতে ইউজারনেম-পাসওয়ার্ড
  • রেজিস্ট্রেশনে নাম-ইমেইল
  • সার্চ করতে সার্চ শব্দ

আসল সমস্যা: user-এর কাছ থেকে তথ্য সংগ্রহ করে Server-এ পাঠানোর একটা ব্যবস্থা দরকার।

এই সমস্যার সমাধান — HTML Form।

৩. চিত্রের মাধ্যমে বোঝো

Form কীভাবে কাজ করে:

   user ফরম পূরণ করে
          ↓
   Submit বোতাম চাপে
          ↓
   data → action-এ দেওয়া URL-এ যায়
          ↓
   Server data গ্রহণ করে, প্রক্রিয়া করে
          ↓
   Server উত্তর পাঠায় (সফল/ব্যর্থ)

৪. বাস্তব জীবনের সাথে মিল

ব্যাংকের জমা স্লিপের সাথে তুলনা করো:

জমা স্লিপHTML Form
পুরো স্লিপ কাগজ<form>
লেখার ঘর<input>
ছেলে/মেয়ে বৃত্তradio button
একাধিক টিক বক্সcheckbox
জমা দেওয়াsubmit button
ঘরের পাশের লেখা<label>
ক্যাশিয়ারের কাছে যাওয়াaction-এ data পাঠানো

Module 1: সংজ্ঞা ও মূল কাঠামো

Form কী?

Form (ফর্ম) হলো HTML-এর একটি অংশ যা user-এর কাছ থেকে তথ্য সংগ্রহ করে এবং প্রক্রিয়াকরণের জন্য Server-এ পাঠায়।

Form-এর কাঠামো

<form action="submit.php" method="POST">
  <!-- ইনপুট element এখানে -->
  <input type="submit" value="জমা দাও">
</form>

Form-এর প্রধান Attribute

Attributeকাজ
actiondata কোথায় (কোন URL-এ) পাঠানো হবে
methoddata কীভাবে পাঠানো হবে — GET অথবা POST

Module 2: GET বনাম POST

method attribute-এ দুটি মান হতে পারে:

বিষয়GETPOST
data কোথায় দেখা যায়URL-এ দৃশ্যমানলুকানো
নিরাপত্তাকম নিরাপদবেশি নিরাপদ
data-র পরিমাণসীমিতবড় পরিমাণ সম্ভব
ব্যবহারসার্চ, ফিল্টারলগইন, পাসওয়ার্ড

💡 পাসওয়ার্ড বা সংবেদনশীল তথ্যে সবসময় POST ব্যবহার করো — GET-এ data URL-এ দেখা যায়।

Module 3: Input Type — বিভিন্ন ধরনের ঘর

<input> tag-এর type attribute বদলে নানা ধরনের ঘর তৈরি হয়:

typeকাজ
textসাধারণ লেখার ঘর
emailইমেইল ঘর (যাচাই সহ)
passwordপাসওয়ার্ড — লেখা দেখা যায় না
numberশুধু সংখ্যা
dateতারিখ নির্বাচন
radioএকদল থেকে একটি বেছে নেওয়া
checkboxএকাধিক বেছে নেওয়া
fileফাইল আপলোড
submitফরম জমা দেওয়ার বোতাম
resetসব ঘর মুছে ফেলা
<input type="text" name="name" placeholder="তোমার নাম">
<input type="email" name="email">
<input type="password" name="pass">
<input type="date" name="dob">

radio বনাম checkbox

লিঙ্গ:  <input type="radio" name="gender" value="male"> ছেলে
        <input type="radio" name="gender" value="female"> মেয়ে

শখ:    <input type="checkbox" name="hobby" value="read"> পড়া
       <input type="checkbox" name="hobby" value="game"> খেলা
বিষয়radiocheckbox
নির্বাচনএকটিইএকাধিক
আকৃতিগোলাকারবর্গাকার
একদল চিহ্নিতএকই nameএকই name

Module 4: অন্যান্য Form Element

textarea — বড় লেখার ঘর

একাধিক লাইনের লেখার জন্য (যেমন ঠিকানা, বার্তা)।

<textarea name="message" rows="4" cols="30"></textarea>

select ও option — Dropdown তালিকা

<select name="district">
  <option value="dhaka">ঢাকা</option>
  <option value="ctg">চট্টগ্রাম</option>
  <option value="sylhet">সিলেট</option>
</select>

label — ঘরের নাম

<label> ইনপুট ঘরের পরিচয় দেয়। accessibility (সবার জন্য সহজ ব্যবহার)-এর জন্য জরুরি।

<label>নাম:</label>
<input type="text" name="name">

Module 5: ব্যবহারিক উদাহরণ — ভর্তি ফরম

<!DOCTYPE html>
<html>
<head><title>ভর্তি ফরম</title></head>
<body>
  <h1>অনলাইন ভর্তি ফরম</h1>
  <form action="submit.php" method="POST">

    <label>নাম:</label><br>
    <input type="text" name="name" placeholder="পুরো নাম"><br><br>

    <label>ইমেইল:</label><br>
    <input type="email" name="email"><br><br>

    <label>জন্ম তারিখ:</label><br>
    <input type="date" name="dob"><br><br>

    <label>লিঙ্গ:</label>
    <input type="radio" name="gender" value="male"> ছেলে
    <input type="radio" name="gender" value="female"> মেয়ে<br><br>

    <label>বিভাগ:</label>
    <select name="dept">
      <option value="science">বিজ্ঞান</option>
      <option value="commerce">ব্যবসায় শিক্ষা</option>
      <option value="arts">মানবিক</option>
    </select><br><br>

    <label>ঠিকানা:</label><br>
    <textarea name="address" rows="3" cols="30"></textarea><br><br>

    <input type="submit" value="জমা দাও">
    <input type="reset" value="মুছে ফেলো">

  </form>
</body>
</html>

Module 6: গুরুত্বপূর্ণ Attribute

Attributeকাজ
nameপ্রতিটি ইনপুটের নাম — Server এ দিয়ে data চেনে
placeholderঘর ফাঁকা থাকলে hint লেখা দেখায়
valueঘরের পূর্বনির্ধারিত মান / radio-checkbox-এর মান
requiredঘরটি পূরণ বাধ্যতামূলক করে
rows, colstextarea-র আকার

name কেন গুরুত্বপূর্ণ? Server data পায় name=value জোড়া হিসেবে। name না থাকলে Server বুঝবে না কোন তথ্য কী — data হারিয়ে যাবে।

Module 7: সাধারণ ভুল ও সতর্কতা

ভুল ১: radio button-এ আলাদা name দেওয়া

একই দলের radio-তে একই name দিতে হয়। আলাদা দিলে একাধিক বেছে নেওয়া যাবে — যা radio-র উদ্দেশ্যের বিরুদ্ধে।

ভুল ২: name attribute ভুলে যাওয়া

name ছাড়া ইনপুটের data Server-এ পৌঁছায় না।

ভুল ৩: action না দেওয়া

action না থাকলে data কোথায় যাবে browser বোঝে না।

ভুল ৪: পাসওয়ার্ডে GET method

পাসওয়ার্ড GET-এ পাঠালে URL-এ দেখা যায় — অনিরাপদ। POST ব্যবহার করো।

Module 8: সুবিধা-অসুবিধা

বিষয়সুবিধাঅসুবিধা
GET methodURL bookmark করা যায়data দৃশ্যমান, অনিরাপদ
POST methodনিরাপদ, বড় databookmark করা যায় না
required attributeফাঁকা ফরম আটকায়user বিরক্ত হতে পারে
dropdown (select)জায়গা বাঁচেবিকল্প দেখতে click লাগে

🔁 নিজে পরীক্ষা করো

MCQ:

১. Form-এর data কোথায় যাবে তা ঠিক করে কোন attribute?

  • ক) action ✓
  • খ) method
  • গ) name
  • ঘ) value

২. একদল থেকে শুধুমাত্র একটি option বেছে নিতে —

  • ক) checkbox
  • খ) radio ✓
  • গ) text
  • ঘ) select

৩. পাসওয়ার্ড পাঠাতে কোন method নিরাপদ?

  • ক) GET
  • খ) POST ✓
  • গ) SEND
  • ঘ) PUT

৪. বড়, একাধিক লাইনের লেখার জন্য কোন element?

  • ক) <input type="text">
  • খ) <textarea> ✓
  • গ) <select>
  • ঘ) <label>

৫. ইনপুট ঘর ফাঁকা থাকলে hint লেখা দেখায় কোন attribute?

  • ক) value
  • খ) name
  • গ) placeholder ✓
  • ঘ) required

সংক্ষিপ্ত প্রশ্ন:

৬. GET ও POST method-এর পার্থক্য লেখো।

৭. radio button ও checkbox-এর পার্থক্য উদাহরণসহ লেখো।

📝 HSC পরীক্ষার প্রস্তুতি

১. একটি লগইন ফরম তৈরির HTML কোড লেখো (ইউজারনেম, পাসওয়ার্ড, submit বোতাম সহ)।

২. <form> tag-এ action ও method attribute-এর কাজ ব্যাখ্যা করো।

৩. একটি জরিপ (survey) ফরম বানাও যাতে text, radio, checkbox, select ও textarea — পাঁচ ধরনের ইনপুট থাকবে।

💡 পরীক্ষার টিপস: Form ও input type — HSC ব্যবহারিক পরীক্ষার সবচেয়ে গুরুত্বপূর্ণ টপিক। radio, checkbox, select, textarea বেশি অনুশীলন করো।

🎯 অনুশীলন প্রশ্ন

সহজ: নাম ও ইমেইল ঘর সহ একটি সাধারণ যোগাযোগ ফরম লেখো।

মাঝারি: একটি ভর্তি ফরম বানাও যেখানে radio দিয়ে লিঙ্গ ও select দিয়ে বিভাগ বেছে নেওয়া যাবে।

কঠিন: একটি অনলাইন কুইজ ফরম বানাও — প্রতিটি প্রশ্নে radio দিয়ে ৪টি বিকল্প, শেষে submit বোতাম। name attribute সঠিকভাবে ব্যবহার করো।

✅ সারাংশ

🎯 মনে রেখো:

  • Form = user-এর কাছ থেকে তথ্য নিয়ে Server-এ পাঠানোর HTML কাঠামো
  • <form>-এর attribute: action (কোথায় যাবে) ও method (কীভাবে — GET/POST)
  • GET → data URL-এ দৃশ্যমান, কম নিরাপদ; POST → লুকানো, নিরাপদ
  • Input type: text, email, password, number, date, radio, checkbox, file, submit, reset
  • radio → একটি বেছে নেওয়া; checkbox → একাধিক
  • অন্যান্য: <textarea> (বড় লেখা), <select>+<option> (dropdown), <label> (ঘরের নাম)
  • প্রতিটি ইনপুটে name অবশ্যই দিতে হবে — না হলে data Server-এ পৌঁছায় না
← PreviousTable