تگ <datalist></datalist> در html

نمونه کد

یک نمونه ساده از تگ <datalist>:

<form>
	<datalist id="browsers">
</form>

 
<form>
    <datalist id="browsers">
</form>

آزمایشگاه

تعریف و کاربرد

تگ <datalist> برای ساخت یک لیست از پیش تعریف شده برای تگ های <input> استفاده می شود.

<datalist> ها از قابلیت autocomplete استفاده می کنند. لیست ایجاد شده به صورت کشویی نمایش داده می شود.

برای مشخص کردن مقادیر لیست، از تگ <option> با ویژگی value استفاده می شود.

<option value="first value">

 
<option value="first value">

برای اتصال <datalist> به <input> باید:

در تگ <datalist> ویژگی id را اضافه کرده و برای آن اسمی می گذاریم.
در تگ <input> ویژگی list را اضافه کرده و اسم لیست مورد نظر را در آن وارد می کنیم.

<input list="ages" name="age">

<datalist id="ages">
     <option value="7-12">
     <option value="12-18">
     <option value="18-30">
     <option value="30-40">
     <option value="+40">
</datalist>

​x
 
<input list="ages" name="age">
​
<datalist id="ages">
     <option value="7-12">
     <option value="12-18">
     <option value="18-30">
     <option value="30-40">
     <option value="+40">
</datalist>

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<datalist>

ویژگی های سراسری

تگ <datalist> از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ <datalist> از ویژگی های رویداد HTML پشتیبانی می کند.

استایل css پیش فرض

بیشتر مرورگر ها تگ <datalist> را با استایل پیشفرض زیر نمایش می دهند:

datalist {
	display: none;
}

 
datalist {
    display: none;
}

تگ <datalist> در HTML <datalist></datalist> tag HTML