ফর্ম স্টাইলিং আর UX — সুন্দর, পরিষ্কার, ব্যবহারযোগ্য ফর্ম

১ · ফর্ম সাজানো কেন কঠিন — কন্ট্রোল আঁকে ব্রাউজার আর অপারেটিং সিস্টেম

সুমি একটি অনলাইন শাড়ির দোকানের চেকআউট পাতা বানাচ্ছেন। ডিজাইনারের ছবিতে সব ঘর গোল কোণার, বেগুনি টিকচিহ্ন, সুন্দর ড্রপডাউন। নিজের ল্যাপটপে মোটামুটি ঠিক দেখাল, কিন্তু ফোনে ড্রপডাউন চাপতেই Android-এর নিজস্ব তালিকা উঠে এলো, ঘরের লেখা ছোট, আর checkbox-এর রং কিছুতেই বদলায় না। সুমির CSS ভুল নয় — সমস্যাটা ফর্ম কন্ট্রোলের প্রকৃতিতে।

পর্ব ৮ আর ৯-এ আপনি ফর্মের HTML আর নানা কন্ট্রোল ও built-in validation শিখেছেন। এই পর্বে সেই ফর্মকে সুন্দর, পরিষ্কার আর সবার জন্য ব্যবহারযোগ্য করব। শুরু করি মূল প্রশ্ন দিয়ে: একটি <p> বা <div> যত সহজে সাজানো যায়, একটি checkbox কেন তত সহজে যায় না?

কারণ form control-গুলো সাধারণ বাক্স নয়। এরা native widget — ব্রাউজার এদের আঁকে অপারেটিং সিস্টেমের চেনা চেহারায়, যাতে Windows ব্যবহারকারী Windows-এর মতো, Mac ব্যবহারকারী Mac-এর মতো বোতাম দেখেন। এদের ভেতরের অনেক অংশ — select-এর তীরচিহ্ন, খোলা তালিকা, range-এর গোল হাতল, file-এর বোতাম — আপনার DOM-এ নেই; ব্রাউজার ভেতরে লুকিয়ে রাখে, তাই সাধারণ selector সেখানে পৌঁছায় না।

এই “ছাপা নকশা” নিয়ন্ত্রণ করে appearance property. এর ডিফল্ট মান auto — ব্রাউজার যেমন খুশি native চেহারায় আঁকবে। appearance: none দিলে native চেহারা মুছে যায়, কন্ট্রোলটি একটি সাধারণ বাক্সের মতো আচরণ করে, যাকে আপনি border, background, pseudo-element দিয়ে নিজে আঁকবেন। কিন্তু খেয়াল করুন — মুছে যায় শুধু চেহারা। Checkbox তখনো checkbox: Space চাপলে টিক পড়ে, label-এ ক্লিক করলে বদলায়, ফর্ম জমা দিলে মান যায়, screen reader “checkbox, checked” বলে। নিচের ডায়াগ্রামে দেখুন, একটি কন্ট্রোল আঁকার সময় ব্রাউজার কোন স্তরগুলো পার হয়:

appearance এখন সব প্রধান ব্রাউজারে prefix ছাড়াই কাজ করে — Baseline Widely available. পুরোনো টিউটোরিয়ালে -webkit-appearance: none; -moz-appearance: none; দেখবেন; সেগুলো এখন ইতিহাস, আলাদা vendor prefix আর দরকার নেই। কোন কন্ট্রোল কতটা সাজানো যায়, এক নজরে:

২ · ভিত্তি ঠিক করা — ফন্ট, box-sizing, সমান উচ্চতা আর ওপরে label

সুন্দর ফর্মের ৮০ ভাগ কাজ খুব সাধারণ চারটি জিনিসে। প্রথমটি ফন্ট। ফর্ম কন্ট্রোল পাতার ফন্ট inherit করে না — ব্রাউজারের CSS এদের আলাদা ছোট system ফন্ট দিয়ে রাখে। ফলে আপনার সুন্দর বাংলা ফন্ট label-এ দেখা যায়, কিন্তু ঘরের ভেতরে লেখা ছোট আর অন্য ফন্টে। সমাধান এক লাইনে: font: inherit — “পাতার যা ফন্ট, আকার, ওজন, তাই নাও।”

দ্বিতীয়টি প্রস্থ। পর্ব ১৯-এর box-sizing মনে আছে? অনেক ব্রাউজারে input ডিফল্টে content-box (width-এর বাইরে padding আর border যোগ হয়), অথচ select আর button ডিফল্টে border-box. তাই দুটোকেই width: 100% দিলেও input একটু চওড়া হয়ে বেরিয়ে যায়। সবাইকে border-box দিলেই মিলে যায়।

তৃতীয়টি উচ্চতা। input, select, button — সবাইকে একই min-height দিন, যাতে পাশাপাশি সমান দেখায় আর চাপতে সহজ হয়। WCAG 2.2-এর ন্যূনতম touch target ২৪×২৪ CSS pixel; আরামদায়ক মাপ হিসেবে অনেক ডিজাইন নির্দেশিকা ৪৪–৪৮ পিক্সেলের কাছাকাছি সুপারিশ করে। আর চতুর্থটি label-এর জায়গা — ঘরের ওপরে। চোখ সোজা নিচে নামে, আর ফোনের সরু পর্দায় লম্বা বাংলা label-ও জায়গা পায়।

.f {
  display: grid; gap: 4px; max-width: 340px;
  font-family: sans-serif; font-size: 18px;
}
input, select, textarea, button {
  font: inherit;            /* ১ · পাতার ফন্ট আর আকার */
  box-sizing: border-box;   /* ২ · প্রস্থে padding-border ধরা */
  width: 100%;
  min-height: 44px;         /* ৩ · সবার সমান উচ্চতা */
  padding: 8px 12px;
  border: 1px solid #6b7280;
  border-radius: 8px;
}
label { margin-top: 12px; font-weight: 600; }  /* ৪ · ওপরে label */
button {
  margin-top: 18px; border: 0;
  background: #0f766e; color: #fff; font-weight: 700;
}

ফাঁকা জায়গা আর দলে সাজানো

উপরের ফর্মে একটি নীরব নিয়ম কাজ করছে — নৈকট্য (proximity): যা একসাথে, তা কাছাকাছি; যা আলাদা, তার মাঝে বেশি ফাঁক। label থেকে তার ঘর, ঘর থেকে তার নিচের সাহায্য-লেখা বা ভুলের বার্তা — এরা খুব কাছে। এক প্রশ্ন থেকে পরের প্রশ্ন একটু দূরে। আর পুরো একটি বিষয় (যেমন “ডেলিভারির ঠিকানা” বনাম “পেমেন্ট”) আরও দূরে, পর্ব ৮-এর fieldset আর legend দিয়ে আলাদা দলে। fieldset-এর ডিফল্ট ভাঙা-বর্ডারটি বেশিরভাগ নকশায় মানায় না; চেহারা বদলান, কিন্তু element রাখুন — screen reader দলের নাম (legend) পড়ে শোনায়।

fieldset { border: 0; padding: 0; margin: 0 0 28px; min-inline-size: 0; }
legend   { font-size: 1.15em; font-weight: 700; padding: 0; margin-bottom: 8px; }

min-inline-size: 0 একটি পুরোনো ফাঁদের সমাধান: fieldset-এর ডিফল্ট ন্যূনতম প্রস্থ ভেতরের সবচেয়ে চওড়া জিনিসের সমান, তাই ভেতরে চওড়া টেবিল বা লম্বা লেখা থাকলে ফোনে পুরো fieldset পাতার বাইরে চলে যেত।

৩ · Focus — যে দাগটি কখনো মুছবেন না

এখন যা পড়ছেন, সেটি মাউস বা আঙুল দিয়ে স্ক্রল করছেন। কিন্তু অনেক মানুষ পাতা চালান শুধু কীবোর্ডে — হাতের নড়াচড়ায় সমস্যা আছে এমন মানুষ, screen reader ব্যবহারকারী, দ্রুত কাজ করা অফিসকর্মী যিনি Tab চেপে চেপে ফর্ম পূরণ করেন, কিংবা যার ল্যাপটপের touchpad নষ্ট। তাঁরা কোন ঘরে আছেন, তা বোঝার একমাত্র উপায় focus indicator — focus পাওয়া element-এর চারপাশের দাগ।

অথচ ওয়েবে সবচেয়ে বেশি কপি হওয়া CSS লাইনগুলোর একটি হলো outline: none. ডিজাইনার মাউসে বোতাম চেপে নীল দাগ দেখে বিরক্ত হন, কেউ সেটি মুছে দেন, আর কীবোর্ড ব্যবহারকারী অন্ধকারে হাতড়ান। পর্ব ৩৪-এ দেখা :focus-visible এই দ্বন্দ্বের সমাধান: ব্রাউজার নিজেই ঠিক করে কখন দাগ দরকার — কীবোর্ড দিয়ে এলে, বা লেখার ঘরে ঢুকলে (সেখানে মাউস দিয়ে এলেও দাগ দেখায়, কারণ লেখার ঘরে কোথায় লিখছেন তা জানা জরুরি)। মাউসে বোতাম চাপলে সাধারণত দেখায় না।

body { font-family: sans-serif; font-size: 17px; }
button, input {
  font: inherit; padding: 8px 14px;
  border: 1px solid #6b7280; border-radius: 8px;
}
.bad:focus { outline: none; }   /* ✗ কীবোর্ড ব্যবহারকারী হারিয়ে যান */

:focus-visible {
  outline: 3px solid #1d4ed8;   /* মোটা, স্পষ্ট রং */
  outline-offset: 3px;          /* element থেকে একটু দূরে */
}
input:focus-visible { outline-offset: 1px; }

খেয়াল করুন, পর্ব ১৯-এর মতোই outline কোনো জায়গা নেয় না — দাগ এলে-গেলে পাশের কিছু নড়ে না। আধুনিক সব প্রধান ব্রাউজারে outline এখন border-radius-এর বাঁকও মেনে চলে, তাই গোল বোতামে গোল দাগ হয়। অনেকে outline-এর বদলে box-shadow দিয়ে focus আঁকেন। দেখতে সুন্দর, কিন্তু একটি বিপদ আছে: Windows-এর contrast theme-এর মতো forced colors মোডে ব্রাউজার box-shadow পুরো সরিয়ে দেয়, তখন দাগই থাকে না। তাই box-shadow দিলে সাথে outline: 2px solid transparent রাখুন — সাধারণ মোডে স্বচ্ছ বলে দেখা যায় না, forced colors মোডে ব্রাউজার সেটিকে দৃশ্যমান রঙে আঁকে।

নিয়মগুলো WCAG 2.2-এ স্পষ্ট লেখা আছে। প্রতিটি success criterion একটি নম্বর দিয়ে চেনা যায়:

2.4.11-এর একটি সহজ CSS সমাধান আছে: পাতার ওপরে sticky header থাকলে html { scroll-padding-top: 5rem; } দিন। তখন Tab চেপে নিচের ঘরে গেলে ব্রাউজার এমনভাবে স্ক্রল করে যে ঘরটি header-এর নিচে চাপা পড়ে না।

৪ · Checkbox, radio আর toggle — accent-color থেকে পুরো নিজের নকশা

Checkbox আর radio সাজানোর দুটি স্তর আছে, আর প্রথমটি দিয়েই বেশিরভাগ কাজ হয়ে যায়। পর্ব ৩৫-এ দেখা accent-color এক লাইনে checkbox, radio, range আর progress-এর মূল রং বদলে দেয়। ব্রাউজার নিজেই টিকচিহ্নের রং (সাদা না কালো) বেছে নেয়, যাতে পড়া যায়; native আকার, কীবোর্ড, ডার্ক মোড — কিছুই ভাঙে না। এটিও Baseline Widely available.

কিন্তু ডিজাইনার যদি চান গোল কোণার বড় বাক্স, নিজের টিকচিহ্ন, চাপলে ছোট্ট অ্যানিমেশন? তখন দ্বিতীয় স্তর: আসল input-এ appearance: none, তারপর নিজের বাক্স আর ::before দিয়ে টিক। বাম দিকে accent-color, ডান দিকে পুরো নিজের নকশা — দুটো পাশাপাশি:

body { font-family: sans-serif; font-size: 17px; }
fieldset { display: inline-block; vertical-align: top; margin: 4px; }
label { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.a { accent-color: #c026d3; }            /* এক লাইনেই শেষ */

.c input {
  appearance: none; margin: 0;           /* native ছবি মুছল */
  width: 1.4em; height: 1.4em;
  border: 2px solid #475569; border-radius: 6px;
  display: grid; place-content: center;
}
.c input::before {
  content: ""; width: .8em; height: .8em; background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0); transition: transform .15s;
}
.c input:checked { background: #0f766e; border-color: #0f766e; }
.c input:checked::before { transform: scale(1); }
.c input:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
@media (forced-colors: active) {
  .c input:checked::before { background: CanvasText; }
}

শেষের @media (forced-colors: active) অংশটি ছোট, কিন্তু জরুরি। forced colors মোডে ব্রাউজার আপনার background রং সরিয়ে দেয়, ফলে সবুজ বাক্স আর সাদা টিক — দুটোই হারিয়ে যেত। CanvasText একটি system color; ব্যবহারকারীর বেছে নেওয়া লেখার রঙে টিকটি আঁকা হয়, তাই সব থিমে দেখা যায়। নিজের নকশা বানানো মানে এই দায়িত্বগুলোও নিজের কাঁধে নেওয়া — নিচের ডায়াগ্রাম সেই হিসাব:

পুরোনো একটি পদ্ধতিও প্রচলিত — visually-hidden কৌশল: আসল input চোখের আড়ালে (কিন্তু পাতায়) রেখে পাশের <span>-কে বাক্সের মতো আঁকা, আর input:checked + span দিয়ে টিক দেখানো। এখনো চলে, শুধু input-কে কখনো display: none বা visibility: hidden দেবেন না (কীবোর্ড আর screen reader দুটোই একে হারায়), আর focus-দাগ দিন input:focus-visible + span-এ।

Toggle switch — দেখতে নতুন, ভেতরে সেই checkbox

ফোনের সেটিংসে যে “অন-অফ” সুইচ দেখেন, ওয়েবে সেটিও আসলে একটি checkbox. পার্থক্য অর্থে: toggle switch চাপামাত্র কাজ হয় (নোটিফিকেশন চালু, ডার্ক থিম চালু); আর checkbox সাধারণত ফর্ম জমা দেওয়ার পরে কাজ করে (“শর্তাবলি মেনে নিচ্ছি”)। সুইচ বানাতে checkbox-এ role="switch" দিন — screen reader তখন “switch, on” বা “off” বলে। native element রেখে শুধু নির্দিষ্ট ভূমিকা জানানো হচ্ছে, তাই এটি ARIA-র প্রথম নিয়মের বিরোধী নয়।

body { font-family: sans-serif; font-size: 17px; }
.sw { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.sw input {
  appearance: none; margin: 0; flex: none;
  inline-size: 3rem; block-size: 1.75rem;
  border-radius: 999px; background: #64748b;
  position: relative; transition: background .2s;
}
.sw input::before {                      /* গোল হাতল */
  content: ""; position: absolute;
  inset-block: 3px; inset-inline-start: 3px;
  inline-size: calc(1.75rem - 6px);
  border-radius: 50%; background: #fff;
  transition: translate .2s;
}
.sw input:checked { background: #0f766e; }
.sw input:checked::before { translate: 1.25rem 0; }
.sw input:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sw input, .sw input::before { transition: none; }
}

শুধু রঙে চালু-বন্ধ বোঝানো ঝুঁকিপূর্ণ; এখানে হাতলের অবস্থান (বাম বনাম ডান) দ্বিতীয় সংকেত। আর prefers-reduced-motion অংশটি পর্ব ৪৫-এর বিষয় — অ্যানিমেশনে অস্বস্তি বোধ করেন যাঁরা, তাঁদের জন্য নড়াচড়া বন্ধ।

৫ · select, file আর range — জেদি কন্ট্রোলগুলোকে বশে আনা

<select>-এর দুটি অংশ: বন্ধ অবস্থার বাক্সটি, আর খুললে যে তালিকা আসে। প্রথমটি appearance: none দিয়ে পুরো সাজানো যায় — কিন্তু তখন ব্রাউজারের তীরচিহ্নও মুছে যায়, তাই নিজের তীর background ছবি হিসেবে বসাতে হয়। খোলা তালিকাটি এতদিন আঁকত অপারেটিং সিস্টেম; ফোনে সেটি আসলে সুবিধা — বড় আঙুল-বান্ধব তালিকা বা চাকা। File input-এর “ফাইল বাছুন” বোতামটির জন্য আছে মানসম্মত pseudo-element ::file-selector-button (Baseline Widely available). আগে এর জন্য ঘরটি লুকিয়ে নকল বোতাম বানাতে হতো।

body {
  font-family: sans-serif; font-size: 17px;
  display: grid; gap: 6px; max-width: 340px;
}
label { font-weight: 600; margin-top: 10px; }
select {
  appearance: none; font: inherit;
  min-height: 44px; padding: 8px 40px 8px 12px;
  border: 1px solid #6b7280; border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23334155' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
input[type="file"] { font: inherit; }
::file-selector-button {
  font: inherit; margin-inline-end: 12px; padding: 8px 14px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: #0f766e; color: #fff;
}
::file-selector-button:hover { background: #115e59; }
select:focus-visible, input:focus-visible {
  outline: 3px solid #1d4ed8; outline-offset: 2px;
}

খোলা তালিকা সাজানোর গল্প বদলাচ্ছে। পর্ব ৩৭-এ দেখা customizable select-এ appearance: base-select দিলে বোতাম, খোলা তালিকা (::picker(select)), টিকচিহ্ন (::checkmark) — সবই CSS দিয়ে সাজানো যায়, আর আসল select-এর কীবোর্ড ও অ্যাক্সেসিবিলিটি থাকে। এটি এখনো পরীক্ষামূলক, not yet Baseline — মূলত Chromium-এ। তাই একে progressive enhancement হিসেবে দিন: @supports (appearance: base-select)-এর ভেতরে নতুন নকশা, বাইরে উপরের মতো সাধারণ সাজানো select.

Range slider — মানসম্মত পথ নেই, তাই সাবধানে

<input type="range">-এর দুটি অংশ — লম্বা ট্র্যাক আর টেনে সরানোর হাতল (thumb). শুধু রং বদলাতে accent-color-ই যথেষ্ট। পুরো নকশার জন্য কোনো মানসম্মত pseudo-element এখনো নেই; আছে ব্রাউজার-নির্দিষ্ট, non-standard নাম — Chromium আর Safari-তে ::-webkit-slider-thumb আর ::-webkit-slider-runnable-track, Firefox-এ ::-moz-range-thumb, ::-moz-range-track আর ভরাট অংশের জন্য ::-moz-range-progress. এগুলো spec-এর অংশ নয়, তবে বহু বছর ধরে স্থির, আর এখনো এগুলোই একমাত্র পথ।

body { font-family: sans-serif; font-size: 17px; }
input[type="range"] {
  appearance: none; background: transparent;
  display: block; inline-size: 100%; max-inline-size: 340px;
  margin-block: 18px;
}
/* Chromium, Safari — non-standard */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px; background: #cbd5e1;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 24px; height: 24px; margin-top: -8px;
  border-radius: 50%; background: #0f766e;
  border: 3px solid #fff; box-shadow: 0 0 0 1px #0f766e;
}
/* Firefox — non-standard, আলাদা নিয়মে */
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: #cbd5e1; }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: #0f766e; }
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
  background: #0f766e; border: 3px solid #fff; box-shadow: 0 0 0 1px #0f766e;
}
input[type="range"]:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 6px; }

কেন আলাদা নিয়ম? CSS-এর একটি পুরোনো নিয়ম: selector-এর তালিকার একটি অংশও ব্রাউজার না চিনলে পুরো নিয়মটিই বাদ যায়। Chromium ::-moz-range-thumb চেনে না, Firefox ::-webkit-slider-thumb চেনে না — একসাথে লিখলে দুই ব্রাউজারেই নিয়মটি মরে যায়। পর্ব ১৭-এর ক্ষমাশীল :is()-ও এখানে কাজে আসে না, কারণ :is()-এর ভেতরে pseudo-element লেখা যায় না।

৬ · ভুল দেখানো — :user-invalid, :has() আর শুধু রঙে নয়

পর্ব ৯-এ ব্রাউজারের built-in validation দেখেছেন — required, type="email", pattern. CSS দিয়ে ভুল ঘর চিনতে পুরোনো উপায় ছিল :invalid. কিন্তু এর একটি বড় সমস্যা: পাতা খোলামাত্র সব ফাঁকা required ঘর “invalid” — ব্যবহারকারী কিছু লেখার আগেই পুরো ফর্ম লাল! যেন পরীক্ষার হলে খাতা হাতে দেওয়ার সাথে সাথে পরীক্ষক লাল কালিতে লিখে দিলেন “উত্তর নেই”।

সমাধান :user-invalid আর :user-valid (পর্ব ৩৪)। এরা মেলে কেবল ব্যবহারকারী ঘরটি নিয়ে কিছু করার পর — সাধারণত লিখে ঘর ছেড়ে গেলে, বা জমা দিতে চাইলে। ২০২৩ সালের শেষ থেকে এরা সব প্রধান ব্রাউজারে আছে, এখন Baseline Widely available. সময়রেখাটি দেখুন:

:invalid       = সত্য   (ফাঁকা, অথচ required)
:user-invalid  = মিথ্যা  (ব্যবহারকারী এখনো কিছু করেননি)

:invalid       = সত্য   (pattern মেলেনি)
:user-invalid  = মিথ্যা  (সাধারণত লেখা শেষ হওয়ার অপেক্ষা)

:user-invalid  = সত্য   → লাল বর্ডার, ✖ আর লেখা
form:has(:user-invalid) → ওপরে সারাংশ

:user-invalid  = মিথ্যা
:user-valid    = সত্য   → সবুজ বর্ডার; ভুলের বার্তা গায়েব

এবার কয়েকটি নিয়ম, যা ভুলের বার্তাকে সত্যিকারের কাজের বানায়। প্রথম, শুধু রঙে নয় — WCAG-এর 1.4.1 (Use of Color) বলে, তথ্য শুধু রঙে বোঝানো যাবে না। পুরুষদের মধ্যে আনুমানিক প্রতি ১২ জনে একজনের কোনো না কোনো রঙ-অন্ধতা আছে; তাঁদের অনেকের কাছে লাল বর্ডার আর ধূসর বর্ডার প্রায় একই। তাই সাথে আইকন (✖), মোটা বর্ডার, আর সবচেয়ে জরুরি — লেখা: কী ভুল, আর কীভাবে ঠিক করবেন (3.3.1 আর 3.3.3). “ভুল ইনপুট” নয়, “১১ সংখ্যার নম্বর লিখুন, যেমন 01712345678”.

দ্বিতীয়, বার্তার জায়গা — ঘরের ঠিক নিচে, ঘর আর পরের প্রশ্নের মাঝখানে। পাতার কোণের টোস্ট-বার্তা ফোনে প্রায়ই চোখে পড়ে না। তৃতীয়, বার্তাকে ঘরের সাথে জোড়া দেওয়া — aria-describedby দিয়ে, যাতে screen reader ঘরে ঢুকেই নাম আর বার্তা দুটোই শোনায়। আর চতুর্থ, placeholder-এর রং: ব্রাউজারের ডিফল্ট placeholder প্রায়ই খুব হালকা ধূসর, সাদা পটভূমিতে লেখার ৪.৫:১ contrast-এর নিচে। ::placeholder দিয়ে গাঢ় করুন — তবে মনে রাখুন, placeholder label-এর বিকল্প নয় (পর্ব ৮)।

body { font-family: sans-serif; font-size: 17px; }
.field { display: grid; gap: 4px; margin-block: 14px; max-width: 340px; }
input, button { font: inherit; min-height: 44px; padding: 8px 12px; }
input { border: 2px solid #6b7280; border-radius: 8px; }
::placeholder { color: #6b7280; }        /* সাদায় প্রায় ৪.৮:১ */
small { color: #374151; }

.err { display: none; color: #b91c1c; font-weight: 600; }
input:user-invalid { border-color: #b91c1c; background: #fef2f2; }
.field:has(input:user-invalid) .err { display: block; }
input:user-valid { border-color: #15803d; }

.summary {
  display: none; padding: 10px 14px; border-radius: 8px;
  border: 2px solid #b91c1c; background: #fef2f2; color: #7f1d1d;
}
form:has(:user-invalid) .summary { display: block; }

এখানে একটি সূক্ষ্ম ব্যাপার আছে। CSS শুধু চেহারা বদলায়; screen reader লাল রং দেখে না। লুকানো বার্তাকে আগে থেকেই aria-describedby-তে জুড়ে রাখাও ঠিক নয় — accessible description হিসাবের নিয়মে aria-describedby দিয়ে সরাসরি জোড়া লুকানো লেখাও সাধারণত পড়া হয়, ফলে ঠিক ঘরেও “নম্বরটি ঠিক নয়” শোনা যেতে পারে। তাই আসল সাইটে ভুল দেখা দিলে ছোট একটি JavaScript দুটি কাজ করে: ঘরে aria-invalid="true" বসায়, আর বার্তার id-টি aria-describedby-তে যোগ করে:

// ঘর ছাড়ার সময় ব্রাউজারের নিজের যাচাই দেখে ARIA ঠিক করা
phone.addEventListener('blur', () => {
  const bad = !phone.validity.valid;
  phone.setAttribute('aria-invalid', bad);
  phone.setAttribute('aria-describedby', bad ? 'ph-hint ph-err' : 'ph-hint');
});

ফর্মের ওপরের সারাংশেরও একটি পেশাদার রূপ আছে — error summary: জমা দেওয়ার পর ভুল থাকলে ওপরে একটি বাক্সে সব ভুলের তালিকা, প্রতিটি লিংক সংশ্লিষ্ট ঘরে নিয়ে যায়, আর focus সরাসরি বাক্সটিতে চলে যায়, যাতে screen reader ব্যবহারকারীও সাথে সাথে জানেন। যুক্তরাজ্যের সরকারি ওয়েবসাইটের GOV.UK Design System এই নকশাটিকে জনপ্রিয় করেছে। CSS-এর :has() দিয়ে বাক্সটি দেখানো যায়; focus সরানো আর লিংকের তালিকা বানানো JavaScript-এর কাজ — JavaScript কোর্সের ফর্ম যাচাইয়ের পর্বে সেটি দেখবেন।

৭ · disabled বনাম readonly, field-sizing আর ছোট খুঁটিনাটি

দুটি attribute প্রায়ই গুলিয়ে যায়, আর তাদের সাজানোও তাই ভুল হয়। readonly মানে “দেখুন, কপি করুন, কিন্তু বদলাবেন না” — যেমন আগে থেকে বসানো অর্ডার নম্বর। disabled মানে “এই ঘর এখন কাজের বাইরে” — যেমন “অন্য ঠিকানা” বাছাই না করলে তার ঘরগুলো।

সাজানোর সময় একটি ফাঁদ: :read-only শুধু readonly ঘর নয়, disabled ঘরও ধরে (বদলানো যায় না বলে), এমনকি পাতার সাধারণ লেখাও। তাই input:read-only:not(:disabled) লিখুন। WCAG নিষ্ক্রিয় কন্ট্রোলকে contrast-এর নিয়ম থেকে ছাড় দেয়, তবু লেখা পড়ার মতো রাখুন। আর “জমা দিন” বোতাম disabled না রেখে চালু রাখুন, চাপলে কোন ঘর বাকি তা দেখান — disabled বোতাম কেন চলে না, মানুষ প্রায়ই বোঝেন না, কীবোর্ডে খুঁজেও পান না।

পর্ব ৩৭-এর field-sizing: content-ও মনে রাখুন — textarea লেখার সাথে বড় হয়, ছোট input লেখার সমান চওড়া হয়। এটি এখনো not yet Baseline (মূলত Chromium), তাই সবসময় সীমা দিয়ে ব্যবহার করুন; যে ব্রাউজার চেনে না, সেখানে সাধারণ নির্দিষ্ট মাপের ঘর থাকবে:

textarea {
  field-sizing: content;   /* লেখা অনুযায়ী উচ্চতা */
  min-block-size: 3lh;     /* অন্তত তিন লাইন */
  max-block-size: 12lh;    /* তারপর scrollbar */
}

lh একক মানে এক লাইনের উচ্চতা — বাংলা লেখার বড় line-height থাকলেও ঠিক তিন লাইন জায়গা হয়।

৮ · সব একসাথে — ফোন থেকে ডেস্কটপ, লাইট থেকে ডার্ক: একটি পেমেন্ট ফর্ম

এবার সব শিক্ষা এক জায়গায়। ফোনে ফর্ম হবে এক কলামে — চোখ আর আঙুল দুটোই ওপর থেকে নিচে চলে; UX গবেষণায় বারবার দেখা গেছে, এক কলামের ফর্ম মানুষ দ্রুত আর কম ভুলে পূরণ করেন। বড় পর্দায় পাশাপাশি বসান শুধু ছোট, সম্পর্কিত ঘর — যেমন মার্চেন্ট আর টাকার পরিমাণ। পর্ব ২৭-এর grid আর পর্ব ৩০-এর mobile-first media query দিয়ে কাজটি কয়েক লাইনের। খেয়াল রাখুন, Tab-এর ক্রম আসে HTML-এর ক্রম থেকে; grid দিয়ে চোখের ক্রম বদলালে কীবোর্ডের ক্রম বদলায় না, তাই দুটো মিলিয়ে রাখুন।

আর ডার্ক মোড: পর্ব ৩৬-এর color-scheme: light dark দিলে ব্রাউজার ঘরগুলোর ভেতর, checkbox, scrollbar — সবই ব্যবহারকারীর থিমে আঁকে। নিজের দেওয়া রংগুলো light-dark() দিয়ে দুই থিমের জন্য লিখুন। নিচের ফর্মটি একটি কাল্পনিক মোবাইল ওয়ালেট “দ্রুতপে”-র — শেখার জন্য বানানো, কোনো আসল প্রতিষ্ঠানের নয়:

:root { color-scheme: light dark; }
body { font-family: sans-serif; font-size: 17px; }
.pay {
  max-width: 640px; margin: auto; padding: 4px 20px 20px;
  border: 1px solid #94a3b8; border-radius: 14px; accent-color: #0f766e;
}
.grid { display: grid; gap: 14px; }               /* ফোনে এক কলাম */
@media (min-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; }      /* বড় পর্দায় দুই */
  .full { grid-column: 1 / -1; }
}
label { display: block; font-weight: 600; margin-bottom: 4px; }
input:not([type="checkbox"]), button {
  font: inherit; box-sizing: border-box; width: 100%; min-height: 44px;
  padding: 8px 12px; border: 1px solid #64748b; border-radius: 8px;
}
input:read-only:not(:disabled) {
  background: light-dark(#f1f5f9, #1e293b); border-style: dashed;
}
input:disabled { opacity: .6; cursor: not-allowed; }
input:user-invalid { border: 2px solid light-dark(#b91c1c, #f87171); }
:focus-visible { outline: 3px solid light-dark(#1d4ed8, #93c5fd); outline-offset: 2px; }
.chk { display: flex; gap: 8px; align-items: center; margin: 18px 0; font-weight: 400; }
button { background: #0f766e; color: #fff; border: 0; font-weight: 700; }
.note { font-size: .9em; color: light-dark(#475569, #94a3b8); }

৯ · AI-এর যুগে — সুন্দর দেখতে AI-ফর্মের ভেতরের ফাঁক

“একটা সুন্দর সাইন-আপ ফর্ম বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে চোখ-জুড়ানো ফর্ম দেয়। কিন্তু AI নিজের ফর্ম কখনো শুধু কীবোর্ডে পূরণ করে দেখে না, screen reader বা contrast theme চালায় না, আর পুরোনো কোড থেকে শেখায় প্রায়ই সেই কৌশলগুলোই ফেরায়, যা এই পর্বে বাদ দিতে শিখলেন।

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

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

• মাউস সরিয়ে রেখে শুধু Tab, Shift+Tab, Space, Enter আর ↑↓ দিয়ে পুরো ফর্ম পূরণ করে জমা দিয়েছি — প্রতিটি ধাপে focus-দাগ দেখা গেছে
• HTML validator.w3.org-এ পরীক্ষা করেছি; প্রতিটি ঘরের label আছে, কোনো div-কন্ট্রোল নেই
• DevTools-এর Accessibility প্যানেলে প্রতিটি কন্ট্রোলের নাম, role আর অবস্থা (checked, invalid) দেখেছি; Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি
• ভুল তথ্য দিয়ে দেখেছি — পাতা খোলামাত্র লাল নয়; ভুলের বার্তায় আইকন আর কী করতে হবে তার লেখা আছে; DevTools-এর Rendering প্যানেলে ডার্ক আর forced-colors অনুকরণ করে দেখেছি
• নতুন কোনো ফিচার (base-select, field-sizing, light-dark()) পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি, আর না-চেনা ব্রাউজারে কী দেখায় তা নিশ্চিত করেছি