Datalist در HTML
درس قبل select انتخاب بسته از فهرست ثابت بود. datalist کار دیگری است: داخل input عادی تایپ می‌کنید و مرورگر پیشنهاد می‌دهد. می‌شود از فهرست برداشت یا چیزی نوشت که در فهرست نیست.
چرا datalist هست
جستجو، رنگ محبوب و شهر اغلب جواب رایج می‌خواهند بدون ممنوع‌کردن موارد نادر. select بسته خارج از فهرست را رد می‌کند؛ input خالی هیچ راهنمایی ندارد. datalist فاصله را پر می‌کند: پیشنهاد با تایپ آزاد. optionها پیشنهادند؛ input با list به فهرست اشاره می‌کند.
پاسخ مستقیم
۱) datalist با option value. ۲) روی input مقدار list برابر id. ۳) label و name روی input — خود datalist ارسال نمی‌شود. ۴) پیشنهاد یا متن سفارشی هر دو مجازند. ۵) وقتی باید فقط از فهرست باشد از select درس قبل استفاده کنید.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
دموی پیشنهاد مرورگر
فیلد Browser با پیشنهاد Firefox تا Safari. تایپ Brave هم کار می‌کند — فهرست آن را قفل نکرد.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
خواندن دموی مرورگر
- کنترل ارسالی input است نه datalist
- list باید با id جفت شود
- هر option value یک پیشنهاد است
- name کلید مقدار داخل input است
- label نام دسترس‌پذیر می‌دهد
- برخلاف select درس قبل، به چهار نام محدود نیستید
پیشنهاد شهر با datalist
قطعهٔ دوم شهر برای ارسال: پیشنهاد تهران و اصفهان و شیراز؛ می‌شود نام روستا هم تایپ کرد. با select بستهٔ درس قبل مقایسه کنید.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
خواندن دموی شهر
- همان الگوی label و name
- جفت list و id پیشنهاد را وصل می‌کند
- مقدار ارسالی متن input است
- autocomplete=off اختیاری برای کم‌کردن تداخل تاریخچه
- بعدی: accessibility گسترده‌تر
انتخاب datalist در برابر select و input
- باید فقط از مجموعهٔ ثابت: select
- پیشنهاد خوب است، متن آزاد هم: input + list + datalist
- بدون پیشنهاد: input ساده
- datalist جایگزین label یا name نیست
- datalist را داخل input نگذارید؛ با id لینک کنید
تمرین — وصل کردن پیشنهاد
- دموی مرورگر؛ option پنجم Opera
- عمداً id را اشتباه کنید تا پیشنهاد قطع شود؛ بعد درست کنید
- نام سفارشی خارج از فهرست تایپ کنید
- دموی شهر؛ مشهد را اضافه کنید
- همان شهرها را با select بسازید؛ یک جمله تفاوت ارسال
- جمله: datalist پیشنهاد می‌دهد؛ select محدود می‌کند
- نام‌گذاری دسترس‌پذیر در درس accessibility بعدی
اشتباهات آسان
- ناهماهنگی list و id
- انتظار رد شدن تایپ سفارشی (نزدیک به select)
- فراموش label
- فراموش name روی input
- گذاشتن name روی datalist
- option خالی بدون value
- مدل ذهنی فقط-select روی فیلد آزاد
خلاصه
- datalist + option value = پیشنهاد برای input
- جفت list و id
- تایپ خارج از فهرست مجاز است
- label و name روی input
- برای انتخاب بسته از select استفاده کنید
- بعدی: accessibility
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود