عنصر datalist و کاربرد آن در html

عنصر datalist و کاربرد آن در html

برچسب datalist یک لیست از گزینه های از پیش تعریف شده برای عنصر input مشخص می کند. این برچسب برای ارائه “تکمیل خودکار” ویژگی در عنصر input استفاده میشود. کاربران یک لیست کشویی از گزینه های از پیش تعریف شده را به عنوان داده های ورودی مشاهده خواهند کرد.

خاصیت  list در عنصر input از طریق شناسه یا ID با datalist مرتبط است. برای مثال، اگر برچسب datalist شامل شناسه = “myData” باشد، مقدار خاصیت list نیز به صورت زیر خواهد شد :

list=”myData”

هر یک از گزینه های از پیش تعریف شدهبا استفاده از عنصر option در داخل عنصر datalist قرار میگیرد .

به مثال زیر توجه کنید :

عنصر datalist و کاربرد آن در html

عنصر datalist و کاربرد آن در html

تفاوت بین HTML 4.01 و HTML5

عنصر datalist یک تگ جدید در HTML5 است.

عنصر datalist و کاربرد آن در html

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

تگ datalist هیچ خاصیت ویژه ای ندارد .

خاصیت های عمومی

تگ datalist از خاصیت های عمومی HTML پشتیبانی میکند

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

خاصیت های رویداد

تگ  datalistاز خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

پشتیبانی از مرورگر ها

اعداد مشخص شده در جدول زیر ، اولین نسخه ی مرورگرهایی که به طور کامل از این عنصر پشتیبانی میکنند را مشخص میکند .

عنصر

گوگل کروماینترنت اکسپلوررفایرفاکسسافاریاپرا
<datalist>۲۰٫۰۱۰٫۰۴٫۰پشتیبانی نمی کند

۹٫۰

همانطور که در جدول سازگاری بالا دیده می شود، همه مرورگرها از تگ DataList در HTML5 پشتیبانی نمیکنند. اگر شما از DataList استفاده کنید ، مرورگر های قدیمی تر به سادگی برچسب DataList را نادیده می گیرند و کادری که شامل اطلاعات DataList است به صورت یک کادر ساده بدون اطلاعات از پیش تعریف شده باقی می ماند. برای جلوگیری از این مشکل ما می توانیم گزینه های موجود در DataList در برچسب select قرار دهیم. به عنوان مثال:

 

در صورتی که تکمیل خودکار در دسترس نباشد با این کار می توان به کاربر لیستی از گزینه ها را ارائه کرد.

به مثال زیر توجه کنید:

مرورگرهایی که از عنصر datalist پشتیبانی نمیکنند ، مثال بالا را به صورت زیر نمایش خواهند داد

عنصر datalist و کاربرد آن در html

عنصر datalist و کاربرد آن در html

در این روش به سادگی به کاربران اجازه وارد کردن نام یک کشور و یا انتخاب آن از لیست کشورها را خواهیم داد.

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *