فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

تگ datalist در HTML

ذهن انسان محدودیت نداره

کاربرد تگ datalist در HTML چیست ؟

تگ datalist مجموعه ای از عناصر گزینه را نشان می دهد که گزینه های از پیش تعریف شده برای سایر کنترل ها را نشان می دهد. و در این بخش نحوه و چگونگی برچسب <datalist> در HTML را شرح میدهیم.

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

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

به غیر از مواردی که مربوط به آنچه کاربر در آن لحظه می نویسد مرتبط است.

ترکیب عناصر datalist با option

با عنوان <datalist id = ""> </datalist> با هر تعداد برچسب <option> که بین برچسب های شروع و پایان درج شده است ، نوشته شده است. ویژگی شناسه تگ <datalist> را ارائه می دهد. به این شناسه می توان با برچسب (تگ) <input> که حاوی یک ویژگی لیست است ، اشاره کرد. ویژگی این لیست به ارزش نحوه تگ (برچسب) <datalist> در HTML اشاره می کند.

این مثال ها به نحوه تگ (برچسب) <datalist> در HTMLکمک شایانی میکند.

مثل این:

<input name="" list="myId">
<datalist id="myId">
	<option value="">
	<option value="">
</datalist>

مثال ها:

استفاده اولیه از تگ datalist
<label>
Who's your favorite cartoon character?
<input name="favCharacter" list="characters" maxlength="50">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Barney Rubble">
<option value="Fred Flinstone">
<option value="Peter Griffin">
</datalist>
</label>

نحوه پشتیبانی کردن مرورگر هایی که از تگ datalist پشتیبانی نمیکنند؟

برای ارائه پشتیبانی از مرورگرهایی که تگ datalist در HTML را پشتیبانی نمی کنند. کافیست یک تگ <select> را درون برچسب <datalist> قرار دهید.

<label>
Who's your favorite cartoon character?
<input name="favCharacter2" list="characters2" maxlength="50">
</label>
<datalist id="characters2">
<label>
or select from the list:
<select name="favCharacter2">
<option>Homer Simpson
<option>Bart
<option>Barney Rubble
<option>Fred Flinstone
<option>Peter Griffin
</select>
</label>
</datalist>

دیدگاه‌های نوشته