অধ্যায় ৪: HTML Form ও Input Elements (বাংলায়)
এই অধ্যায়ে আপনি শিখবেন কীভাবে ওয়েবসাইটে ফর্ম (Form) তৈরি করতে হয় — যাতে ব্যবহারকারীরা তথ্য ইনপুট দিতে পারে, যেমন: নাম, ইমেল, পাসওয়ার্ড ইত্যাদি।
১. <form> ট্যাগ
HTML-এ যেকোনো ফর্ম শুরু হয় <form> দিয়ে:
<form action="/submit" method="post">
<!-- ইনপুটগুলো এখানে থাকবে -->
</form>
| অ্যাট্রিবিউট | কাজ |
|---|---|
action |
ইউজারের ইনপুট পাঠানো হবে কোথায় (server URL) |
method |
get বা post (তথ্য পাঠানোর ধরন) |
২. Input Elements (ইনপুট ফিল্ড)
(ক) Text Input
<input type="text" name="name" placeholder="আপনার নাম লিখুন">
(খ) Email Input
<input type="email" name="email" placeholder="আপনার ইমেল দিন">
(গ) Password Input
<input type="password" name="password" placeholder="পাসওয়ার্ড দিন">
(ঘ) Radio Button
<label><input type="radio" name="gender" value="male"> ছেলে</label>
<label><input type="radio" name="gender" value="female"> মেয়ে</label>
(ঙ) Checkbox
<label><input type="checkbox" name="agree"> আমি শর্ত মেনে নিচ্ছি</label>
(চ) Submit Button
<input type="submit" value="সাবমিট করুন">
৩. Label ব্যবহার কেন দরকার?
<label> ট্যাগ ব্যবহার করলে ইউজার বুঝতে পারে ইনপুট ফিল্ডটা কিসের জন্য।
<label for="name">নাম:</label>
<input type="text" id="name" name="name">
৪. একটি পূর্ণ HTML Form উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ফর্ম উদাহরণ</title>
</head>
<body>
<h2>রেজিস্ট্রেশন ফর্ম</h2>
<form action="/submit" method="post">
<label>নাম:</label><br>
<input type="text" name="name" placeholder="আপনার নাম লিখুন"><br><br>
<label>ইমেল:</label><br>
<input type="email" name="email" placeholder="ইমেল দিন"><br><br>
<label>পাসওয়ার্ড:</label><br>
<input type="password" name="password"><br><br>
<label>লিঙ্গ:</label><br>
<input type="radio" name="gender" value="male"> ছেলে
<input type="radio" name="gender" value="female"> মেয়ে<br><br>
<label><input type="checkbox" name="agree"> আমি শর্ত মেনে নিচ্ছি</label><br><br>
<input type="submit" value="রেজিস্টার করুন">
</form>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
HTML Form ও Input কীভাবে কাজ করে
-
কীভাবে ইউজারের কাছ থেকে নাম, ইমেল, পাসওয়ার্ড নেয়া যায়
-
কীভাবে Submit Button দিয়ে ফর্ম সাবমিট করা হয়
পরবর্তী অধ্যায়:
অধ্যায় ৫: Table ও Semantic Tags