ফর্মের ভিত্তি — form, input, label আর button

১ · ফর্ম কী — ব্যাংকের কাগজের ফর্ম থেকে ওয়েবের ফর্ম

ব্যাংকে নতুন অ্যাকাউন্ট খুলতে গেলে আপনার হাতে একটি ছাপা কাগজ দেওয়া হয়। তাতে লেখা থাকে “নাম”, “পিতার নাম”, “মোবাইল নম্বর”, “ঠিকানা”। প্রতিটি লেখার পাশে একটি ফাঁকা ঘর। আপনি ঘরগুলো পূরণ করেন, তারপর কাগজটি কাউন্টারে জমা দেন। কাউন্টারের কর্মকর্তা সেটি ভেতরে পাঠিয়ে দেন। কলেজে ভর্তির ফর্মও তাই, পাসপোর্টের আবেদনও তাই।

ওয়েবের form ঠিক এই কাগজটি। এতে চারটি অংশ থাকে, আর প্রতিটির জন্য HTML-এ আলাদা element আছে:

লেখা যায়, বেছে নেওয়া যায় বা চাপা যায় এমন প্রতিটি অংশকে বলে form control — যেমন input, button, পরে দেখবেন select আর textarea. এখন একটি বড় প্রশ্ন: আপনি “জমা দিন” চাপলে আসলে কী ঘটে? নিচের ডায়াগ্রামে “পরে” চাপুন:

এই পাতার প্রতিটি লাইভ এডিটরে ফর্ম জমা দিলে সত্যিই কোথাও কিছু যায় না। তার বদলে প্রিভিউর নিচে লেখা আসে ফর্ম জমা হতো → … — অর্থাৎ ব্রাউজার ঠিক কোন জোড়াগুলো পাঠাত। এটাই আপনার “এক্স-রে চোখ”।

২ · form, action আর method — তথ্য কোথায় আর কীভাবে যাবে

<form> element-এর দুটি প্রধান attribute:

• action — তথ্য কোন ঠিকানায় যাবে, যেমন action="/register". এটি একটি URL; না লিখলে ফর্ম যে পাতায় আছে, সেই পাতার ঠিকানাতেই যায়।
• method — কীভাবে যাবে: get (ডিফল্ট) অথবা post. (তৃতীয় একটি মান dialog আছে, সেটি পর্ব ১১-এর <dialog>-এর সাথে কাজ করে।)

সহজ নিয়ম: যে ফর্ম শুধু কিছু খোঁজে বা দেখতে চায় — সার্চ, পরীক্ষার ফল দেখা, পণ্য ফিল্টার — সেখানে GET. ফলের পাতাটি বুকমার্ক বা শেয়ার করা যায়, কারণ পুরো প্রশ্নটাই URL-এ থাকে। যে ফর্ম কিছু বদলায় বা গোপন তথ্য পাঠায় — অ্যাকাউন্ট খোলা, লগইন, অর্ডার, পেমেন্ট — সেখানে POST. পাসওয়ার্ড কখনো GET-এ পাঠাবেন না: URL থেকে যায় ব্রাউজারের history-তে, সার্ভারের log-এ, আর কারও স্ক্রিনশটে।

নিচের এডিটরে একটি সার্চ ফর্ম আছে। এর সাথে একটি ছোট <script> জুড়ে দিয়েছি, যেটি দেখায় ব্রাউজার ঠিক কোন URL বা body বানাত। “খুঁজুন” চাপুন:

<form action="/search" method="get">
  <label for="q">কী খুঁজছেন?</label>
  <input type="text" id="q" name="q" value="html ফর্ম">
  <label for="lvl">লেভেল</label>
  <input type="text" id="lvl" name="level" value="beginner">
  <button type="submit">খুঁজুন</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', (e) => {
    const f = e.target;
    const packed = new URLSearchParams(new FormData(f)).toString();
    if (f.method === 'get') {
      console.log('URL হতো → ' + f.getAttribute('action') + '?' + packed);
    } else {
      console.log('URL শুধু ' + f.getAttribute('action') + ', body-তে → ' + packed);
    }
  });
</script>

GET-এ URL-এর ?-এর পরের অংশটিকে বলে query string — জোড়াগুলো সেখানে & দিয়ে জোড়া থাকে। আর বাংলা অক্ষর বা বিশেষ চিহ্ন URL-এ সরাসরি রাখা যায় না বলে ব্রাউজার সেগুলোকে percent-encoding-এ লেখে (পর্ব ০৫-এ দেখেছেন)। POST-এ একই জোড়া যায় request-এর body-তে — URL পরিষ্কার থাকে। একই তথ্য দুই পথে কীভাবে যায়, ধাপে ধাপে দেখুন:

<form action="/result" method="get">
  <input name="roll"  value="123456">
  <input name="board" value="dhaka">
  <input value="কিছু একটা">   ← name নেই
  <button type="submit">ফল দেখুন</button>
</form>

roll  = 123456
board = dhaka
(name ছাড়া ঘরটি তালিকায় ঢোকেনি)

GET /result?roll=123456&board=dhaka HTTP/1.1
Host: example.com
(body নেই)

POST /result HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

roll=123456&board=dhaka

<input name="q" value="ফর্ম">
          ↓
q=%E0%A6%AB%E0%A6%B0%E0%A7%8D%E0%A6%AE

৩ · input — name, value আর type

<input> একটি void element — এর কোনো closing tag নেই, ভেতরে কিছু লেখা হয় না। এর আচরণ পুরোটা আসে attribute থেকে। তিনটি সবচেয়ে জরুরি:

• name — জোড়ার নাম, যা সার্ভারে যায়। ছোট, ইংরেজি, অর্থবহ রাখুন: fullname, mobile, email. এটি ব্যবহারকারী দেখেন না।
• value — ঘরের শুরুর মান। ব্যবহারকারী লিখলে আসল মান বদলে যায়, কিন্তু attribute-টি থেকে যায় “ডিফল্ট মান” হিসেবে (পরে reset বোতামে কাজে লাগবে)।
• type — ঘরটি কী ধরনের তথ্য নেবে। না লিখলে text.

type শুধু চেহারা বদলায় না — ব্রাউজারকে ঘরটির অর্থ জানায়। ফোনে সবচেয়ে বড় পার্থক্য চোখে পড়ে: কোন ধরনের অন-স্ক্রিন কি-বোর্ড আসবে।

<form>
  <p><label>নাম: <input type="text" name="fullname" value="রাকিব হাসান"></label></p>
  <p><label>ইমেইল: <input type="email" name="email" value="rakib@example.com"></label></p>
  <p><label>পাসওয়ার্ড: <input type="password" name="pass" value="dhaka123"></label></p>
  <p><label>বয়স: <input type="number" name="age" value="21"></label></p>
  <p><label>মোবাইল: <input type="tel" name="mobile" value="01712345678"></label></p>
  <p><label>রেফারেল কোড: <input type="text" value="BD2026"></label></p>
  <button type="submit">জমা দিন</button>
</form>

এখানে প্রতিটি ঘর <label>-এর ভেতরে রাখা হয়েছে — কেন, সেটা পরের অংশের বিষয়। তার আগে আরও দুটি দরকারি কথা। এক, type-এ অচেনা কিছু লিখলে (যেমন ভুল বানানে type="emial") ব্রাউজার কোনো error দেখায় না, চুপচাপ text বানিয়ে দেয় — তাই বানান ভুল সহজে চোখে পড়ে না। দুই, email, password বা tel-এর মতো type-ও আসলে লেখা নেয়; শুধু ইঙ্গিত বদলায়। বাকি type — তারিখ, রং, ফাইল, checkbox, radio — পর্ব ৯-এ।

৪ · label — প্রতিটি ঘরের নাম, আর placeholder-এর ফাঁদ

কাগজের ফর্মে “মোবাইল নম্বর” লেখাটি ঘরের পাশে ছাপা থাকে বলে আপনি বোঝেন কোথায় কী লিখবেন। কিন্তু ওয়েবে শুধু পাশে লিখে দিলেই হয় না। সাধারণ লেখা আর ঘরের মধ্যে ব্রাউজারের কাছে কোনো সম্পর্ক নেই — যতক্ষণ না আপনি <label> দিয়ে জোড়া দেন। জোড়ার দুটি উপায়:

জোড়া দিলে দুটি বড় লাভ। প্রথমত, ক্লিক করার জায়গা বড় হয়: label-এর লেখায় চাপলেই cursor ঘরে চলে যায়, আর checkbox হলে টিক পড়ে যায়। ছোট পর্দায় আঙুল দিয়ে ছোট্ট একটি বাক্সে চাপা কঠিন — বয়স্ক মানুষ বা কাঁপা হাতের কারও জন্য আরও কঠিন। দ্বিতীয়ত, ঘরটি একটি নাম পায়: label-এর লেখাটি ঘরের accessible name হয়, তাই screen reader ঘরে এলেই বলে “মোবাইল নম্বর, সম্পাদনাযোগ্য লেখা”। ভয়েস দিয়ে ফোন চালানো মানুষ “মোবাইল নম্বর-এ চাপো” বলে ঘরে যেতে পারেন, আর ব্রাউজারের autofill-ও label থেকে ইঙ্গিত নেয়।

<p><b>ক) শুধু placeholder</b></p>
<input type="text" name="a" placeholder="আপনার নাম">

<p><b>খ) পাশে লেখা, কিন্তু জোড়া নেই</b></p>
আপনার নাম <input type="text" name="b">

<p><b>গ) label + for/id</b></p>
<label for="nm">আপনার নাম</label>
<input type="text" id="nm" name="c">

<p><b>ঘ) label-এর ভেতরে মোড়ানো</b></p>
<label><input type="checkbox" name="agree"> আমি শর্তগুলো মেনে নিচ্ছি</label>

চোখে না দেখা মানুষের কানে এই চারটি ঘর কেমন শোনায়? “পরে” চাপুন:

মোবাইল নম্বর <input type="tel" name="mobile">

<input type="tel" name="mobile"
       placeholder="মোবাইল নম্বর">

<label for="mobile">মোবাইল নম্বর</label>
<input type="tel" id="mobile" name="mobile">

<label for="moblie">মোবাইল নম্বর</label>
<input type="tel" id="mobile" name="mobile">

<label for="mobile">মোবাইল নম্বর</label>
<input type="tel" id="mobile" name="mobile"
       aria-describedby="mobile-hint">
<small id="mobile-hint">যেমন 01712345678</small>

৫ · button — submit, reset আর button, আর ডিফল্টের ফাঁদ

<button>-এর type attribute-এর তিনটি মান:

এখন সেই ফাঁদ, যাতে নতুন-পুরোনো সবাই অন্তত একবার পড়েন: ফর্মের ভেতরে <button>-এ type না লিখলে সেটি submit. ধরুন আপনি “পাসওয়ার্ড দেখান” বোতাম বানালেন, শুধু লেখাটা দেখানো-লুকানোর জন্য। type লেখেননি। ব্যবহারকারী চাপলেন — আর পুরো ফর্ম জমা হয়ে গেল, অর্ধেক পূরণ অবস্থায়! নিচে নিজেই দেখুন:

<form>
  <label for="pw">পাসওয়ার্ড</label>
  <input type="password" id="pw" name="password" value="nodi2026">
  <button id="show">দেখান</button>
  <p>
    <button type="reset">মুছে আবার শুরু</button>
    <button type="submit">লগইন</button>
  </p>
</form>

<script>
  document.getElementById('show').addEventListener('click', () => {
    const pw = document.getElementById('pw');
    pw.type = (pw.type === 'password') ? 'text' : 'password';
  });
</script>

শেষ পরীক্ষাটির নাম implicit submission — এক লাইনের ঘরে Enter চাপলে ব্রাউজার ফর্মের প্রথম submit বোতামটি চাপার মতো কাজ করে। তাই “দেখান” বোতামটি type ছাড়া থাকলে আর ফর্মে প্রথমে থাকলে, Enter চাপলে আসলে সেটিই “চাপা” হয় — অদ্ভুত বাগের আরেক উৎস। নিয়ম একটাই: প্রতিটি <button>-এ type লিখুন, এমনকি submit-ও — পড়তে পরিষ্কার, ভুলের জায়গা কম।

পুরোনো কোডে দেখবেন <input type="submit" value="জমা দিন">. এটিও চলে, কিন্তু ভেতরে শুধু সাধারণ লেখা রাখা যায়। <button>-এর ভেতরে আইকন, <strong> বা <span> রাখা যায় — তাই আজ সেটিই বেশি ব্যবহৃত। আর একটি জরুরি কথা: ক্লিক করে কিছু ঘটানোর জন্য <div onclick> নয়, সব সময় আসল <button> — আসল বোতাম কি-বোর্ডের Tab-এ পৌঁছায়, Enter আর Space-এ চাপা যায়, আর screen reader বলে “বোতাম”। div-এ এগুলোর কিছুই নিজে থেকে হয় না।

৬ · fieldset আর legend — ঘরগুলোকে দলে সাজানো

লম্বা কাগজের ফর্মে অংশ থাকে: “ব্যক্তিগত তথ্য”, “বর্তমান ঠিকানা”, “স্থায়ী ঠিকানা”। দুই অংশেই “জেলা” নামে একটি ঘর থাকতে পারে — কোনটা কোন অংশের, তা বোঝায় অংশের শিরোনাম। HTML-এ এই দলের জন্য <fieldset>, আর তার শিরোনাম <legend> — যা থাকতে হয় fieldset-এর একদম প্রথম সন্তান হিসেবে।

<fieldset>
  <legend>বর্তমান ঠিকানা</legend>
  <label for="cur-district">জেলা</label>
  <input type="text" id="cur-district" name="current_district">
</fieldset>

<fieldset>
  <legend>স্থায়ী ঠিকানা</legend>
  <label for="perm-district">জেলা</label>
  <input type="text" id="perm-district" name="permanent_district">
</fieldset>

ব্রাউজার ডিফল্টভাবে fieldset-এর চারপাশে একটি দাগ টানে আর legend-কে সেই দাগের ওপর বসায় (পুরো উদাহরণে দেখবেন)। আসল লাভ শোনায়: screen reader “জেলা” ঘরে এলে বলে “বর্তমান ঠিকানা, দল … জেলা, সম্পাদনাযোগ্য লেখা” — দুটি একই নামের ঘর আর গুলিয়ে যায় না। fieldset সবচেয়ে বেশি জরুরি radio button-এর দলে (“লিঙ্গ: পুরুষ / নারী / অন্যান্য”), যেখানে প্রশ্নটিই legend — সেটি পর্ব ৯-এ। আর fieldset-এ disabled লিখলে ভেতরের সব ঘর একসাথে বন্ধ হয়ে যায় — এটিও একটি boolean attribute.

৭ · autocomplete আর inputmode — ফোনে দ্রুত পূরণ

একই নাম, ইমেইল, মোবাইল নম্বর — প্রতিটি সাইটে বারবার টাইপ করা বিরক্তিকর, আর ফোনের ছোট কি-বোর্ডে ভুলও হয় বেশি। ব্রাউজার আপনার তথ্য মনে রাখে, আর ফর্ম দেখলে নিজে থেকে পূরণের পরামর্শ দেয় — একে বলে autofill. কিন্তু ব্রাউজার কীভাবে বুঝবে কোন ঘরে নাম আর কোন ঘরে ফোন নম্বর? autocomplete attribute ঠিক এটাই বলে দেয়:

এই মানগুলো বানানো নয় — HTML স্পেসিফিকেশনে একটি নির্দিষ্ট তালিকা আছে, আর সব আধুনিক ব্রাউজার সেটি বোঝে। WCAG 2.2-এর নিয়ম ১.৩.৫ (Identify Input Purpose) ব্যক্তিগত তথ্যের ঘরে ঠিক এই মানগুলো ব্যবহারের কথা বলে — কারণ পড়া বা মনে রাখায় যাঁদের অসুবিধা, তাঁদের জন্য autofill অনেক বড় সাহায্য।

inputmode — কোন কি-বোর্ড আসবে

কখনো ঘরটি আসলে লেখা নেয়, কিন্তু আপনি চান ফোনে শুধু অঙ্কের কি-বোর্ড আসুক — যেমন OTP. এর জন্য inputmode: numeric (০–৯-এর বড় প্যাড), tel, email, decimal, url, search, text, none. এটি শুধু কি-বোর্ড বদলায় — কোনো যাচাই করে না, আর কম্পিউটারের আসল কি-বোর্ডে কোনো প্রভাব নেই। inputmode এখন Baseline Widely available — প্রধান সব মোবাইল ব্রাউজারে চলে, আর না চললে সাধারণ কি-বোর্ড আসে, ক্ষতি নেই।

নিচের স্টেপারে একটি OTP ঘরের প্রতিটি অংশ ভেঙে দেখুন:

বাংলাদেশের মোবাইল নম্বর — tel, number নয়

আমাদের নম্বর ১১ অঙ্কের, শুরু 01 দিয়ে (যেমন 01712345678); আন্তর্জাতিক রূপে +880 দিয়ে, প্রথম 0 বাদ — +8801712345678. অনেকে লেখেন ফাঁকা বা হাইফেন দিয়ে: “01712-345678”. এসব type="number" একদম সামলাতে পারে না, কারণ সেটি শুধু “সংখ্যা” বোঝে — +, ফাঁকা বা হাইফেন দেখলে মানটাই বাতিল করে দেয়। HTML স্পেসিফিকেশন নিজেই বলে, যে তথ্য শুধু অঙ্ক দিয়ে লেখা কিন্তু আসলে পরিমাণ নয়, তার জন্য number ঠিক নয়। দেখুন:

<form>
  <p><label>type="number":
    <input type="number" name="m1" value="+880 1712-345678"></label></p>
  <p><label>type="tel":
    <input type="tel" name="m2" value="+880 1712-345678" autocomplete="tel"></label></p>
  <p><label>SMS-এর কোড:
    <input type="text" name="otp" inputmode="numeric"
           autocomplete="one-time-code" maxlength="6"></label></p>
  <button type="submit">যাচাই করুন</button>
</form>

<script>
  for (const box of document.querySelectorAll('input')) {
    console.log(box.name + ' -> "' + box.value + '"');
  }
</script>

৮ · সব একসাথে — একটি পূর্ণ সাইন-আপ ফর্ম

ধরুন একটি অনলাইন কোর্সের সাইটে নতুন অ্যাকাউন্ট খোলার ফর্ম বানাচ্ছেন: নাম, মোবাইল, ইমেইল, জেলা, ঠিকানা আর পাসওয়ার্ড। এই পর্বে যা শিখলেন, সব এখানে — আর দুটি জিনিস পর্ব ৯-এর আগাম ঝলক: জেলা বেছে নেওয়ার <select> আর কয়েক লাইনের <textarea>. কোনো CSS নেই — ব্রাউজারের নিজস্ব চেহারা; সুন্দর করা হবে পর্ব ৪৩-এ।

<form action="/register" method="post">
  <fieldset>
    <legend>নতুন অ্যাকাউন্ট খুলুন</legend>
    <p><label for="fullname">পুরো নাম</label>
      <input type="text" id="fullname" name="fullname" autocomplete="name"></p>
    <p><label for="mobile">মোবাইল নম্বর</label>
      <input type="tel" id="mobile" name="mobile" autocomplete="tel"
             aria-describedby="mobile-hint">
      <small id="mobile-hint">১১ অঙ্ক, যেমন 01712345678</small></p>
    <p><label for="email">ইমেইল</label>
      <input type="email" id="email" name="email" autocomplete="email"></p>
    <p><label for="district">জেলা</label>
      <select id="district" name="district">
        <option value="">— বেছে নিন —</option>
        <option value="dhaka">ঢাকা</option>
        <option value="chattogram">চট্টগ্রাম</option>
        <option value="rajshahi">রাজশাহী</option>
        <option value="sylhet">সিলেট</option>
      </select></p>
    <p><label for="addr">ঠিকানা</label><br>
      <textarea id="addr" name="address" rows="2" autocomplete="street-address"></textarea></p>
    <p><label for="pass">পাসওয়ার্ড</label>
      <input type="password" id="pass" name="password" autocomplete="new-password"></p>
    <button type="submit">অ্যাকাউন্ট খুলুন</button>
  </fieldset>
</form>

এই ছোট ফর্মে লুকিয়ে আছে অনেক সিদ্ধান্ত। method="post", কারণ এটি নতুন অ্যাকাউন্ট বানায় আর পাসওয়ার্ড পাঠায়। মোবাইলে tel, number নয়। উদাহরণটি placeholder-এ নয়, চোখের সামনে থাকা <small>-এ, aria-describedby দিয়ে জোড়া। পাসওয়ার্ডে new-password, যাতে পাসওয়ার্ড ম্যানেজার একটি শক্ত পাসওয়ার্ডের প্রস্তাব দিতে পারে। আর ঠিকানার ঘরে street-address — এক চাপে পুরো ঠিকানা।

৯ · AI-এর যুগে — AI-এর বানানো ফর্ম কীভাবে যাচাই করবেন

“একটা রেজিস্ট্রেশন ফর্ম বানিয়ে দাও” — AI মুহূর্তে কোড দেবে, আর দেখতেও সুন্দর লাগবে। কিন্তু ফর্ম এমন জায়গা, যেখানে চোখে না পড়া ভুলের দাম সবচেয়ে বেশি: একটি name ভুল মানে তথ্য হারানো, একটি label কম মানে কেউ ফর্মটি পূরণই করতে পারছেন না, একটি type ছাড়া বোতাম মানে অর্ধেক পূরণ অবস্থায় জমা। AI শিখেছে ইন্টারনেটের বিপুল পুরোনো কোড থেকে, তাই এই ভুলগুলো তার উত্তরে প্রায়ই থাকে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া ফর্ম হাতে পেলে — যাচাইয়ের চেকলিস্ট

• validator.w3.org-এ কোড পরীক্ষা করেছি — for যে id খোঁজে তা আছে, একই id দুবার নেই, অচল attribute নেই
• প্রতিটি label-এর লেখায় চেপে দেখেছি — cursor ঠিক ঘরে যায়
• DevTools-এর Accessibility অংশে প্রতিটি ঘরের Name দেখেছি — কোনোটি ফাঁকা নয়
• একবার জমা দিয়ে DevTools-এর Network প্যানেলে দেখেছি — সব তথ্য ঠিক name-এ যাচ্ছে, পাসওয়ার্ড URL-এ নেই
• শুধু কি-বোর্ড (Tab, Enter, Space) দিয়ে পুরো ফর্ম পূরণ ও জমা দিতে পেরেছি; সব বোতামের type দেখেছি
• Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি; কোনো attribute বা autocomplete মান নিয়ে সন্দেহ হলে MDN-এ পড়েছি, আর ব্রাউজার সমর্থন Can I use-এ দেখেছি