آموزش تگ datalist در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ datalist در HTML به صورت کامل آشنا بشید.

تگ datalist در HTML

کاربرد تگ datalist این است که با استفاده از آن میتوانیم یک لیست از مقادیر یا گزینه های از پیش نوشته شده را ایجاد کنیم.

به عنوان مثل میخواهیم یک لیست بسازیم که وقتی کاربر روی گزینه Input کلیک کرد. لیست مد نظر به وی نمایش داده شود. کاربر نیز بتواند گزینه دلخواه را از بین آیتم های آن انتخاب کند. به همین سادگی….

نحوه استفاده :

• ابتدا باید نام لیستمان را با استفاده از صفت List در درون تگ Input تعریف کنیم. سپس همین نام را در درون صفت Id در درون تگ datalist قرار دهیم.
• در  مرحله آخر با استفاده از تگ Option که در درون تگ datalist قرار دارد. میتونیم گزینه ها یا آیتم هایمان رو تعریف کنیم.

یک مثال برای تگ datalist در HTML

در ادامه دوره آموزشی HTML CSS پروژه محور به بررسی یک مثال از این تگ میپردازیم تا شما عزیزان درک بهتری از این تگ داشته باشید.

مثال اول : در این مثال ما یک لیست از مرورگرهای اینترنتی حال حاضر که کاربران سراسر جهان در حال استفاده از آن هستند، ایجاد کردیم. سپس به کاربران گفتیم مرورگر مورد علاقه خودتان را انتخاب کنید. اغلب برای نمایش لیست باید یک یا دو بار روی دکمه input کلیک شود.

<input list="browsers" name="browser"> 
  <datalist id="browsers">
    <option value="Google Chrome">
    <option value="Mozilla Firefox">
    <option value="Microsoft Edge">
    <option value="Opera">
    <option value="Safari">
  </datalist>

راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

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

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ datalist در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی تگ datalist از صفات و رویدادهای عمومی

تگ datalist قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

• توجه داشته باشید، اگر بخواهید تگ datalist و input را با هم متصل کنیم باید مقداری name با مقدار صفت id یکسان باشند.

دستورات پیش فرض CSS

اغلب مرورگرها تگ datalist را به شکل کد های CSS همچون دستورات زیر نمایش میدهند. شما عزیزان نیز میتوانید بدون هیچ گونه تغییری از این کد ها استفاده کنید.

datalist {
    display: none;
}