<datalist>
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
HTML-ÑÐ»ÐµÐ¼ÐµÐ½Ñ <datalist> ÑодеÑÐ¶Ð¸Ñ Ð½Ð°Ð±Ð¾Ñ Ð¾Ð¿Ñий (<option>), доÑÑÑпнÑÑ
Ð´Ð»Ñ Ð²ÑбоÑа. ÐÑбÑанное знаÑение бÑÐ´ÐµÑ ÑÑÑановлено Ð´Ð»Ñ ÑлеменÑа <input>, Ñ Ð°ÑÑибÑÑом list.
ÐнÑеÑакÑивнÑй пÑимеÑ
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
| ÐаÑегоÑÐ¸Ñ ÐºÐ¾Ð½ÑенÑа | ÐоÑоковÑй конÑенÑ, ÑÑазовÑй конÑенÑ. |
|---|---|
| ÐопÑÑÑимое ÑодеÑжимое | Ðибо ÑÑазовÑй конÑенÑ, либо Ð½Ð¾Ð»Ñ Ð¸Ð»Ð¸ более ÑлеменÑов <option>. |
| ÐÑопÑÑк Ñегов | ÐеÑ, оÑкÑÑваÑÑий и закÑÑваÑÑий Ñеги обÑзаÑелÑнÑ. |
| ÐопÑÑÑимÑе ÑодиÑели | ÐÑбой ÑлеменÑ, коÑоÑÑй Ð¼Ð¾Ð¶ÐµÑ ÑодеÑжаÑÑ ÑÑазовÑй конÑенÑ. |
| ÐопÑÑÑимÑе ARIA-Ñоли | ÐÐµÑ |
| DOM-инÑеÑÑÐµÐ¹Ñ | HTMLDataListElement |
ÐÑÑибÑÑÑ
С даннÑм ÑлеменÑом можно иÑполÑзоваÑÑ Ð²Ñе глобалÑнÑе аÑÑибÑÑÑ.
ÐÑимеÑÑ
html
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # the-datalist-element |
СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами
ÐолиÑил
ÐÐ»Ñ Ð¸ÑполÑзованиÑÑ Ð² бÑаÑзеÑÐ°Ñ , коÑоÑÑе не поддеÑживаÑÑ Ð´Ð°Ð½Ð½ÑÑ ÑÐµÑ Ð½Ð¾Ð»Ð¾Ð³Ð¸Ñ, ÑекомендÑеÑÑÑ Ð¸ÑполÑзоваÑÑ Ð¿Ð¾Ð»Ð¸Ñил: datalist-polyfill.