<datalist> হলো HTML5-এর একটি উপাদান যা ইনপুট ফিল্ডের জন্য প্রি-ডিফাইনড অপশন সরবরাহ করে, যার মাধ্যমে ব্যবহারকারী সহজেই তাদের ইনপুট সম্পূর্ণ বা সংশোধন করতে পারেন। এটি ইনপুট ফিল্ডের সাথে যুক্ত করে অটো-কমপ্লিট ফিচার প্রদান করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ফর্ম পূরণ প্রক্রিয়াকে দ্রুত করে তোলে।
ডেটালিস্ট কী?
ডেটালিস্ট হলো একটি HTML উপাদান যা <input> ফিল্ডের সাথে যুক্ত হয়ে ব্যবহারকারীদের জন্য প্রস্তাবিত মানগুলির একটি তালিকা প্রদর্শন করে। এটি ব্যবহারকারীর টাইপ করা তথ্যের উপর ভিত্তি করে রিলেটেড অপশনগুলো দেখায়, যা তাদের সঠিক এবং দ্রুত ইনপুট দিতে সহায়তা করে।
ডেটালিস্টের ব্যবহার কিভাবে করবেন?
ডেটালিস্ট ব্যবহার করতে, আপনাকে দুটি প্রধান উপাদান ব্যবহার করতে হবে:
<input>ফিল্ড: যেখানে ব্যবহারকারী তথ্য ইনপুট করবেন।<datalist>: যা ইনপুট ফিল্ডের জন্য প্রস্তাবিত অপশনগুলো সরবরাহ করবে।
ধাপ ১: <input> ফিল্ড তৈরি করুন
প্রথমে, একটি ইনপুট ফিল্ড তৈরি করুন এবং তার list অ্যাট্রিবিউট সেট করুন যা ডেটালিস্টের id এর সাথে মিলবে।
<input type="text" id="browser" name="browser" list="browsers" placeholder="আপনার ব্রাউজার নির্বাচন করুন...">
ধাপ ২: <datalist> উপাদান তৈরি করুন
পরবর্তীতে, একটি ডেটালিস্ট উপাদান তৈরি করুন এবং তার id সেই ইনপুট ফিল্ডের list অ্যাট্রিবিউটের মানের সাথে মেলে।
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
</datalist>
সম্পূর্ণ উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>ডেটালিস্ট এর মাধ্যমে অটো-কমপ্লিট উদাহরণ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"] {
width: 300px;
padding: 8px;
font-size: 1em;
}
</style>
</head>
<body>
<h2>ব্রাউজার নির্বাচন করুন</h2>
<form>
<label for="browser">ব্রাউজার:</label>
<input type="text" id="browser" name="browser" list="browsers" placeholder="আপনার ব্রাউজার নির্বাচন করুন..." required>
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
<option value="Brave">
<option value="Vivaldi">
<option value="Internet Explorer">
</datalist>
<br><br>
<input type="submit" value="জমা দিন">
</form>
</body>
</html>
ব্যাখ্যা:
<input>ফিল্ড: এখানেlist="browsers"অ্যাট্রিবিউটটি<datalist>এরid="browsers"এর সাথে যুক্ত। এটি ব্যবহারকারীর ইনপুটের সাথে মিলে এমন অপশনগুলো দেখায়।<datalist>উপাদান: এখানে বিভিন্ন ব্রাউজারের নাম<option>ট্যাগের মধ্যে প্রদান করা হয়েছে। ব্যবহারকারী যখন ইনপুট ফিল্ডে টাইপ করবেন, তখন এই অপশনগুলো তাদের জন্য প্রস্তাবিত হবে।
ডেটালিস্টের সুবিধাসমূহ
- সহজ ও দ্রুত ইনপুট: ব্যবহারকারীরা দ্রুত তাদের ইনপুট সম্পূর্ণ করতে পারেন, যা ফর্ম পূরণ প্রক্রিয়াকে দ্রুত করে।
- ব্যবহারকারী অভিজ্ঞতা উন্নত: প্রস্তাবিত অপশনগুলোর মাধ্যমে ব্যবহারকারীদের জন্য সঠিক মান নির্বাচন করা সহজ হয়।
- ডাটা সঠিকতা বৃদ্ধি: ব্যবহারকারীরা নির্দিষ্ট অপশন থেকে নির্বাচন করলে ইনপুট ডেটার সঠিকতা বৃদ্ধি পায়।
- কমপ্লেক্স অপশন ছাড়া সহজ: অতিরিক্ত জটিলতা ছাড়া সহজভাবে অটো-কমপ্লিট ফিচার প্রদান করে।
- SEO-ফ্রেন্ডলি: এটি সার্চ ইঞ্জিন অপ্টিমাইজেশনের জন্য উপকারী হতে পারে, কারণ সঠিক ডেটা ইনপুট করা নিশ্চিত হয়।
ডেটালিস্টের সীমাবদ্ধতা
- ব্রাউজার সমর্থন: যদিও অধিকাংশ আধুনিক ব্রাউজার ডেটালিস্টকে সমর্থন করে, কিছু পুরানো ব্রাউজারে এটি কাজ নাও করতে পারে। তাই ফলো-আপ ভ্যালিডেশন নিশ্চিত করা উচিত।
- অপারেশনাল কন্ট্রোল: ডেটালিস্টের অপশনগুলো শুধুমাত্র নির্দিষ্ট মানগুলির মধ্যে সীমাবদ্ধ থাকে, যা ব্যবহারকারীর সম্পূর্ণ স্বাধীনতা সীমিত করতে পারে।
- স্টাইলিং: ডেটালিস্টের অপশনগুলিকে CSS দিয়ে প্রয়োজন মতো স্টাইল করা কঠিন হতে পারে, কারণ ব্রাউজাররা তাদের নিজস্ব স্টাইল প্রয়োগ করে।
ডেটালিস্টের সাথে কাস্টম অটো-কমপ্লিট
যখন ডেটালিস্টের প্রস্তাবিত অপশনগুলির বাইরেও ব্যবহারকারী নিজস্ব ইনপুট দিতে চান, তখন এটি খুবই কার্যকর। তবে, কিছু ক্ষেত্রে ব্যবহারকারীদের আরো বেশি নিয়ন্ত্রণ বা কাস্টমাইজেশন প্রয়োজন হতে পারে, যেখানে জাভাস্ক্রিপ্টের সহায়তা নিতে হয়।
উদাহরণ: ডেটালিস্টের সাথে কাস্টম অটো-কমপ্লিট এবং ভ্যালিডেশন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>কাস্টম অটো-কমপ্লিট উদাহরণ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"] {
width: 300px;
padding: 8px;
font-size: 1em;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>ব্রাউজার নির্বাচন করুন</h2>
<form id="browserForm" novalidate>
<label for="browser">ব্রাউজার:</label>
<input type="text" id="browser" name="browser" list="browsers" placeholder="আপনার ব্রাউজার নির্বাচন করুন..." required>
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
<option value="Brave">
<option value="Vivaldi">
<option value="Internet Explorer">
</datalist>
<span class="error" id="browserError"></span>
<br><br>
<input type="submit" value="জমা দিন">
</form>
<script>
const form = document.getElementById('browserForm');
const browserInput = document.getElementById('browser');
const browserError = document.getElementById('browserError');
const datalist = document.getElementById('browsers');
const options = Array.from(datalist.options).map(option => option.value.toLowerCase());
form.addEventListener('submit', function(event) {
event.preventDefault();
browserError.textContent = '';
const userInput = browserInput.value.toLowerCase();
if (!options.includes(userInput)) {
browserError.textContent = 'দয়া করে তালিকার মধ্যে থেকে একটি বৈধ ব্রাউজার নির্বাচন করুন।';
browserInput.focus();
} else {
alert('ফর্ম সফলভাবে জমা হয়েছে!');
form.submit();
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- কাস্টম ভ্যালিডেশন: জাভাস্ক্রিপ্ট ব্যবহার করে যাচাই করা হয়েছে যে ব্যবহারকারী ডেটালিস্টের মধ্যে প্রদত্ত অপশনগুলির মধ্যে থেকে একটি নির্বাচন করেছেন কিনা।
- এরর মেসেজ: যদি ব্যবহারকারী তালিকার বাইরে কোনো মান প্রদান করেন, তবে একটি কাস্টম এরর মেসেজ প্রদর্শন করা হয়।
- নভ্যালিডেট অ্যাট্রিবিউট:
novalidateঅ্যাট্রিবিউট ব্যবহার করে ব্রাউজারের ডিফল্ট ভ্যালিডেশন বন্ধ করা হয়েছে যাতে কাস্টম ভ্যালিডেশন কার্যকর করা যায়।
ডেটালিস্টের সাথে অটো-কমপ্লিট ব্যবহার করার সময় কিছু টিপস
- প্রাসঙ্গিক অপশন নির্বাচন করুন: ব্যবহারকারীদের জন্য প্রাসঙ্গিক এবং সীমিত অপশন প্রদান করুন, যা তাদের ইনপুট সম্পূর্ণ করতে সহজ করে।
- প্লেসহোল্ডার ব্যবহার করুন: ইনপুট ফিল্ডে প্লেসহোল্ডার ব্যবহার করে নির্দেশনা প্রদান করুন, যেমন "আপনার ব্রাউজার নির্বাচন করুন..."
- কাস্টম ভ্যালিডেশন বিবেচনা করুন: ডেটালিস্ট ব্যবহার করার সময় কাস্টম ভ্যালিডেশন যুক্ত করুন যাতে শুধুমাত্র নির্দিষ্ট অপশনগুলোই গ্রহণ করা হয়।
- অপশনগুলি আপডেট রাখুন: ডেটালিস্টের অপশনগুলো নিয়মিত আপডেট করুন যাতে তারা সর্বশেষ তথ্য এবং ব্যবহারকারীর চাহিদা অনুযায়ী থাকে।
- অ্যাক্সেসিবিলিটি নিশ্চিত করুন: ডেটালিস্টের অপশনগুলি স্ক্রিন রিডার ব্যবহারকারীদের জন্য সহজে উপলব্ধ এবং বোধগম্য হোক তা নিশ্চিত করুন।
ডেটালিস্টের ব্রাউজার সমর্থন
ডেটালিস্ট HTML5-এ যুক্ত হওয়ার পর থেকে অধিকাংশ আধুনিক ব্রাউজার দ্বারা সমর্থিত। তবে, কিছু পুরানো ব্রাউজার বা বিশেষ ব্রাউজার ভার্সনে এটি কাজ নাও করতে পারে। নিচে কিছু জনপ্রিয় ব্রাউজারের সমর্থন অবস্থা দেওয়া হলো:
- Google Chrome: সমর্থন করে।
- Mozilla Firefox: সমর্থন করে।
- Microsoft Edge: সমর্থন করে।
- Safari: সমর্থন করে।
- Opera: সমর্থন করে।
- Internet Explorer: সমর্থন করে না।
নোট: Internet Explorer ব্যবহারকারীদের জন্য ফলো-আপ ভ্যালিডেশন এবং সম্ভাব্য ফলব্যাক প্রদান করা উচিত।
ডেটালিস্ট HTML5-এর একটি শক্তিশালী উপাদান যা ইনপুট ফিল্ডের জন্য অটো-কমপ্লিট ফিচার প্রদান করে। এটি ব্যবহারকারীদের জন্য ফর্ম পূরণ প্রক্রিয়াকে দ্রুত এবং সহজ করে তোলে, ডেটার সঠিকতা বৃদ্ধি করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। ডেটালিস্টের সাথে কাস্টম ভ্যালিডেশন যুক্ত করে আপনি আরও বেশি নিয়ন্ত্রণ এবং নির্ভরযোগ্যতা প্রদান করতে পারেন। ওয়েব ডেভেলপারদের জন্য ডেটালিস্টের কার্যকর ব্যবহার শেখা অত্যন্ত গুরুত্বপূর্ণ, যা আধুনিক এবং ব্যবহারকারী-বান্ধব ওয়েব ফর্ম তৈরি করতে সহায়ক।
টিপস:
- ডকুমেন্টেশন রেফারেন্স: MDN Web Docs -
<datalist>আরও বিস্তারিত জানতে। - প্র্যাকটিস করুন: বিভিন্ন ধরনের ইনপুট ফিল্ডে ডেটালিস্ট ব্যবহার করে দেখুন এবং তাদের সাথে কাজ করার অভ্যাস করুন।
- ফলো-আপ ভ্যালিডেশন: ডেটালিস্ট ব্যবহার করার সময় কাস্টম ভ্যালিডেশন যুক্ত করতে জাভাস্ক্রিপ্ট শিখুন।
- রেসপনসিভ ডিজাইন: নিশ্চিত করুন যে ডেটালিস্ট মোবাইল এবং ডেস্কটপ উভয় ডিভাইসে সঠিকভাবে কাজ করছে।
Read more
