آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

تعدادی تگ HTML5 که ممکنه بلد نباشید (جلسه آخر) : تگ datalist

0 320 ۴ بهمن ۹۵

در این جلسه با ادامه تعدادی تگ HTML5 که ممکنه بلد نباشید در خدمتتون هستیم.html5 tags

Option های از پیش تعریف شده با تگ datalist

یکی از چیزهایی خوبی که در مورد المنت select در مقابل المنتهای radio و checkbox وجود داره اینه که این المنت کاربران رو مجبور و محدود میکنه که یک سری از موارد از پیش تعریف شده رو انتخاب کنن.

حالا شما میتونین با استفاده از تگ datalist لیستی از انتخابهای معتبر رو برای کاربران تعریف کنید و اونا رو به یک input نسبت بدین و اون رو شبیه به المنت select کنید. این ویژگی در مرورگرهای مختلف بصورت متفاوت نمایش داده میشه و نحوه عملکرد کلی به این صورت هست که یک فلش drop-down در سمت راست input قرار میگیره و کاربران با دیدن اون متوجه میشن که این input، موارد از پیش تعریف شده ای رو قرار داده. مثلا در مرورگر Chrome بصورت زیر هست:input datalist

همونطور که در تصویر بالا هم میبینید زمانی که بر روی این فلش کلیک میشه، یک لیست شامل موارد از پیش تعریف شده باز میشه و شما میتونین یکی از اونا رو انتخاب کنید. علاوه بر اینکار شما میتونین متنی رو درون input وارد کنید و مرورگر بصورت اتوماتیک درون لیست میگرده و اون مواردی که match هستن رو پیدا میکنه و به شما نشون میده و میتونین اونا رو انتخاب کنید. مثلا در بالا اگر حرف g رو تایپ کنیم، مورد مربوط به Google نمایش داده میشه و سریعا میتونیم اون رو انتخاب کنیم.

مثال عملی و کاربردی:

اگر شما قصد داشته باشید که یک لیست از URL رو بسازید و کاربران بتونن یکی از اونا رو انتخاب کنن، میتونین یک datalist بسازید و اون رو به یک input نسبت بدین. کدهای زیر رو در نظر بگیرید:

با اینکار میتونین محدوده اطلاعات رو محدودتر کنید و کار رو برای کاربران ساده تر کنید. همونطور که دیدید برای تگ datalist یک id = site-list قرار دادیم و اون رو برای ویژگی list مربوط به المنت input نسبت دادیم. خروجی کد بالا بصورت زیر هست:

نکات و ملاحظات:

خود المنت datalist بصورت اتوماتیک اعتبارسنجی رو بر پایه ویژگی type مربوط به المنت input انجام میده. برای مثال اگر شما برای المنت input، ویژگی type رو برابر با email قرار بدین و لیستی از موارد از پیش تعریف شده رو با استفاده از تگ datalist به اون نسبت بدین، datalist بصورت اتوماتیک اعتبارسنجی رو انجام میده. datalist چک میکنه که لیستی که برای اون تعریف کردید همگی email هستن یا خیر. اگر email بودن که اونا رو در اختیار input قرار میده ولی اگر email معتبر نبودن، اونا رو از فیلتر خودش عبور نمیده و اصلا مثل این میمونه که ما datalist رو به input نسبت نداده ایم.

پشتیبانی مرورگرها به نسبت از این ویژگی خوب هست. مرورگر Apple که کلا این ویژگی رو پشتیبانی نمیکنه، چه بر روی Desktop و چه بر روی Mobile. مرورگر IE10 به بالا هم این مورد رو پشتیبانی میکنه.

بهمین راحتی. در این سری آموزشی 8 تگ HTML رو بهتر براتون روشن سازی کردیم تا بتونین به درستی از اونا استفاده کنید.

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

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram