Forms & User Input
ফর্ম ও ইউজার ইনপুট
1. Why Forms Matter — Talking Back to the Server
Everything you've built so far only sends information from the server to the visitor.
Forms flip that direction: they let a real person type, choose, and click — and send that data
back. Login screens, search bars, checkout pages, contact forms, comment boxes — almost every
interactive feature on the web starts with an HTML <form>.
<form> দিয়ে শুরু হয়।
2. The Core Trio — <form>, <input>, <label>
A <form> is the container for everything a visitor fills out. Inside it,
<input> creates a single field to type or choose a value in — its type
attribute decides what kind of control it is. Every input should be paired with a
<label> describing what it's for.
<form> হলো একটি container, যেখানে ভিজিটর যা কিছু পূরণ করে সব থাকে। এর ভেতরে <input> একটি একক ফিল্ড তৈরি করে টাইপ করার বা মান বেছে নেওয়ার জন্য — এর type অ্যাট্রিবিউট ঠিক করে এটি কোন ধরনের কন্ট্রোল। প্রতিটি input-এর সাথে একটি <label> থাকা উচিত, যা বলে দেয় এটি কীসের জন্য।
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Send</button>
</form>3. Why <label for> Matters
The for attribute on a <label> must match the id of its
input. This does two very practical things: clicking the label text focuses the input (bigger, easier
click target — great on mobile), and screen readers announce the label whenever the input receives
focus. Without it, a visually-impaired visitor has no idea what an empty text box is asking for.
<label>-এর for অ্যাট্রিবিউট অবশ্যই তার input-এর id-এর সাথে মিলতে হবে। এতে দুটি বাস্তব সুবিধা হয়: label টেক্সটে ক্লিক করলে input-এ focus চলে যায় (মোবাইলে বড় ও সহজ ক্লিক টার্গেট), এবং স্ক্রিন রিডার input focus পাওয়ার সাথে সাথে label ঘোষণা করে। এটি না থাকলে দৃষ্টি প্রতিবন্ধী ভিজিটর বুঝতেই পারবেন না একটি খালি টেক্সট বক্স আসলে কী জিজ্ঞেস করছে।
<label>.
Placeholder টেক্সট label-এর বিকল্প নয় — টাইপ করা শুরু করলেই এটি অদৃশ্য হয়ে যায়, এবং অনেক স্ক্রিন রিডার এটি নির্ভরযোগ্যভাবে ঘোষণা করে না। সবসময় একটি প্রকৃত
<label> ব্যবহার করুন।
4. Input Types — text, email, number, checkbox
The type attribute changes both the keyboard a mobile device shows and the built-in
validation the browser performs. type="text" is a plain field. type="email"
checks for a valid-looking email address and shows an @ key on mobile keyboards.
type="number" restricts input to numbers and shows a numeric keypad.
type="checkbox" is a toggle for yes/no or multi-select choices.
type অ্যাট্রিবিউট মোবাইল ডিভাইসে কোন কীবোর্ড দেখাবে এবং ব্রাউজার কোন built-in validation করবে — দুটোই পরিবর্তন করে। type="text" একটি সাধারণ ফিল্ড। type="email" একটি বৈধ-দেখতে ইমেইল ঠিকানা যাচাই করে এবং মোবাইলে @ কী দেখায়। type="number" শুধু সংখ্যা ইনপুট নিতে দেয় এবং numeric কীপ্যাড দেখায়। type="checkbox" হ্যাঁ/না বা একাধিক-নির্বাচনের জন্য একটি টগল।
<label for="age">Age</label>
<input type="number" id="age" name="age" min="1" max="120">
<label>
<input type="checkbox" name="subscribe" checked>
Subscribe to newsletter
</label>5. <select> & <textarea>
Not every field is a single-line box. <select> creates a dropdown built from
<option> elements — perfect when there's a fixed list of choices.
<textarea> creates a resizable, multi-line box for longer text like a message or
comment.
<select> একটি dropdown তৈরি করে, যা <option> এলিমেন্ট দিয়ে গঠিত — যখন নির্দিষ্ট সংখ্যক পছন্দ থাকে তখন উপযুক্ত। <textarea> লম্বা টেক্সটের জন্য একটি resize-যোগ্য, multi-line বক্স তৈরি করে, যেমন একটি মেসেজ বা কমেন্ট।
<label for="dept">Department</label>
<select id="dept" name="dept">
<option value="cse">CSE</option>
<option value="eee">EEE</option>
<option value="bba">BBA</option>
</select>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="4"></textarea>6. required & Basic Validation
Adding the required attribute to an input tells the browser to block form submission — and
show a built-in warning message — until that field has a value. Combined with types like
email, number, or attributes like minlength and pattern,
you get useful validation with zero JavaScript.
required অ্যাট্রিবিউট যোগ করলে ব্রাউজার সেই ফিল্ডে মান না দেওয়া পর্যন্ত ফর্ম সাবমিট আটকে দেয় — এবং একটি built-in সতর্কবার্তা দেখায়। email, number-এর মতো type এবং minlength, pattern-এর মতো অ্যাট্রিবিউটের সাথে মিলিয়ে, কোনো JavaScript ছাড়াই কার্যকর validation পাওয়া যায়।
7. Glossary (শব্দকোষ)
| Tag/Attribute | Meaning | বাংলায় |
|---|---|---|
<form> | Container for all input controls. | সব input কন্ট্রোলের জন্য container। |
<input> | A single field; type decides its behavior. | একটি একক ফিল্ড; type এর আচরণ ঠিক করে। |
<label for> | Text tied to a specific input by id. | id দিয়ে নির্দিষ্ট input-এর সাথে যুক্ত টেক্সট। |
<select>/<option> | A dropdown of fixed choices. | নির্দিষ্ট পছন্দের একটি dropdown। |
<textarea> | Multi-line text box. | Multi-line টেক্সট বক্স। |
required | Blocks submission until filled. | পূরণ না হওয়া পর্যন্ত সাবমিট আটকায়। |
name | Identifies the field's data when the form is sent. | ফর্ম পাঠানোর সময় ফিল্ডের ডেটা চিহ্নিত করে। |
8. Choosing the Right Control
✅ Use <select> (নির্দিষ্ট পছন্দ)
- Fixed, known list of options
- Country, department, category pickers
- Saves screen space
Use <textarea> (লম্বা টেক্সট)
- Open-ended, multi-line answers
- Comments, messages, feedback
- User controls length
<label>, the
right type, and a name so its value can actually be read on submission.
প্রতিটি ফর্ম কন্ট্রোলকে সত্যিকারের ব্যবহারযোগ্য হতে তিনটি জিনিস দরকার — একটি সংযুক্ত
<label>, সঠিক type, এবং একটি name যাতে সাবমিটের পর মানটি আসলেই পড়া যায়।
9. Practice Problems
Every problem has a Show Answer button. Try the problem yourself first, then check.
-
Build a form with a text input for "Username" that has a properly connected label."Username"-এর জন্য একটি text input সহ একটি ফর্ম বানান, যার সাথে সঠিকভাবে সংযুক্ত label থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans1.html<form> <label for="uname">Username</label> <input type="text" id="uname" name="uname"> </form> -
Add an email input to that form which is required.সেই ফর্মে একটি required email input যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans2.html<form> <label for="uname">Username</label> <input type="text" id="uname" name="uname"> <label for="uemail">Email</label> <input type="email" id="uemail" name="uemail" required> </form> -
Add a select dropdown for "Favorite Color" with three color options."Favorite Color"-এর জন্য তিনটি রঙের অপশন সহ একটি select dropdown যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans3.html<label for="color">Favorite Color</label> <select id="color" name="color"> <option value="green">Green</option> <option value="blue">Blue</option> <option value="red">Red</option> </select> -
Add a checkbox labeled "I agree to the terms" and a submit button."I agree to the terms" লেখা একটি checkbox এবং একটি submit বাটন যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans4.html<label> <input type="checkbox" name="agree" required> I agree to the terms </label> <button type="submit">Submit</button> -
In two or three sentences, explain why a placeholder is not a substitute for a label.দুই বা তিন বাক্যে ব্যাখ্যা করুন কেন placeholder একটি label-এর বিকল্প নয়।
✨ Show Answer (উত্তর দেখুন)
Answer: A placeholder disappears the instant a user starts typing, so it can't remind them what the field was for if they pause or return later. Many screen readers also don't announce placeholder text reliably as a field's purpose, unlike a properly connected
<label>, which stays visible and is always announced.ব্যবহারকারী টাইপ করা শুরু করার সাথে সাথে placeholder অদৃশ্য হয়ে যায়, তাই বিরতি দিলে বা পরে ফিরে এলে এটি মনে করিয়ে দিতে পারে না ফিল্ডটি কীসের জন্য। অনেক স্ক্রিন রিডারও placeholder টেক্সটকে ফিল্ডের উদ্দেশ্য হিসেবে নির্ভরযোগ্যভাবে ঘোষণা করে না, যেখানে সঠিকভাবে সংযুক্ত
<label>সবসময় দৃশ্যমান থাকে ও ঘোষিত হয়।
Summary — Module 07
Forms collect real input using <form>, <input>, and always a
connected <label>. Input type shapes both keyboard and validation;
<select> and <textarea> handle fixed choices and long text.
required and related attributes give free, built-in validation.
<form>, <input>, এবং সবসময় একটি সংযুক্ত <label> দিয়ে। Input type কীবোর্ড ও validation দুটোই ঠিক করে; <select> ও <textarea> নির্দিষ্ট পছন্দ ও লম্বা টেক্সট সামলায়। required ও সম্পর্কিত অ্যাট্রিবিউট বিনামূল্যে built-in validation দেয়।