HTML5 এ ইনপুট টাইপস ব্যবহার করে বিভিন্ন ধরনের ডাটা ইনপুট ফিল্ড তৈরি করা যায়, যা ইউজারদের থেকে ডাটা সংগ্রহ করতে সহায়ক এবং ফর্ম ভ্যালিডেশনের সুবিধা প্রদান করে। HTML5 এ ইনপুট টাইপগুলোর সাহায্যে ইউজার ইন্টারফেসকে আরও কার্যকরী এবং ব্যবহারযোগ্য করা যায়। নিচে HTML5 এর সাধারণ এবং নতুন কিছু ইনপুট টাইপস নিয়ে আলোচনা করা হলো:
১. type="text"
বর্ণনা: এটি সবচেয়ে সাধারণ ইনপুট টাইপ, যা সাধারণ টেক্সট ইনপুট করতে ব্যবহার করা হয়। এটি নাম, ঠিকানা বা যেকোনো সাধারণ টেক্সট ইনপুটের জন্য উপযোগী।
উদাহরণ:
<input type="text" name="username" placeholder="Enter your name">
ব্যবহার: ইউজারের নাম, ঠিকানা, বা অন্যান্য সাধারণ তথ্য সংগ্রহের জন্য।
২. type="email"
বর্ণনা: ইমেল অ্যাড্রেস ইনপুট করার জন্য ব্যবহৃত হয় এবং ব্রাউজার ইমেল ইনপুট ভ্যালিডেট করতে পারে। এটি নিশ্চিত করে যে ইউজার একটি বৈধ ইমেল অ্যাড্রেস ইনপুট করেছেন।
উদাহরণ:
<input type="email" name="email" placeholder="Enter your email" required>
ব্যবহার: ইমেল সাবস্ক্রিপশন, ইউজার রেজিস্ট্রেশন বা কন্টাক্ট ফর্মে ইমেল অ্যাড্রেস সংগ্রহের জন্য।
৩. type="number"
বর্ণনা: এটি একটি সংখ্যার ইনপুট ফিল্ড তৈরি করে, যেখানে শুধুমাত্র সংখ্যা ইনপুট করা যায়। এর সাথে min এবং max অ্যাট্রিবিউট ব্যবহার করে ভ্যালু রেঞ্জ সীমাবদ্ধ করা যায়।
উদাহরণ:
<input type="number" name="age" min="0" max="100" placeholder="Enter your age">
ব্যবহার: সংখ্যা ইনপুটের জন্য, যেমন বয়স, প্রাইস, অথবা পরিমাণ।
৪. type="range"
বর্ণনা: একটি রেঞ্জ স্লাইডার ইনপুট তৈরি করে, যেখানে ইউজার একটি নির্দিষ্ট রেঞ্জের মধ্যে মান সিলেক্ট করতে পারে। এটি min, max, এবং step অ্যাট্রিবিউট ব্যবহার করে কাস্টমাইজ করা যায়।
উদাহরণ:
<input type="range" name="volume" min="0" max="100" value="50">
ব্যবহার: ভলিউম কন্ট্রোল, উজ্জ্বলতা সেটিং, বা অন্যান্য রেঞ্জ নির্ভর কন্ট্রোলের জন্য।
৫. type="date"
বর্ণনা: একটি তারিখ পিকার তৈরি করে, যেখানে ইউজার ক্যালেন্ডার থেকে একটি নির্দিষ্ট তারিখ সিলেক্ট করতে পারেন। এটি ফর্ম ভ্যালিডেশনের সুবিধা দেয় এবং ব্রাউজারের ডিফল্ট ক্যালেন্ডার উইজেট ব্যবহার করে।
উদাহরণ:
<input type="date" name="birthday">
ব্যবহার: জন্মতারিখ, ইভেন্টের তারিখ, বা অ্যাপয়েন্টমেন্টের সময়সূচি নির্ধারণের জন্য।
৬. type="time"
বর্ণনা: একটি সময় পিকার তৈরি করে, যেখানে ইউজার একটি নির্দিষ্ট সময় (ঘণ্টা এবং মিনিট) সিলেক্ট করতে পারেন। এটি ফর্ম ভ্যালিডেশনের সুবিধা দেয়।
উদাহরণ:
<input type="time" name="meeting-time">
ব্যবহার: মিটিং বা অ্যাপয়েন্টমেন্টের সময় নির্ধারণের জন্য।
৭. type="url"
বর্ণনা: একটি URL ইনপুট ফিল্ড তৈরি করে, যেখানে ইউজার একটি বৈধ ওয়েবসাইট অ্যাড্রেস ইনপুট করতে পারেন। এটি ইনপুটের সময় ব্রাউজার ভ্যালিডেশন নিশ্চিত করে।
উদাহরণ:
<input type="url" name="website" placeholder="Enter your website URL">
ব্যবহার: ওয়েবসাইট লিঙ্ক ইনপুট করার জন্য, যেমন প্রোফাইল লিঙ্ক, রেফারেন্স লিঙ্ক, বা ওয়েবসাইট সাবমিশন ফর্মে।
HTML5 ইনপুট টাইপগুলোর ব্যবহারিক উদাহরণ
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120" required>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" required>
<label for="meeting">Meeting Time:</label>
<input type="time" id="meeting" name="meeting" required>
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com" required>
<button type="submit">Submit</button>
</form>
ব্যাখ্যা:
type="text": ইউজারের নাম ইনপুট করতে।type="email": ইমেল অ্যাড্রেস ইনপুট করতে।type="number": সংখ্যা ইনপুট করতে, যেখানে বয়সের জন্য ০ থেকে ১২০ পর্যন্ত সীমাবদ্ধ করা হয়েছে।type="range": একটি রেঞ্জ স্লাইডার, যেখানে ভলিউম ০ থেকে ১০০ এর মধ্যে নিয়ন্ত্রণ করা যায়।type="date": একটি ক্যালেন্ডার উইজেট থেকে জন্মতারিখ ইনপুট করতে।type="time": মিটিং বা অ্যাপয়েন্টমেন্টের সময় ইনপুট করতে।type="url": একটি ওয়েবসাইট URL ইনপুট করতে।
Read more
