ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়

Tamima Akther Lima — Fri, 15 Aug 2025 21:00:15 +0000

ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়

Introduction:
ওয়েবসাইটের ফর্ম মানেই ট্যাগের ব্যবহার। নাম, পাসওয়ার্ড, ইমেইল, তারিখ, এমনকি রঙ বাছাই করতেও সাহায্য করে। HTML-এর বিভিন্ন input types জানলে ফর্ম হবে আরও ইন্টারেক্টিভ, ইউজার-ফ্রেন্ডলি, আর ডেটা ভ্যালিডেশন হবে সহজ।
আজ আমরা একে একে সব ইনপুট টাইপ বাংলায় বুঝব, সাথে থাকবে কোড উদাহরণ।

HTML-এ ট্যাগের অনেক রকম type আছে। কিছু জনপ্রিয় টাইপের নাম:

text
password
email
number
date
time
datetime-local
month
week
color
file
checkbox
radio
range
search
tel
url
hidden
submit
reset
button

1️⃣ text – সাধারণ লেখার বক্স

টেক্সট ইনপুট সবচেয়ে বেশি ব্যবহৃত হয়। এখানে ইউজার যেকোনো লেখা টাইপ করতে পারে।

<input type="text" placeholder="Enter Your Name:">

💡 টিপস: placeholder দিলে ফিল্ড বুঝতে সুবিধা হয়।

2️⃣ password – গোপন লেখার বক্স

পাসওয়ার্ড টাইপ করলে টেক্সট দেখা যায় না, তারকা (*) বা বিন্দু আকারে দেখায়।

<input type="password" placeholder="Enter password:">

3️⃣ email – ইমেইল চেকার

শুধু সঠিক ইমেইল ফরম্যাট হলে ফর্ম সাবমিট হবে।

<input type="email" placeholder="example@email.com">

4️⃣ number – শুধু সংখ্যা

শুধুমাত্র সংখ্যা টাইপ করা যাবে, চাইলে min ও max দিয়ে সীমা ঠিক করা যায়।

<input type="number" min="1" max="100">

5️⃣ date – ক্যালেন্ডার থেকে তারিখ

তারিখ সিলেক্ট করার জন্য একটি সুন্দর ক্যালেন্ডার ওপেন হবে।

<input type="date">

6️⃣ checkbox – একাধিক অপশন সিলেক্ট

একাধিক উত্তর একসাথে বেছে নিতে চাইলে checkbox ব্যবহার করা হয়।

<input type="checkbox" name="gender" value="male"> Male
<input type="checkbox" name="gender" value="female"> Female

7️⃣ radio – একটাই বেছে নিন

একই গ্রুপের মধ্যে শুধু একটি অপশন সিলেক্ট করা যায়।

<input type="radio" name="fruits" value="mango"> Mango
<input type="radio" name="fruits" value="apple"> Apple

8️⃣ submit – ফর্ম সাবমিটের বাটন

ডেটা পাঠানোর জন্য ব্যবহৃত হয়।

<input type="submit" value="submit">

9️⃣ file – ফাইল আপলোড

যেকোনো ফাইল সিলেক্ট করে আপলোড করা যায়।

<input type="file">

🔟 search – সার্চ ফিল্ড

এই টাইপ সাধারণ টেক্সট ইনপুট এর মত, কিন্তু ব্রাউজারে সার্চ ফাংশনের জন্য অপ্টিমাইজ করা থাকে।

<label for="site-search">Search Website:</label>
<input type="search" id="site-search" name="site-search" placeholder="Search">

🎯 ডেমো ফর্ম – সব ইনপুট একসাথে:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter your password"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="1" max="100"><br><br>

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob"><br><br>

  <label for="time">Preferred Time:</label>
  <input type="time" id="time" name="time"><br><br>

  <label for="datetime">Appointment:</label>
  <input type="datetime-local" id="datetime" name="datetime"><br><br>

  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color"><br><br>

  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file"><br><br>

  <input type="submit" value="Submit">
</form>

HTML Input Types হল ওয়েব ফর্মের প্রাণ। প্রতিটি টাইপের নিজস্ব কাজ আছে, আর সঠিকভাবে ব্যবহার করলে ফর্ম হবে সুন্দর, সহজ, আর ইউজার-ফ্রেন্ডলি।

এখন আপনার পালা – আপনি কোন ইনপুট টাইপ সবচেয়ে বেশি ব্যবহার করেন? কমেন্টে জানান।

DEV Community: Tamima Akther Lima

ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়

ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়