31/01/2026
HTML Input Types & Attributes
Today we will learn about some important HTML input types and attributes that are used in real forms.
3️⃣ HTML Input Types & Attributes
🔹 Common HTML Input Types
1️⃣ Email Input
<label for="email">Email</label>
<input type="email" id="email" name="email">
type="email" ব্যবহার করলে browser automatically check করে এটি valid email কিনা।
যেমন: user@gmail.com ✔
user123 ❌
Real project এ login form, signup form এ এটি খুব বেশি ব্যবহার হয়।
2️⃣ Password Input
<label for="password">Password</label>
<input type="password" id="password" name="password">
type="password" ব্যবহার করলে user যা লিখে তা hide হয়ে যায়।
এটি security এর জন্য দরকার।
Login, registration, admin panel — সব জায়গায় এটি ব্যবহার হয়।
3️⃣ Date Input
<label for="birthdate">Birth Date</label>
<input type="date" id="birthdate" name="birthdate">
type="date" ব্যবহার করলে browser একটি calendar picker দেখায়।
User সহজে date select করতে পারে।
Booking form, registration form, event form এ এটি ব্যবহার হয়।
4️⃣ File Upload Input
<label for="resume">Upload Resume</label>
<input type="file" id="resume" name="resume">
type="file" ব্যবহার করলে user তার computer থেকে file upload করতে পারে।
Job application form, profile photo upload, document upload এ এটি ব্যবহার হয়।
🔹 Useful HTML Input Attributes
1️⃣ Placeholder
<input type="text" placeholder="Enter your name">
placeholder input এর ভিতরে একটি hint text দেখায়।
User বুঝতে পারে এখানে কী লিখতে হবে।
2️⃣ Pattern
<input type="text" pattern="[0-9]{11}" placeholder="Enter 11 digit phone number">
pattern ব্যবহার করে আমরা input validation করতে পারি।
উপরের example এ user কে ১১ সংখ্যার phone number দিতে হবে।
ভুল দিলে form submit হবে না।
3️⃣ Autocomplete
<input type="email" name="email" autocomplete="on">
autocomplete browser কে বলে আগে দেয়া information automatically suggest করতে।
User experience অনেক ভালো হয়।
🎯 Real Form Example (Using Multiple Inputs)
<form>
<label>Email</label>
<input type="email" placeholder="Enter your email" required>
<label>Password</label>
<input type="password" required>
<label>Birth Date</label>
<input type="date">
<label>Upload Photo</label>
<input type="file">
<label>Phone Number</label>
<input type="text" pattern="[0-9]{11}" placeholder="Enter 11 digit number">
<button type="submit">Submit</button>
</form>
এই ধরনের structure real project এ খুব সাধারণ।
Login form, signup form, job form, contact form — সব জায়গায় এই input types ব্যবহার হয়।
🚀 Practice Task
একটি simple registration form বানাও যেখানে থাকবে:
• email input
• password input
• birth date
• phone number (pattern validation)
• file upload
নিজে করতে পারলে বুঝবে তুমি form development ভালোভাবে বুঝতে শুরু করেছো।
🔹 Common HTML Form Mistakes Beginners Make
HTML form তৈরি করার সময় beginnerরা কিছু সাধারণ ভুল করে। এই ভুলগুলো এড়িয়ে চললে form অনেক বেশি professional এবং functional হয়।
1️⃣ Label ব্যবহার না করা
❌ Wrong
<input type="email" placeholder="Enter your email">
✅ Correct
<label for="email">Email</label>
<input type="email" id="email" name="email">
Label না থাকলে user বুঝতে পারে না field এর purpose কী। Accessibility এবং usability দুটোই খারাপ হয়।
2️⃣ name Attribute না দেয়া
❌ Wrong
<input type="email" id="email">
✅ Correct
<input type="email" id="email" name="email">
Form submit হলে backend name attribute ব্যবহার করে data পায়। name না থাকলে server কোনো data পাবে না।
3️⃣ Wrong Input Type ব্যবহার করা
❌ Wrong
<input type="text">
✅ Correct
<input type="email">
সঠিক input type ব্যবহার করলে browser validation দেয় এবং mobile keyboard user friendly হয়।
4️⃣ id এবং for Match না করা
❌ Wrong
<label for="email">Email</label>
<input id="user_email">
✅ Correct
<label for="email">Email</label>
<input id="email">
label এর for এবং input এর id একই না হলে label input এর সাথে connect হয় না।
5️⃣ Validation ব্যবহার না করা
❌ Wrong
<input type="email">
✅ Correct
<input type="email" required>
required attribute ব্যবহার করলে empty form submit হবে না। Browser basic validation করে দেয়।
6️⃣ Submit Button না দেয়া
❌ Wrong
<form>
<input type="text" name="name">
</form>
✅ Correct
<form>
<input type="text" name="name">
<button type="submit">Submit</button>
</form>
Submit button না থাকলে user form submit করতে পারবে না।
🎯 Quick Tip
Professional form বানাতে হলে:
- Always use label
- Always use name attribute
- Use correct input type
- Use required validation
- Keep form structure clean