সিরিজের ষষ্ঠ পর্ব — Form তৈরি।
আগের পর্বে আমরা শিখেছি Table। আজকে শিখবো Form — ইউজারের কাছ থেকে তথ্য নেওয়ার জন্য এটা সবচেয়ে গুরুত্বপূর্ণ HTML উপাদান। লগইন পেজ, রেজিস্ট্রেশন পেজ, কন্টাক্ট পেজ — সবকিছুর মূলে থাকে Form।
<form> ট্যাগ
একটা ফর্মের সবকিছু <form> ট্যাগের ভেতরে থাকে:
<form action="/submit" method="post"> <!-- ফর্মের ইনপুট এখানে থাকবে --> </form>
দুইটা গুরুত্বপূর্ণ অ্যাট্রিবিউট:
| Attribute | কাজ |
|---|---|
action |
ফর্ম সাবমিট হলে ডেটা কোথায় পাঠানো হবে |
method |
কীভাবে ডেটা পাঠানো হবে — get বা post |
টিপস: সংবেদনশীল তথ্য (যেমন পাসওয়ার্ড) পাঠাতে সবসময় post ব্যবহার করা উচিত, কারণ get-এ ডেটা URL-এ দেখা যায়।
<input> — ফর্মের প্রধান উপাদান
ইউজারের কাছ থেকে তথ্য নেওয়ার জন্য <input> ট্যাগ ব্যবহার হয়। এর type অ্যাট্রিবিউট বদলে বিভিন্ন ধরনের ইনপুট বানানো যায়:
<input type="text"> <input type="email"> <input type="password"> <input type="number"> <input type="date"> <input type="checkbox"> <input type="radio"> <input type="file"> <input type="submit">
| Type | কাজ |
|---|---|
text |
সাধারণ এক লাইনের টেক্সট |
email |
ইমেইল ফরম্যাট চেক করে |
password |
টাইপ করলে ডট (•) দেখায় |
number |
শুধু নাম্বার ইনপুট নেয় |
checkbox |
একাধিক অপশন বাছাই করা যায় |
radio |
একটাই অপশন বাছাই করা যায় |
file |
ফাইল আপলোড করা যায় |
submit |
ফর্ম সাবমিট করার বাটন |
<label> — ইনপুটের নাম
প্রতিটা ইনপুটের সাথে একটা লেবেল যুক্ত করা উচিত, যাতে ইউজার বুঝতে পারে কী লিখতে হবে। for ও id দিয়ে লেবেল ও ইনপুট সংযুক্ত করা হয়:
<label for="name">নাম:</label> <input type="text" id="name" name="name">
টিপস: label-এর for আর input-এর id একই হতে হবে। এতে লেবেলে ক্লিক করলেও ইনপুট বক্সে ফোকাস চলে যায় — মোবাইলে এটা খুব কাজে লাগে।
name অ্যাট্রিবিউট কেন জরুরি
প্রতিটা ইনপুটে name দিতে হয়, কারণ ফর্ম সাবমিট হওয়ার সময় সার্ভার এই name দিয়েই বুঝতে পারে কোন ডেটা কোন ইনপুট থেকে এসেছে। name ছাড়া ইনপুটের ডেটা সাবমিটই হবে না।
Textarea ও Select
বড় লেখার জন্য <textarea>, আর ড্রপডাউন লিস্টের জন্য <select> ব্যবহার হয়:
<label for="msg">বার্তা:</label> <textarea id="msg" name="msg" rows="4"></textarea> <label for="city">শহর:</label> <select id="city" name="city"> <option value="dhaka">ঢাকা</option> <option value="ctg">চট্টগ্রাম</option> <option value="khulna">খুলনা</option> </select>
Button
ফর্মে বাটন যোগ করার জন্য <button> ট্যাগ বা <input type="submit"> ব্যবহার হয়:
<button type="submit">সাবমিট করো</button> <button type="reset">রিসেট করো</button>
| Type | কাজ |
|---|---|
submit |
ফর্মের ডেটা সাবমিট করে |
reset |
ফর্মের সব ইনপুট খালি করে দেয় |
Validation Attribute — বেসিক যাচাইকরণ
জাভাস্ক্রিপ্ট ছাড়াই HTML দিয়ে কিছু বেসিক validation করা যায়:
<input type="text" required> <input type="text" minlength="3" maxlength="20"> <input type="number" min="1" max="100"> <input type="text" placeholder="তোমার নাম লেখো">
| Attribute | কাজ |
|---|---|
required |
খালি রেখে সাবমিট করা যাবে না |
minlength / maxlength |
টেক্সটের সর্বনিম্ন/সর্বোচ্চ দৈর্ঘ্য |
min / max |
নাম্বারের সর্বনিম্ন/সর্বোচ্চ মান |
placeholder |
ইনপুট খালি থাকলে হালকা রঙে দেখানো হিন্ট টেক্সট |
টিপস: placeholder-কে কখনো label-এর বিকল্প হিসেবে ব্যবহার করা ঠিক না — ইউজার টাইপ শুরু করলে placeholder উধাও হয়ে যায়, ফলে বুঝতে অসুবিধা হতে পারে। দুটোই একসাথে ব্যবহার করাই ভালো।
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>কন্টাক্ট ফর্ম</title>
</head>
<body>
<h1>যোগাযোগ করুন</h1>
<form action="/submit" method="post">
<label for="name">নাম:</label><br>
<input type="text" id="name" name="name" required placeholder="তোমার নাম"><br><br>
<label for="email">ইমেইল:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="msg">বার্তা:</label><br>
<textarea id="msg" name="msg" rows="4"></textarea><br><br>
<button type="submit">পাঠাও</button>
</form>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- একটা রেজিস্ট্রেশন ফর্ম বানাও — নাম, ইমেইল, পাসওয়ার্ড ইনপুট দিয়ে
- প্রতিটা ইনপুটে সঠিক
labelওnameদাও - নাম ও ইমেইলকে
requiredকরো - একটা
selectদিয়ে "জেলা" বাছাই করার অপশন যোগ করো
পরের পর্বে যা থাকছে
পর্ব ৭-এ আমরা শিখবো Semantic HTML — <header>, <nav>, <main>, <section>, <article>, <footer>, এবং কেন এগুলো ব্যবহার করা উচিত।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।