Form — controlled input, submit আর ব্যবহারকারীর ইনপুট

১ · মান কে মনে রাখে — controlled আর uncontrolled

একটি ব্যাংকের কাউন্টার ভাবুন। প্রথম কাউন্টারে আপনি প্রতিটি শব্দ বলছেন, আর কর্মকর্তা সঙ্গে সঙ্গে কম্পিউটারে তুলছেন। ভুল বললে তিনি তখনই থামাতে পারেন। দ্বিতীয় কাউন্টারে আপনি নিজে একটি জমার স্লিপ পূরণ করেন, শেষে স্লিপটি জমা দেন। কর্মকর্তা তখনই প্রথম পড়েন।

React-এর form-এ এই দুটি পথই আছে। প্রথমটি controlled input: প্রতিটি অক্ষর React state-এ যায়, আর render সেই মানই input-এ বসায়। দ্বিতীয়টি uncontrolled input: মান থাকে browser-এর DOM-এ, আর React পড়ে শুধু submit-এর সময়।

HTML form-এর ভিত্তি এখানে আবার শেখানো হবে না। HTML-এর form-এর শুরু, form control আর browser-এর validation, আর সাধারণ JavaScript-এ form যাচাই আলাদা পর্বে আছে। এখানে দেখা হবে React এই জগতের সঙ্গে কীভাবে মেলে।

এই পর্বের লক্ষ্য একটি বাস্তব জিনিস বানানো: বাজারঘরের checkout ঠিকানা form. ক্রেতা এখানে নাম, ফোন, শহর দেবেন, পেমেন্ট বেছে নেবেন, তারপর অর্ডার করবেন। একটি অনলাইন দোকানে এই পাতাটিই টাকা আসার শেষ দরজা, তাই ছোট একটি ভুল মানে হারানো অর্ডার। পথে প্রতিটি ধারণা একে একে আসবে, শেষে সব জোড়া লাগবে।

২ · value আর onChange — একটি keystroke-এর পুরো পথ

Controlled input-এর নিয়ম দুটি। value দিয়ে state থেকে মান বসান, আর onChange দিয়ে নতুন মান state-এ ফেরত রাখুন। useState আর event handler এসেছে পর্ব ১০-এ (State আর event). এখানে দুটিকে একসাথে দেখুন। React-এর onChange নামটি একটু বিভ্রান্তিকর, কারণ এটি browser-এর change-এর মতো field ছাড়ার পরে নয়, প্রতিটি input event-এ চলে।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Preview() {
  const [name, setName] = useState('');
  const [qty, setQty] = useState('2');
  console.log('render', JSON.stringify({ name, qty }));
  const total = 120 * Number(qty);
  return (
    <div>
      <p><label>নাম <input value={name}
        onChange={e => setName(e.target.value)} /></label></p>
      <p><label>কেজি <input type="number" min="1" value={qty}
        onChange={e => setQty(e.target.value)} /></label></p>
      <p>{name || 'ক্রেতা'}: {total} টাকা</p>
      <p>typeof qty = {typeof qty}, qty + 1 = {qty + 1}</p>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<Preview />);
</script>

এবার ধীর গতিতে দেখুন, “রহি”-এর পরে “ম” টাইপ করলে ঠিক কী ঘটে। খেয়াল করুন, প্রথম কাজটি React করে না, করে browser.

1function NameBox() {2  const [name, setName] = useState('রহি');3  return (4    <input value={name}5      onChange={e => setName(e.target.value)} />6  );7}

ধাপ ৪-এ setName না ডাকলে কী হয়? DOM-এ অক্ষর বসেছিল, কিন্তু state বদলায়নি। তখন React DOM-কে আগের মানে ফিরিয়ে দেয়। Edge-এ পরীক্ষায় onChange ঠিকই আমx দেখল, অথচ input থেকে গেল আম. ব্যবহারকারীর চোখে মনে হয় কিবোর্ড নষ্ট। AI-এর লেখা কোডে এই ভুল প্রায়ই পাওয়া যায়, যখন state আর input-এর নাম মেলে না।

Development build-এ React এসব ভুল নিয়ে সতর্ক করে। পেজের লাইভ বাক্সে React-এর production build চলে, তাই সেখানে এই বার্তা দেখা যাবে না। নিচেরটি আসল development build থেকে নেওয়া।

সত্যিকারের run · লেখার সময়ে React 19.3.1, Node 24, jsdom · ~/bazarghar

$ node warn.mjs
You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. …

দ্বিতীয় বার্তাটির সাধারণ কারণ: useState() খালি রাখা, তাই শুরুতে value হলো undefined. React undefined-কে “মান দেওয়া হয়নি” ধরে, অর্থাৎ uncontrolled. পরে string এলে মালিক বদলে যায়। সমাধান: শুরুর মান সব সময় '', আর API থেকে null এলে value={v ?? ''}.

৩ · পাঁচ রকম input, আর “সংখ্যা” যখন string

সব input একভাবে কাজ করে না। কোনটিতে কোন prop, আর event থেকে কী পড়বেন, তা নিচের ছকে আছে।

HTML-এ <option selected> লেখা হয়, React-এ পুরো <select>-এ value দিতে হয়। Radio-র ক্ষেত্রে দলের সব input-এর name এক থাকে, আর checked হিসাব করা হয় তুলনা দিয়ে। <textarea>-এও লেখা ট্যাগের ভেতরে নয়, value prop-এ যায়। চা-স্টলের খাতার মতো ভাবুন: নগদ না বাকি, এটি হ্যাঁ-না, তাই checkbox. চা, কফি না দুধ চা, একটিই বেছে নিতে হয়, তাই radio বা select.

Number input আসলে string দেয়

বাজারঘরের কার্টে ২ কেজি ডাল, প্রতি কেজি ১২০ টাকা, ডেলিভারি ৬০ টাকা। মোট হওয়ার কথা ২৪০ + ৬০ = ৩০০ টাকা। পরিমাণ আসে input থেকে, ডেলিভারি আসে select থেকে, দুটিই string. এবার দেখুন কী হয়:

const qty = '2';                  // input থেকে
const delivery = '60';            // select থেকে
const subtotal = 120 * qty;       // 240, গুণ string-কে সংখ্যা বানায়
const wrong = subtotal + delivery;          // '24060', যোগ জোড়া লাগায়
const right = subtotal + Number(delivery);  // 300

রূপান্তরের ফলগুলো মনে রাখার মতো, কারণ প্রতিটি আলাদা ফাঁদ। নিচের মানগুলো Edge-এ চালিয়ে পাওয়া।

৪ · এক handler-এ অনেক field, আর submit

দশটি field-এর জন্য দশটি useState আর দশটি handler লেখা ক্লান্তিকর। সহজ পথ: সব মান একটি object-এ, আর input-এর name হবে object-এর key. তারপর JavaScript-এর computed key [name] সঠিক ঘরটি বদলায়।

function change(e) {
  const { name, type, value, checked } = e.target;
  setForm(old => ({ ...old, [name]: type === 'checkbox' ? checked : value }));
}

এখানে {...old} জরুরি, কারণ state object সরাসরি বদলানো যায় না, নতুন object দিতে হয়। আর old => রূপটি নিশ্চিত করে সবচেয়ে নতুন state-এর ওপর কাজ হচ্ছে।

Submit আর preventDefault

Browser-এর পুরোনো নিয়ম হলো, form submit হলে পুরো পাতা নতুন request পাঠায় এবং নতুন পাতা লোড করে। তাতে আপনার সব state হারায়। তাই React-এর onSubmit-এ প্রথম লাইনে থাকে e.preventDefault(). এটি browser-কে বলে, “নিজের নিয়মে পাতা বদলাবেন না, এখন থেকে কাজ আমার।”

৫ · Validation, error দেখানো আর accessibility

Validation মানে ডেটা পাঠানোর আগে যাচাই। ব্যবহারকারীর দিক থেকে এর উদ্দেশ্য একটাই: ভুলটি দ্রুত জানানো, যাতে server পর্যন্ত যাওয়ার সময় নষ্ট না হয়। নিচের form-এ নাম, ফোন আর একটি checkbox একটি handler দিয়ে চলছে। খালি অবস্থায় “অর্ডার” চাপুন, তারপর ফোনে 0171 লিখে আবার চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function validate(f) {
  const e = {};
  if (!f.name.trim()) e.name = 'নাম লিখুন';
  if (!/^01[3-9]\d{8}$/.test(f.phone)) e.phone = '১১ সংখ্যার মোবাইল নম্বর দিন';
  return e;
}
function Form() {
  const [f, setF] = useState({ name: '', phone: '', gift: false });
  const [errors, setErrors] = useState({});
  function change(e) {
    const { name, type, value, checked } = e.target;
    setF(old => ({ ...old, [name]: type === 'checkbox' ? checked : value }));
  }
  function submit(e) {
    e.preventDefault();
    const found = validate(f);
    setErrors(found);
    console.log(Object.keys(found).length ? 'আটকে গেল: ' + Object.keys(found) : 'যাবে: ' + JSON.stringify(f));
  }
  const box = (n, t) => <p><label>{t} <input name={n} value={f[n]} onChange={change} aria-invalid={!!errors[n]} aria-describedby={errors[n] ? n + '-e' : undefined} /></label> <b id={n + '-e'}>{errors[n]}</b></p>;
  return <form onSubmit={submit} noValidate>{box('name', 'নাম')}{box('phone', 'ফোন')}
    <p><label><input type="checkbox" name="gift" checked={f.gift} onChange={change} /> উপহার মোড়ক</label></p>
    <button>অর্ডার</button></form>;
}
createRoot(document.getElementById('root')).render(<Form />);
</script>

এবার নিচের ধাপগুলোতে ব্যর্থ submit-এর ভেতরটা দেখুন। উদাহরণের ডেটা: নাম রহিমা, ফোন 0171.

1function submit(e) {2  e.preventDefault();3  const found = validate(form);4  flushSync(() => setErrors(found));5  if (found.phone) phoneRef.current.focus();6  else send(form);7}

Error কখন দেখাবেন, তাও একটি সিদ্ধান্ত। দর্জি প্রথম ফিতা ধরতেই “মাপ ভুল” বলেন না, মাপ শেষ হলে বলেন। Form-এও প্রথমবার ঘর ছাড়ার সময় যাচাই করা ভদ্র। এর জন্য onBlur আর একটি touched object যথেষ্ট:

const [touched, setTouched] = useState({});
const errors = validate(form);                // প্রতি render-এ হিসাব, আলাদা state নয়

function blur(e) {
  setTouched(old => ({ ...old, [e.target.name]: true }));
}
// দেখানোর শর্ত: ঘর ছুঁয়েছেন এবং ভুল আছে
const showPhone = touched.phone && errors.phone;

এখানে errors আলাদা state নয়, form থেকে হিসাব করা মান। যে তথ্য অন্য state থেকে বের করা যায়, তা আলাদা state-এ রাখলে দুটি একসময় আলাদা হয়ে যায়। বিশাল হিসাব না হলে render-এর সময় হিসাব করাই সরল পথ।

Error সবার জন্য: label, aria-describedby

লাল রং একা যথেষ্ট নয়। যিনি screen reader ব্যবহার করেন, তিনি রং দেখেন না। নিচের নিয়মগুলো কয়েক লাইনের কাজ, কিন্তু এগুলোই form-কে সবার ব্যবহারযোগ্য করে। বিস্তারিত আছে HTML-এর accessibility পর্বে.

• প্রতিটি input-এ <label>: htmlFor দিয়ে (JSX-এ for নয়), অথবা input-কে label-এর ভেতরে রেখে। Placeholder label-এর বিকল্প নয়, কারণ টাইপ শুরু করলেই সেটি হারিয়ে যায়।
• Error যুক্ত করুন: error-এর id aria-describedby-তে দিন, যাতে focus পড়লে সেটিও পড়া হয়। ARIA attribute-গুলো দেখা যায় না, শুধু সহায়ক প্রযুক্তিকে তথ্য দেয়।
• রাজ্য জানান: aria-invalid বলে দেয় ঘরটিতে ভুল আছে। Radio-র দলকে <fieldset> আর <legend> দিয়ে ঘিরুন।
• স্থায়ী id: reuse হওয়া component-এ হাতে লেখা id ঠোকাঠুকি করে। useId() প্রতিটি component-এর জন্য আলাদা id বানায়।

৬ · Uncontrolled input, FormData আর useRef

সব form-এ প্রতিটি অক্ষর জানার দরকার নেই। একটি সার্চ বাক্স বা ছোট যোগাযোগ form-এ submit-এর সময় মান পেলেই চলে। তখন defaultValue দিয়ে শুধু শুরুর মান দেওয়া হয়, বাকিটা DOM সামলায়। type="file" সব সময় uncontrolled, কারণ নিরাপত্তার কারণে কোড দিয়ে তার মান বসানো যায় না।

FormData হলো browser-এর API, যা form-এর সব নামওয়ালা field একবারে তুলে আনে। আর useRef একটি বাক্স দেয়, যাতে একটি DOM node ধরে রাখা যায়। এখানে শুধু focus-এর জন্য ব্যবহার। useRef-এর পুরো গল্প পর্ব ১৪-এ (Hook-এর নিয়ম আর custom hook).

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Contact() {
  const nameRef = useRef(null);
  const [count, setCount] = useState(0);
  console.log('render', count);
  function submit(e) {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.currentTarget));
    console.log('FormData:', JSON.stringify(data));
    setCount(count + 1);
    e.currentTarget.reset();
    nameRef.current.focus();
  }
  return (
    <form onSubmit={submit}>
      <p><label>নাম <input ref={nameRef} name="name" defaultValue="রহিম" /></label></p>
      <p><label>শহর <select name="city" defaultValue="ঢাকা">
        <option>ঢাকা</option><option>রাজশাহী</option></select></label></p>
      <p><label><input type="checkbox" name="gift" /> উপহার</label></p>
      <button>পাঠান</button> মোট পাঠানো: {count}
    </form>
  );
}
createRoot(document.getElementById('root')).render(<Contact />);
</script>

কোনটি কখন, আর একটি হিসাব

Controlled input কি ধীর? নিজে নয়, ধীর হয় বড় component. ধরে নিন একটি form-এ ৪০টি field একটি component-এর state-এ, প্রতিটি field render হতে ২ ms লাগে, আর ব্যবহারকারী সেকেন্ডে ৫টি অক্ষর টাইপ করেন। এই সংখ্যাগুলো হিসাবের জন্য ধরে নেওয়া, মাপা নয়।

৬০ Hz পর্দায় একটি frame-এর বাজেট প্রায় ১৬.৭ ms, তাই ৮০ ms মানে কয়েকটি frame নষ্ট, আর INP খারাপ হওয়ার ঝুঁকি। সমাধান সাধারণত তিনটি: state ছোট component-এ নামানো, ভারী অংশ আলাদা করা, অথবা বড় form-এ uncontrolled-ভিত্তিক library. শেষেরটিই পর্ব ২১-এর React Hook Form-এর মূল ভাবনা। আগে থেকে ভয় পাবেন না, ১০টি field-এর সাধারণ form-এ controlled প্রায় সব সময়ই যথেষ্ট।

৭ · React 19 — form action, useActionState, useFormStatus

এতক্ষণ pending, error আর পাঠানোর কাজ হাতে লিখতে হয়েছে। ডিসেম্বর ২০২৪-এ প্রকাশিত React 19 এই নকশাটিকেই framework-এর অংশ করেছে। ভাবনাটি হলো Action: Transition-এর ভেতরে চলা async function. ডাকঘরের কাউন্টারের মতো ভাবুন। আপনি শুধু চিঠি জমা দেন। রসিদ, লাইন আর “কাজ চলছে” সাইনবোর্ড কাউন্টারের দায়িত্ব।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const wait = ms => new Promise(r => setTimeout(r, ms));
async function save(prev, formData) {
  const phone = formData.get('phone').trim();
  console.log('action শুরু:', phone);
  await wait(400);                 // নকল server
  console.log('action শেষ');
  if (!/^01[3-9]\d{8}$/.test(phone)) return { phone, error: 'নম্বরটি ঠিক নয়' };
  return { phone: '', error: null, done: true };
}
function Submit() {
  const { pending } = ReactDOM.useFormStatus();
  console.log('Submit: pending =', pending);
  return <button disabled={pending}>{pending ? 'পাঠানো হচ্ছে…' : 'অর্ডার'}</button>;
}
function Order() {
  const [state, action, isPending] = useActionState(save, { phone: '', error: null });
  console.log('Order: isPending =', isPending);
  return <form action={action}>
    <label>ফোন <input name="phone" defaultValue={state.phone} /></label> <Submit />
    <p role="alert">{state.error}{state.done && 'অর্ডার জমা হয়েছে'}</p>
  </form>;
}
createRoot(document.getElementById('root')).render(<Order />);
</script>

এখন lifecycle-টি ধাপে ধাপে দেখুন। ডেটা একই: ফোন 0171, যা server বাতিল করবে।

1async function save(prev, formData) {2  const phone = formData.get('phone');3  await wait(400);4  return { phone, error: 'ঠিক নয়' };5}6const [state, action, isPending] =7  useActionState(save, initial);8<form action={action}>9  <input name="phone" defaultValue={state.phone} />

আরেকটি বাস্তব পরীক্ষা। তিনবার দ্রুত ক্লিক করলে কী হয়? disabled ছাড়া সাধারণ onSubmit-এ Edge-এ POST 1, POST 2, POST 3 একসাথে গেল। useActionState-এ তিনটি action এক লাইনে পরপর চলল, প্রতিটি আগেরটির ফল নিয়ে। দুই ক্ষেত্রেই অর্ডার তিনটি! তাই disabled={pending} জরুরি। Button নিষ্ক্রিয় থাকলে input-এ Enter চাপলেও submit হয়নি, HTML-এর নিয়মেই। তবু এটি শুধু সামনের পাহারা। আসল ডবল অর্ডার ঠেকায় server, যা পর্ব ৩৩-এর idempotency-তে দেখবেন।

Disabled, readOnly আর pending-এর বার্তা

disabled আর readOnly একই জিনিস নয়। readOnly ঘর বদলানো যায় না, কিন্তু focus পায় আর FormData-তে যায়। disabled ঘর focus পায় না, FormData-তেও যায় না। বাজারঘরে ঠিকানার সাথে একটি অপরিবর্তনীয় অর্ডার নম্বর পাঠাতে হলে readOnly বা <input type="hidden"> নিন, disabled নয়। তবে মনে রাখুন, hidden ঘরও ব্যবহারকারী বদলাতে পারেন, তাই সেটিও server যাচাই করবে।

Pending-এর সময় শুধু button ধূসর করা যথেষ্ট নয়। লেখাও বদলান, যেমন “পাঠানো হচ্ছে…”, আর ফলাফল role="status" বা role="alert" ঘরে দিন, যাতে screen reader জানায়। ব্যর্থ হলে ব্যবহারকারীর লেখা অক্ষত রেখে আবার চেষ্টার সুযোগ দিন। ধীর নেটওয়ার্কে এই কয়েক সেকেন্ডই ঠিক করে দেয় মানুষ আবার ক্লিক করবেন, না দোকান ছেড়ে যাবেন।

তিন পথের কোনটি বাছবেন

দুটি ছোট সুবিধাও জেনে রাখুন। একটি form-এ দুই কাজের জন্য button-এ formAction={fn} দেওয়া যায়, যেমন “খসড়া রাখুন” আর “অর্ডার করুন”। আর পুরো form নতুন করে শুরু করতে <form key={id}> বদলানো সবচেয়ে সরল পথ, কারণ key বদলালে React পুরোনো component ফেলে নতুনটি বসায়। পর্ব ১১-এ (List, key আর শর্তসাপেক্ষ UI) key-এর এই ভূমিকা দেখেছেন।

৮ · বাজারঘরের checkout form — ফোন যাচাই থেকে server পর্যন্ত

এবার সব একসাথে। বাজারঘরের checkout-এ ঠিকানা নেওয়া হবে। আগে ফোন নম্বরের নিয়ম। বাংলাদেশের মোবাইল নম্বর সাধারণত ১১ অঙ্কের, শুরু 01 দিয়ে, আর লেখার সময়ে তৃতীয় অঙ্কটি সাধারণত ৩ থেকে ৯-এর মধ্যে। নতুন prefix যোগ হতে পারে, তাই regex এক জায়গায় রাখা ভালো। ব্যবহারকারী বাংলায়, +88 দিয়ে, বা ড্যাশ দিয়েও লিখতে পারেন। তাই যাচাইয়ের আগে মান “স্বাভাবিক” করে নিতে হয়।

const BN = '০১২৩৪৫৬৭৮৯';

// বাংলা অঙ্ক → ASCII, ফাঁকা ও ড্যাশ বাদ, দেশের কোড বাদ
export function normalizePhone(raw: string): string {
  const ascii = raw.replace(/[০-৯]/g, d => String(BN.indexOf(d)));
  return ascii.replace(/[\s-]/g, '').replace(/^\+?88(?=01)/, '');
}

export const isBdMobile = (p: string) => /^01[3-9]\d{8}$/.test(p);

সত্যিকারের run · Node 24 · ~/bazarghar

$ node phone-check.mts
01712345678      -> 01712345678  ok
০১৭১২৩৪৫৬৭৮      -> 01712345678  ok
+8801712345678   -> 01712345678  ok
017-1234-5678    -> 01712345678  ok
8801912345678    -> 01912345678  ok
01212345678      -> 01212345678  reject
0171234567       -> 0171234567   reject

এবার form-এর মূল অংশ। Project বানানোর ধাপ পর্ব ০৫-এ, আর type-এর ব্যাখ্যা পর্ব ০৬-এ আছে। পুরো ফাইলটি strict TypeScript-এ (TypeScript 7.0.2) npx tsc পার হয়েছে। React 19.3.1 দিয়ে Edge-এ চালিয়ে দেখা হয়েছে।

type Address = {
  name: string; phone: string; city: string;
  payment: 'cod' | 'mobile'; saveAddress: boolean;
};
type Errors = Partial<Record<keyof Address, string>>;
type FieldProps = ComponentProps<'input'> & { label: string; error?: string };

function Field({ label, error, ...input }: FieldProps) {
  const id = useId();
  const errId = `${id}-err`;
  return (
    <p>
      <label htmlFor={id}>{label}</label>
      <input id={id} aria-invalid={error ? true : undefined}
        aria-describedby={error ? errId : undefined} {...input} />
      {error && <span id={errId} className="err">{error}</span>}
    </p>
  );
}

// CheckoutForm-এর ভেতরে
async function submit(e: SubmitEvent<HTMLFormElement>) {
  e.preventDefault();
  if (status === 'saving') return;           // দ্বিতীয় পাঠানো ঠেকায়
  const found = validate(form);
  flushSync(() => setErrors(found));         // error আগে DOM-এ
  const first = Object.keys(found)[0];
  if (first) {
    formRef.current?.querySelector<HTMLElement>(`[name="${first}"]`)?.focus();
    return;
  }
  setStatus('saving');
  try {
    await onSave({ ...form, phone: normalizePhone(form.phone) });
    setStatus('saved');
  } catch {
    setStatus('failed');                     // লেখা মোছে না, আবার চেষ্টা করা যায়
  }
}

// JSX-এর অংশ
<Field label="মোবাইল নম্বর" name="phone" type="tel" autoComplete="tel"
  value={form.phone} onChange={change} error={errors.phone} />
<button disabled={status === 'saving'}>
  {status === 'saving' ? 'পাঠানো হচ্ছে…' : 'অর্ডার নিশ্চিত করুন'}
</button>
<p role="status">{message}</p>

Edge-এ পরীক্ষা: খালি form submit করলে তিনটি error এলো, focus গেল name-এ, আর সেখানে aria-invalid="true". ফোনে ০১৭১২-৩৪৫৬৭৮ লিখলে ফোনের error চলে গেল। সব পূরণ করলে onSave পেল "phone":"01712345678", অপেক্ষার সময় button নিষ্ক্রিয় ছিল, শেষে “অর্ডার জমা হয়েছে।” এখানে type="tel" মোবাইলে সংখ্যার কিবোর্ড আনে, আর autoComplete browser-কে আগের ঠিকানা ভরতে সাহায্য করে।

Browser-এর যাচাই নিরাপত্তা নয়

এখন সবচেয়ে গুরুত্বপূর্ণ কথা। এই সব যাচাই চলছে ব্যবহারকারীর নিজের কম্পিউটারে। আপনার form-কে পাশ কাটিয়ে যে কেউ সরাসরি server-এ request পাঠাতে পারেন। নিচে একটি ইচ্ছে করে সরল server, যা যাচাই ছাড়াই সব নেয়।

সত্যিকারের run · Node 24, 127.0.0.1 · ~/bazarghar

$ curl -i -X POST http://127.0.0.1:3000/orders \
    -H 'content-type: application/json' \
    -d '{"phone":"abc","total":-500}'
HTTP/1.1 201 Created
content-type: application/json
…
{"ok":true}

# server-এর log
saved: {"phone":"abc","total":-500}

ফোন abc, মোট −৫০০ টাকা, আর server বলল 201 Created. কোনো form, কোনো React এই পথে আসেনি। তাই নিয়ম দুই জায়গায় থাকবে। Browser-এ যাচাই ব্যবহারকারীর সুবিধার জন্য, server-এ যাচাই নিরাপত্তার জন্য। দাম কখনো browser থেকে বিশ্বাস করা যায় না, server নিজে হিসাব করবে। পর্ব ২৭-এ Zod দিয়ে server-এর যাচাই, আর পর্ব ২১-এ একই schema দুই দিকে ব্যবহার দেখবেন। আক্রমণের দিকটি আছে Cybersecurity কোর্সের injection পর্বে. আর React-এর {value} লেখা escape করে, যা XSS থেকে সুরক্ষার একটি অংশ।

৯ · বাংলা ইনপুট — IME, অঙ্ক আর অক্ষর গোনা

ইংরেজি ধরে লেখা form বাংলায় প্রায়ই ভাঙে। একটি IME (Input Method Editor) হলো সেই সফটওয়্যার, যা কয়েকটি keystroke মিলিয়ে একটি অক্ষর বানায়। ফোনেটিক কিবোর্ডে k, a মিলে “কা” হয়। মাঝের এই সময়টিকে বলে composition. সব বাংলা কিবোর্ড একভাবে কাজ করে না, তাই নিচের ফল Edge-এর composition-এর একটি পরীক্ষা, সব কিবোর্ডের নিয়ম নয়।

সত্যিকারের run · Edge, DevTools Protocol দিয়ে composition · React 19.3.1

# সাধারণ controlled input
compositionstart
onChange "k" isComposing true
onChange "ka" isComposing true
onChange "কা" isComposing true
compositionend কা
চূড়ান্ত মান: কা

# handler-এ setV(value.toUpperCase()) করলে
compositionstart
onChange "k" isComposing true
compositionstart
onChange "Kka" isComposing true
compositionstart
onChange "KKAকা" isComposing true
compositionend কা
চূড়ান্ত মান: KKAকা

প্রথম অংশ দেখায়, composition চলার সময়েও onChange চলে, আর মান রাখলে কোনো সমস্যা হয় না। দ্বিতীয় অংশে handler মান বদলে দিয়েছে। প্রতিবার composition ভেঙে নতুন করে শুরু হয়েছে, আর ফল হয়েছে আবর্জনা। শিক্ষা পরিষ্কার: টাইপ করার সময় মান বদলাবেন না। যেমন আছে তেমন state-এ রাখুন, রূপান্তর করুন onBlur-এ বা submit-এ, যেমন normalizePhone করে।

function onKeyDown(e) {
  // IME-র Enter অক্ষর বাছাইয়ের জন্য, পাঠানোর জন্য নয়
  if (e.key === 'Enter' && !e.nativeEvent.isComposing) send();
}

এবার অঙ্ক আর অক্ষর। নিচের সব ফল Edge-এ চালিয়ে পাওয়া, en-US আর bn-BD দুই locale-এ একই।

একই নীতি মনে রাখুন: ভেতরে এক রূপ, বাইরে যেকোনো রূপ। ইনপুট নিন উদারভাবে, রাখার আগে স্বাভাবিক করুন, দেখানোর সময় বাংলায় সাজান। তারিখ, সংখ্যা আর locale-এর পুরো কাজ আসবে পর্ব ৫৯-এ (বাংলা সাইট).

১০ · AI-এর যুগে form

AI খুব দ্রুত form লিখে দেয়, আর দেখতেও সুন্দর হয়। সমস্যা হলো form-এর ভুলগুলো প্রথম চেষ্টায় চোখে পড়ে না। ইংরেজিতে সহজ ইনপুট দিয়ে পরীক্ষা করলে সব ঠিক লাগে। ধরা পড়ে বাংলা অঙ্কে, screen reader-এ, ধীর নেটওয়ার্কে দুবার ক্লিকে, আর curl-এ।

AI-এর লেখা form হাতে পেলে — যাচাইয়ের চেকলিস্ট

• শুধু কিবোর্ড দিয়ে পুরো form পূরণ ও submit করেছি
• ০১৭১২৩৪৫৬৭৮, খালি ঘর, অনেক লম্বা লেখা আর ভুল নম্বর দিয়ে চালিয়েছি
• DevTools-এ নেটওয়ার্ক ধীর করে দ্রুত দুবার ক্লিক করেছি; একটিই request গেছে
• Server বন্ধ রেখে দেখেছি: error দেখায়, লেখা মোছে না, আবার চেষ্টা করা যায়
• curl দিয়ে form ছাড়া ভুল ডেটা পাঠিয়ে দেখেছি server বাতিল করে
• Console-এ কোনো controlled/uncontrolled warning নেই, diff-এ কোনো অপ্রয়োজনীয় package নেই