در بسیاری از فرمهای وب، کاربر باید از میان چند گزینه مشخص یکی را انتخاب کند. معمولاً اولین گزینهای که به ذهن میرسد استفاده از تگ <select> است؛ اما HTML یک ابزار کاربردیتر هم در اختیار توسعهدهندگان قرار داده است. تگ datalist این امکان را فراهم میکند که هنگام تایپ در یک فیلد ورودی، لیستی از پیشنهادها به کاربر نمایش داده شود، بدون اینکه او مجبور باشد حتماً یکی از گزینههای از پیش تعیینشده را انتخاب کند.
تگ datalist این امکان را فراهم میکند که هنگام تایپ در یک فیلد ورودی، مجموعهای از پیشنهادها به کاربر نمایش داده شود، بدون اینکه او مجبور باشد حتماً یکی از گزینههای از پیش تعیینشده را انتخاب کند. در ادامه، نحوه کار، کاربردها، تفاوت آن با select و محدودیتهای مهم این عنصر را بررسی میکنیم.
اگر هنوز با ساختار عناصر و نقش آنها در یک سند وب آشنا نیستید، ابتدا راهنمای HTML چیست را بخوانید.
تگ datalist در HTML چیست؟
تگ datalist در HTML عنصری است که مجموعهای از گزینههای پیشنهادی را برای یک فیلد ورودی فراهم میکند. برخلاف select، این پیشنهادها کاربر را به گزینههای موجود محدود نمیکنند و او همچنان میتواند مقدار دیگری را بهصورت دستی وارد کند.
اگر میخواهید جایگاه datalist را در کنار input، select، option و سایر عناصر مربوط به فرمها ببینید، مرجع تگهای HTML را بررسی کنید.
برخلاف تگ <select> که کاربر باید یکی از گزینههای مشخص را انتخاب کند، تگ datalist انعطاف بیشتری دارد؛ یعنی کاربر میتواند هم از پیشنهادها استفاده کند و هم مقدار دلخواه خود را وارد کند.
در واقع، تگ datalist یک سیستم پیشنهاد (Suggestion List) برای input ایجاد میکند که به بهبود تجربه کاربری در فرمهای وب کمک میکند.
ساختار پایه تگ datalist
برای استفاده از datalist باید آن را به یک input متصل کنید. این ارتباط با ویژگی list روی input انجام میشود؛ مقدار list باید دقیقاً با id عنصر datalist یکسان باشد.
مثال:
<label for="browser">انتخاب مرورگر:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
در این مثال:
- کاربر در فیلد input شروع به تایپ میکند.
- مرورگر گزینههای موجود در datalist را بهعنوان پیشنهاد نمایش میدهد.
- کاربر میتواند یکی از گزینهها را انتخاب کند یا مقدار دلخواه خود را وارد کند.
برای بررسی ویژگی list و سایر ویژگیهای قابل استفاده روی کنترلهای فرم، میتوانید به مرجع اتریبیوتهای HTML مراجعه کنید.
نحوه عملکرد تگ datalist در فرمها
عملکرد تگ datalist بسیار ساده اما کاربردی است:
- ابتدا یک فیلد <input> ایجاد میشود.
- ویژگی list در input به شناسه (id) تگ datalist اشاره میکند.
- داخل <datalist> چندین تگ <option> قرار میگیرد.
- مرورگر این گزینهها را هنگام تایپ کاربر نمایش میدهد.
این مکانیزم باعث میشود کاربر سریعتر داده وارد کند و احتمال خطای تایپی نیز کاهش یابد.
مثال کاربردی
فرض کنید در یک فرم ثبتنام میخواهید کاربر نام شهر خود را وارد کند، اما در عین حال چند شهر پرکاربرد را نیز پیشنهاد دهید.
<label for="city">نام شهر:</label>
<input list="cities" name="city" id="city">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
<option value="Tabriz">
</datalist>
در این حالت کاربر میتواند:
- یکی از شهرهای پیشنهادی را انتخاب کند
- یا شهر دیگری را بهصورت دستی وارد کند.
نحوه استفاده از تگ datalist در فرم HTML
برای پیادهسازی و استفاده از تگ datalist در فرمهای وب، کافی است پیوندی میان یک فیلد ورودی و لیست پیشنهادهای خود برقرار کنید. این اتصال بهسادگی و از طریق ویژگی list در تگ <input> و مطابقت آن با id تعریفشده در تگ datalist انجام میشود.
در ادامه، نحوه راهاندازی، استفاده از مقادیر پیشفرض و ترکیب آن با سایر ویژگیهای استاندارد HTML را بررسی میکنیم تا بتوانید تجربهای سریع و منعطف برای ورود دادههای کاربران خود فراهم کنید.
۱. اتصال input به تگ datalist
اولین قدم برای استفاده از تگ datalist این است که یک فیلد ورودی (<input>) داشته باشیم و آن را از طریق ویژگی list به یک تگ دیتالیست متصل کنیم.
ساختار کلی به این شکل است:
<input list="my-list">
<datalist id="my-list">
<option value="گزینه ۱">
<option value="گزینه ۲">
</datalist>
- ویژگی list در input باید دقیقا برابر با مقدار id در تگ دیتالیست باشد.
- تمام گزینهها داخل <datalist> و با استفاده از تگ <option> تعریف میشوند.
۲. مثال عملی: فرم انتخاب مرورگر
در مثال زیر، یک فیلد برای انتخاب مرورگر داریم که از تگ datalist برای پیشنهاد گزینهها استفاده میکند:
<form>
<label for="browser">مرورگر مورد علاقه شما:</label>
<input list="browsers" id="browser" name="browser" placeholder="یک مرورگر وارد کنید">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
</datalist>
</form>
در این فرم:
- کاربر هنگام تایپ، لیست پیشنهادها را میبیند.
- اگر مرورگر او در لیست نبود، میتواند متن دلخواه خود را وارد کند.
- این رفتار، تفاوت اصلی تگ datalist با select است.
۳. افزودن مقدار پیشفرض (Default Value)
اگر بخواهید یک مقدار اولیه برای input تنظیم کنید، کافی است ویژگی value را روی تگ <input> تنظیم کنید. این مقدار میتواند یکی از گزینههای تگ datalist باشد یا نباشد.
<label for="city">نام شهر:</label>
<input list="cities" id="city" name="city" value="Tehran">
<datalist id="cities">
<option value="Tehran">
<option value="Mashhad">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
- اگر مقدار default در لیست وجود داشته باشد، کاربر در صورت نیاز میتواند آن را تغییر دهد.
- این روش برای فرمهایی که دادهی پیشفرض دارند بسیار مفید است.
۴. استفاده از attributeهای دیگر input همراه با datalist
تگ <input> که به تگ datalist متصل است میتواند مانند سایر فیلدها، ویژگیهای معمول را داشته باشد:
- name برای ارسال مقدار در فرم
- id برای اتصال label
- placeholder برای راهنمای متن
- required اگر مقدار باید حتماً پر شود
- type (معمولاً text ولی میتواند email، search و … هم باشد)
مثال:
<label for="country">کشور محل اقامت:</label>
<input type="text" list="countries" id="country" name="country" required>
<datalist id="countries">
<option value="Iran">
<option value="Germany">
<option value="Canada">
<option value="Australia">
</datalist>
۵. سناریوی عملی: فرم ثبتنام با فیلد شهر
در یک فرم ثبتنام، میتوانید با تگ datalist تجربه کاربری بهتری برای فیلد شهر بسازید:
<form>
<label for="city">شهر محل سکونت:</label>
<input list="cities" id="city" name="city" placeholder="نام شهر را وارد کنید">
<datalist id="cities">
<option value="Tehran">
<option value="Karaj">
<option value="Tabriz">
<option value="Shiraz">
<option value="Ahvaz">
</datalist>
<button type="submit">ثبت</button>
</form>
در این سناریو:
- کاربر با تایپ چند حرف اول، سریعتر شهر را پیدا میکند.
- اگر شهر او در لیست نباشد، همچنان میتواند شهر را به صورت دستی وارد کند.
- این یعنی ترکیب سرعت + انعطاف در ورود داده.
تفاوت تگ datalist با select و autocomplete
درک تفاوت میان تگ datalist و select کلیدیترین مهارت برای انتخاب ابزار مناسب در طراحی فرمهای وب است. اگرچه هر دو تگ برای نمایش لیستی از گزینهها به کار میروند، اما فلسفه عملکرد آنها کاملاً متفاوت است؛ یکی بر “محدودیت و انتخاب قطعی” تأکید دارد و دیگری بر “پیشنهاد و آزادی عمل”. در این بخش، با بررسی دقیق رفتارهای این دو تگ، کاربرد ویژگی autocomplete و تحلیل سناریوهای عملی، به شما کمک میکنیم تا متوجه شوید در چه شرایطی هر یک از آنها تجربه کاربری (UX) بهتری را برای مخاطبان شما رقم میزنند.
تفاوت مفهومی بین datalist و select
تگ <select> یک لیست کشویی کلاسیک است که کاربر تنها میتواند یکی از گزینههای موجود در آن را انتخاب کند.
تگ datalist برعکس، فقط لیست پیشنهاد ارائه میدهد؛ یعنی:
- کاربر میتواند از بین گزینههای پیشنهادی انتخاب کند،
- یا مقدار دلخواه دیگری را که در لیست نیست، وارد کند.
بهصورت خلاصه:
اگر میخواهید کاربر مجبور باشد فقط از بین گزینههای مشخص انتخاب کند ← از <select> استفاده کنید.
اگر میخواهید پیشنهاد بدهید ولی کاربر را محدود نکنید ← از <datalist> استفاده کنید.
مقایسه رفتاری datalist و select (جدول مقایسه)
| ویژگی / تگ | <select> | <input> + <datalist> |
|---|---|---|
| امکان تایپ آزاد | خیر | بله |
| محدود بودن به گزینههای لیست | بله | خیر |
| نمایش پیشنهاد هنگام تایپ | معمولاً خیر | بله (پیشنهادهای داینامیک هنگام تایپ) |
| مناسب برای فرمهای رسمی/سختگیر | بله | نسبی؛ برای فرمهای منعطفتر مناسبتر است |
| کنترل اعتبارسنجی (Validation) | سادهتر | کمی پیچیدهتر (چون مقدار میتواند خارج از لیست باشد) |
| تجربه کاربری روی موبایل | پایدار و قابل پیشبینی | بسته به مرورگر و نسخه متفاوت است |
این جدول کمک میکند سریع تصمیم بگیرید کدام تگ برای سناریوی شما مناسبتر است.
ارتباط تگ datalist با autocomplete
در HTML، ویژگی autocomplete معمولاً روی تگ <input> تنظیم میشود و به مرورگر اجازه میدهد بر اساس سوابق قبلی کاربر، پیشنهادهایی برای آن فیلد ارائه کند:
<input type="text" name="email" autocomplete="email">
اما تگ datalist کاری متفاوت انجام میدهد:
- autocomplete: پیشنهادها بر اساس دادههای ذخیرهشده مرورگر هستند.
- datalist: پیشنهادها بر اساس لیستی است که شما در HTML تعریف میکنید.
بنابراین:
- میتوانید هر دو را با هم استفاده کنید (در برخی مرورگرها کار میکند)،
- ولی نقش آنها متفاوت است؛
- autocomplete کاملاً وابسته به مرورگر است، اما datalist کاملاً تحت کنترل شماست.
سناریوهای استفاده: کجا از datalist و کجا از select استفاده کنیم؟
از <select> استفاده کنید وقتی:
- کاربر باید حتماً یکی از گزینههای مشخص را انتخاب کند (مثلاً «نوع عضویت: عادی / طلایی / ویژه»).
- نیاز به کنترل قوی روی دادههای ورودی دارید (برای جلوگیری از هرگونه مقدار خارج از لیست).
- فرم شما رسمی، حساس یا مرتبط با دادههای ساختیافته است (مثل وضعیت سفارش، نقش کاربر، نوع حساب).
از <datalist> استفاده کنید وقتی:
- میخواهید ورودی کاربر انعطافپذیر باشد (مثلاً نام شهر، نام شرکت، شغل).
- میخواهید با پیشنهادهای آماده، ورود داده را سریعتر کنید.
- لیست گزینهها ممکن است ناقص باشد یا همیشه در حال تغییر باشد و نمیخواهید کاربر محدود شود.
مثال مقایسهای: انتخاب کشور
با <select> (کاملاً محدود):
<label for="country-select">کشور:</label>
<select id="country-select" name="country">
<option value="IR">Iran</option>
<option value="DE">Germany</option>
<option value="CA">Canada</option>
</select>
با <datalist> (پیشنهاد + آزادی):
<label for="country">کشور:</label>
<input list="countries" id="country" name="country" placeholder="نام کشور را وارد کنید">
<datalist id="countries">
<option value="Iran">
<option value="Germany">
<option value="Canada">
</datalist>
- در نسخه select، کاربر نمیتواند کشوری غیر از این سه مورد وارد کند.
- در نسخه datalist، کاربر میتواند هم از پیشنهادها استفاده کند و هم هر کشور دیگری را تایپ کند.
تفاوت تجربه کاربری (UX) بین datalist و select
از نظر UX:
- <select> برای مواردی مناسب است که انتخاب باید کاملاً مشخص، ساده و شفاف باشد.
- <datalist> برای مواردی مناسب است که:
- دادهها زیاد هستند،
- احتمال تایپ دستی بالاست،
- و شما میخواهید با پیشنهاد هوشمند، کاربر را کمک کنید.
آیا datalist جایگزین کامل select است؟
خیر. تگ datalist مکمل select است، نه جایگزین کامل آن.
- وقتی داده باید کنترلشده و محدود باشد ← <select>.
- وقتی داده باید پیشنهادی و قابلگسترش باشد ← <datalist>.
به همین دلیل، بسیاری از فرمهای حرفهای ترکیبی عمل میکنند؛ بعضی فیلدها را با select و بعضی را با datalist پیادهسازی میکنند.
کاربردهای حرفهای تگ datalist و سناریوهای پیشرفته
تگ datalist در نگاه اول ممکن است فقط یک لیست پیشنهاد ساده به نظر برسد، اما در پروژههای واقعی وب میتواند نقش مهمی در بهبود سرعت ورود داده، کاهش خطاهای تایپی و افزایش تجربه کاربری داشته باشد.
در بسیاری از فرمهای مدرن، datalist به عنوان یک مکانیزم پیشنهاد هوشمند (Suggestion System) استفاده میشود که به کاربر کمک میکند سریعتر داده صحیح وارد کند.
در ادامه چند سناریوی حرفهای و کاربردی را بررسی میکنیم.
پیشنهاد شهرها، کشورها یا موقعیتهای جغرافیایی
یکی از رایجترین کاربردهای تگ datalist در فرمهایی است که کاربر باید اطلاعات مکانی وارد کند؛ مانند:
- شهر
- کشور
- استان
- آدرس
در چنین مواردی معمولاً:
- تعداد گزینهها زیاد است
- ممکن است همه گزینهها از قبل مشخص نباشند
- کاربر باید امکان وارد کردن مقدار جدید داشته باشد
<label for="city">شهر:</label>
<input list="cities" id="city" name="city" placeholder="نام شهر را وارد کنید">
<datalist id="cities">
<option value="Tehran">
<option value="Mashhad">
<option value="Isfahan">
<option value="Shiraz">
<option value="Tabriz">
</datalist>
در این سناریو، کاربر میتواند با تایپ چند حرف، سریعتر شهر موردنظر خود را پیدا کند.
استفاده در فرمهای جستجو (Search Suggestion)
تگ datalist میتواند برای ساخت پیشنهادهای جستجو (Search Suggestions) در فرمهای جستجو استفاده شود.
<input type="search" list="search-suggestions" placeholder="جستجو کنید">
<datalist id="search-suggestions">
<option value="HTML tutorial">
<option value="CSS Flexbox">
<option value="JavaScript basics">
<option value="Responsive design">
</datalist>
این روش سادهترین شکل autocomplete سفارشی در HTML است.
تولید گزینههای datalist به صورت داینامیک با JavaScript
در پروژههای واقعی، معمولاً لیست گزینهها ثابت نیست و ممکن است از:
- دیتابیس
- API
- یا دادههای کاربر
دریافت شود.
در چنین حالتی میتوان گزینههای <datalist> را با JavaScript به صورت داینامیک تولید کرد.
مثال:
<input list="languages" id="language">
<datalist id="languages"></datalist>
const languages = ["JavaScript", "Python", "PHP", "Go", "Rust"];
const datalist = document.getElementById("languages");
languages.forEach(lang => {
const option = document.createElement("option");
option.value = lang;
datalist.appendChild(option);
});
در این مثال:
- دادهها در JavaScript قرار دارند
- گزینهها به صورت داینامیک داخل <datalist> ساخته میشوند
- در پروژههای واقعی این دادهها میتوانند از API یا دیتابیس دریافت شوند.
اتصال datalist به دادههای بکاند
در فرمهای پیشرفته، لیست پیشنهادها ممکن است از سمت سرور ارسال شود.
مثلاً:
- لیست محصولات
- لیست کاربران
- لیست شرکتها
- لیست شهرها
سناریوی رایج:
- کاربر شروع به تایپ میکند.
- JavaScript درخواست (API request) به سرور ارسال میکند.
- سرور نتایج را برمیگرداند.
- گزینههای <datalist> بهروزرسانی میشوند.
این الگو شبیه Autocomplete حرفهای است و در بسیاری از اپلیکیشنهای بزرگ استفاده میشود.
نکات مهم دسترسیپذیری (Accessibility)
هنگام استفاده از datalist، وجود یک label واضح برای input اهمیت زیادی دارد و placeholder نباید جای برچسب فیلد را بگیرد. همچنین بهتر است رفتار فرم را با صفحهکلید و فناوریهای کمکی بررسی کنید.
اگر میخواهید اصول طراحی فرمهای قابل استفاده برای کاربران مختلف را عمیقتر بررسی کنید، راهنمای دسترسپذیری وب را بخوانید.
چند نکته مهم:
- همیشه از label برای input استفاده کنید.
- placeholder نباید جایگزین label شود.
- گزینهها باید واضح و کوتاه باشند.
- بهتر است برای دادههای بسیار بزرگ از سیستم جستجوی پیشرفتهتر استفاده شود.
مثال استاندارد:
<label for="job">شغل:</label>
<input list="jobs" id="job" name="job">
<datalist id="jobs">
<option value="Developer">
<option value="Designer">
<option value="Project Manager">
</datalist>
Best Practice — چه زمانی datalist بهترین انتخاب است؟
دیتالیست زمانی بهترین نتیجه را میدهد که:
- لیست گزینهها نسبتاً زیاد باشد
- کاربران احتمالاً مقدارهای مختلفی وارد کنند
- هدف شما کمک به تایپ سریعتر باشد، نه محدود کردن کاربر
اگر هدف شما کنترل کامل روی ورودی است، استفاده از <select> یا سیستم اعتبارسنجی سمت سرور گزینه مناسبتری خواهد بود.
مثال — سناریوی واقعی در فرم ثبت محصول
فرض کنید در یک پنل مدیریت فروشگاه، کاربر باید نام برند محصول را وارد کند.
- برندهای رایج در datalist قرار میگیرند
- اگر برند جدیدی وجود داشت، کاربر میتواند آن را تایپ کند
این روش باعث میشود:
- دادهها سریعتر وارد شوند
- احتمال اشتباه تایپی کمتر شود
- فرمها کاربرپسندتر شوند
محدودیتها، مشکلات رایج و هشدارهای مهم در استفاده از تگ datalist
استفاده از <datalist> در عین سادگی، با چالشهایی همراه است که اگر از آنها آگاه نباشید، میتواند در پروژههای بزرگ باعث کاهش تجربه کاربری شود.
رفتار datalist در موبایل و مرورگرهای مختلف
یکی از بزرگترین چالشهای این تگ، عدم یکپارچگی نمایش در مرورگرهای مختلف است. در محیط دسکتاپ، معمولاً با کلیک روی فیلد، لیست پیشنهادها ظاهر میشود؛ اما در موبایل، رفتار سیستمعامل و مرورگر دخالت زیادی دارد.
- مرورگر Safari: در برخی نسخههای قدیمیتر، پشتیبانی کاملی از این تگ نداشته و ممکن است به سادگی فیلد را مانند یک text input معمولی نمایش دهد.
- محیط موبایل: در برخی کیبوردهای موبایل، پیشنهادهای خودِ سیستمعامل با لیست شما تداخل پیدا میکنند که میتواند باعث سردرگمی کاربر شود. همیشه پیش از انتشار، فرمهای خود را در دستگاههای واقعی (Android/iOS) تست کنید.
باگهای رایج و راهحل حرفهای
برخی از باگهایی که توسعهدهندگان بهطور معمول با آن مواجه میشوند، عبارتند از:
- عدم نمایش لیست: رایجترین دلیل آن، همخوانی نداشتن id در <datalist> با ویژگی list در <input> است.
- استایلدهی محدود: برخلاف select که استایلدهی آن نیز محدود است، استایلدهی به گزینههای datalist (تگهای option داخلی) در بیشتر مرورگرها غیرممکن است. این لیستها توسط مرورگر (Browser Native) رندر میشوند.
- راهحل حرفهای: اگر به استایلهای سفارشی نیاز دارید، از کتابخانههای JS نظیر Select2 یا Awesomplete استفاده کنید.
پشتیبانی تگ datalist در مرورگرهای مختلف
پشتیبانی مرورگرها از تگ datalist در سالهای اخیر بسیار بهتر شده است و تقریباً تمام مرورگرهای مدرن از آن پشتیبانی میکنند. با این حال، تفاوتهایی در نحوه پیادهسازی و نمایش پیشنهادها بین مرورگرها وجود دارد.
این موضوع به مسئله مهم Cross‑Browser Compatibility در توسعه وب مربوط میشود. حتی زمانی که یک ویژگی در استانداردهای W3C تعریف شده باشد، مرورگرهای مختلف ممکن است آن را با جزئیات متفاوتی پیادهسازی کنند. بنابراین بررسی وضعیت پشتیبانی یک قابلیت HTML در مرورگرها قبل از استفاده در پروژههای واقعی اهمیت زیادی دارد.
برای بررسی دقیق این موضوع، توسعهدهندگان معمولاً از منابع معتبری مانند CanIUse استفاده میکنند که اطلاعات بهروزشدهای درباره میزان پشتیبانی ویژگیهای وب در مرورگرهای مختلف ارائه میدهد.
در مورد تگ datalist، بیشتر مرورگرهای مدرن از آن پشتیبانی کامل دارند، اما ممکن است در برخی نسخههای قدیمیتر یا برخی مرورگرهای موبایل رفتار متفاوتی مشاهده شود.
پشتیبانی مرورگرها
| Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|
| ✅ 20+ | ✅ 4+ | ✅ 12.1+ | ✅ 79+ | ✅ 9+ |
آخرین بهروزرسانی: اردیبهشت ۱۴۰۵ | منبع: CanIUse
نکته مهم این است که حتی با وجود پشتیبانی کامل، ظاهر و رفتار dropdown پیشنهادها ممکن است در مرورگرها متفاوت باشد. به همین دلیل توصیه میشود هنگام طراحی فرمها:
- فرم را در چند مرورگر مختلف تست کنید
- تجربه کاربری موبایل را نیز بررسی کنید
- در صورت نیاز برای پروژههای حساس از سیستمهای autocomplete پیشرفتهتر استفاده کنید
این بررسی ساده کمک میکند اطمینان حاصل کنید که فرمهای شما برای بیشترین تعداد کاربران بهدرستی کار میکنند.
جمع بندی
تگ datalist یکی از سادهترین اما قدرتمندترین قابلیتهای HTML5 برای ایجاد تجربه کاربری بهتر در فرمهاست. این تگ به کاربر اجازه میدهد در هنگام تایپ، پیشنهادهایی بر اساس مقادیر ازپیشتعریفشده دریافت کند؛ قابلیتی که بهویژه در فرمهای جستجو، ثبتنام یا ورود دادههای تکراری کاربرد زیادی دارد.
در بخشهای قبل دیدیم که datalist علاوهبر کاربردهای ساده، در سناریوهای پیشرفتهتری مثل اتصال به APIها، بهروزرسانی داینامیک با JavaScript و فرمهای دسترسپذیر حرفهای نیز قابل استفاده است. در کنار این مزایا باید محدودیتهایی همچون نبود امکان استایلدهی کامل، تفاوت رفتار در مرورگرها و ضعف در اعتبارسنجی دادهها را در نظر گرفت.
با رعایت Best Practiceها و شناخت دقیق محدودیتها، میتوان از <datalist> بهعنوان ابزاری سبک، مفید و کاربردی در فرمهای تعاملی وب بهره گرفت — بدون نیاز به کتابخانههای سنگین یا افزونههای پیچیده.
اگر میخواهید HTML و عناصر فرم را از پایه و در یک مسیر منظم یاد بگیرید، دوره مستر HTML میتواند قدم بعدی شما باشد.
سوالات متداول
<datalist> برای ارائه پیشنهادهای ورودی (suggestions) هنگام تایپ در فیلدهای فرم استفاده میشود. کاربر با شروع تایپ، لیستی از گزینههای ممکن را مشاهده میکند و میتواند یکی از آنها را انتخاب نماید یا مقدار جدیدی وارد کند.
<select> کاربر را محدود به گزینههای موجود میکند، اما در <datalist> کاربر میتواند مقدار دلخواه خود را نیز وارد کند. در واقع <datalist> برای پیشنهاد و کمک به تایپ سریعتر طراحی شده، نه برای انتخاب اجباری.
بله. شما میتوانید لیست <option>ها را با استفاده از JavaScript یا دادههای API بهروزرسانی کنید. این روش برای ایجاد پیشنهادهای هوشمند و پویا در فرمهای حرفهای بسیار مفید است.
بهصورت مستقیم خیر، اما از طریق JavaScript میتوانید دادههای دریافتی از API (JSON) را به تگ datalist تبدیل کنید. این کار امکان ساخت پیشنهادهای وابسته به دیتابیس یا سرویس آنلاین را فراهم میکند.
خیر، پشتیبانی مرورگرها از استایلدهی datalist محدود است. dropdown مربوطه توسط سیستمعامل و مرورگر رندر میشود، بنابراین تغییر رنگ یا ظاهر گزینهها معمولاً ممکن نیست.
در مرورگرهای مدرن موبایل بهخوبی پشتیبانی میشود، اما در بعضی نسخههای قدیمی یا مرورگرهای موبایل خاص (مانند برخی نسخههای Safari iOS) ممکن است رفتار متفاوتی داشته باشد. قبل از استفاده، تست UX توصیه میشود.
وقتی میخواهید ورودی کاربر را تسهیل کنید بدون محدود کردن انتخابها. مثلاً برای نام شهر، حرفه یا برند، که کاربر میتواند مقدار جدید نیز تایپ کند. در فرمهای راهنمایی یا جستجو، این روش ایدهآل است.
اغلب صفحهخوانهای مدرن ساختار <input> + <datalist> را بهدرستی تفسیر میکنند، اما برای اطمینان از دسترسپذیری کامل بهتر است فرم با ابزارهای Accessibility تست شود و از <label> مناسب استفاده گردد.