This content originally appeared on DEV Community and was authored by Tamima Akther Lima
ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়
Introduction:
ওয়েবসাইটের ফর্ম মানেই ট্যাগের ব্যবহার। নাম, পাসওয়ার্ড, ইমেইল, তারিখ, এমনকি রঙ বাছাই করতেও সাহায্য করে। HTML-এর বিভিন্ন input types জানলে ফর্ম হবে আরও ইন্টারেক্টিভ, ইউজার-ফ্রেন্ডলি, আর ডেটা ভ্যালিডেশন হবে সহজ।
আজ আমরা একে একে সব ইনপুট টাইপ বাংলায় বুঝব, সাথে থাকবে কোড উদাহরণ।
HTML-এ ট্যাগের অনেক রকম type আছে। কিছু জনপ্রিয় টাইপের নাম:
- text
- password
- 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 হল ওয়েব ফর্মের প্রাণ। প্রতিটি টাইপের নিজস্ব কাজ আছে, আর সঠিকভাবে ব্যবহার করলে ফর্ম হবে সুন্দর, সহজ, আর ইউজার-ফ্রেন্ডলি।
এখন আপনার পালা – আপনি কোন ইনপুট টাইপ সবচেয়ে বেশি ব্যবহার করেন? কমেন্টে জানান।
This content originally appeared on DEV Community and was authored by Tamima Akther Lima
Tamima Akther Lima | Sciencx (2025-08-15T21:00:15+00:00) ওয়েব ফর্মের জাদু – HTML Input Types বাংলায়. Retrieved from https://www.scien.cx/2025/08/15/%e0%a6%93%e0%a6%af%e0%a6%bc%e0%a7%87%e0%a6%ac-%e0%a6%ab%e0%a6%b0%e0%a7%8d%e0%a6%ae%e0%a7%87%e0%a6%b0-%e0%a6%9c%e0%a6%be%e0%a6%a6%e0%a7%81-html-input-types-%e0%a6%ac%e0%a6%be%e0%a6%82/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.