HTML Form Input Types শিখুন Text, Email, Password, Radio, Checkbox, Text area, Button ইত্যাদির ব্যবহার
পূর্বে আমরা HTML ফর্মের স্ট্রাকচার, action আর method সম্পর্কে শিখেছি। আজকে আমরা দেখবো, ফর্মে কিভাবে বিভিন্ন ধরনের ইনপুট ব্যবহার করা যায়।
যেমন: টেক্সট বক্স, ইমেইল ফিল্ড, পাসওয়ার্ড, রেডিও বাটন, চেকবক্স, টেক্সটএরিয়া এবং সাবমিট বাটন (text, email, password, radio, checkbox, textarea, button)। এগুলো ব্যবহার করে ইউজারের কাছ থেকে বিভিন্ন ধরণের তথ্য সংগ্রহ করা সম্ভব।
প্রত্যেক ইনপুট টাইপের আলাদা কাজ আছে এবং আমরা সেটা আজ হাতে-কলমে শিখবো।
চলুন, কোডের মাধ্যমে এগুলো একে একে দেখে নিই!
💻 HTML কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Form Input Types</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="submit.php" method="post">
<!-- Text Input -->
Name: <input type="text" name="name"><br><br>
<!-- Email Input -->
Email: <input type="email" name="email"><br><br>
<!-- Password Input -->
Password: <input type="password" name="password"><br><br>
<!-- Radio Buttons -->
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<!-- Checkbox -->
<input type="checkbox" name="agree"> I agree to terms & conditions<br><br>
<!-- Textarea -->
Message:<br>
<textarea name="message" rows="4" cols="40"></textarea><br><br>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
</body>
</html>
📘 প্রতিটি লাইনের ব্যাখ্যা :
🔹 type="text"
👉 “এই ইনপুট ফিল্ডে ইউজার সাধারণ টেক্সট দিতে পারে — যেমন নাম বা ইউজারনেম।”
🔹 type="email"
👉 “এটা এমন একটি ইনপুট যেখানে শুধু ইমেইল টাইপ ইনপুট নেয়। যদি ইউজার ভুল ফরম্যাট দেয়, ব্রাউজার সাবমিট করতে দেবে না।”
🔹 type="password"
👉 “এই ইনপুটে লেখা হলে টেক্সট হাইড হয়ে যায়। পাসওয়ার্ড নেওয়ার সময় এটা ব্যবহৃত হয়।”
🔹 type="radio"
👉 “একাধিক অপশন থেকে মাত্র একটি বেছে নেওয়ার জন্য আমরা রেডিও বাটন ব্যবহার করি। যেমন: Male/Female।”
🔹 type="checkbox"
👉 “এক বা একাধিক অপশন বেছে নিতে হলে চেকবক্স ব্যবহার করা হয়। এখানে আমরা ইউজারকে শর্তে সম্মতি দিতে বলেছি।”
🔹 <textarea>
👉 “যদি ইউজারকে বড় মেসেজ বা কমেন্ট দিতে হয়, তখন আমরা textarea ব্যবহার করি।”
🔹 type="submit"
👉 “সবশেষে, ইউজার সব তথ্য পূরণ করে সাবমিট করার জন্য সাবমিট বাটন ক্লিক করে।”
🗣️
“আজকের ভিডিওতে আমরা HTML Form-এর বিভিন্ন ইনপুট টাইপ নিয়ে বিস্তারিত জানলাম।
এই বিষয়গুলো ওয়েবসাইটে ইউজারের সাথে ইন্টারঅ্যাকশন বাড়াতে খুবই গুরুত্বপূর্ণ।
Topic Covered: html input types, types of input html, Text, Email, Password, Radio, Checkbox, Text area, Button
