<datalist>ï¼HTML è³ææ¸å®åç´

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more browser support for this feature? Tell us why.

<datalist> HTML åç´ åå«ä¸çµ <option> åç´ ï¼éäºåç´ ä»£è¡¨å¶ä»æ§å¶é ä¸å¯é¸æçåè¨±ææ¨è¦é¸é ã

åè©¦ä¸ä¸

<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;
}

å±¬æ§

ç¯ä¾

ææ¬é¡å

å¨é¡åçº textãsearchãurlãtelãemail å number çæ§å¶é ä¸ï¼æ¨è¦çå¼å¨ç¨æ¶é»ææéææ§å¶é æé¡¯ç¤ºçºä¸æèå®ãéå¸¸ï¼æ§å¶é çå³å´ä¹ææä¸åæåé å®å¼åå¨çç®é ã

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="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

æ¥æåæéé¡å

é¡å monthãweekãdateãtime å datetime-local å¯ä»¥é¡¯ç¤ºä¸åçé¢ï¼æ¹ä¾¿ç¨æ¶é¸ææ¥æåæéãé å®å¼å¯ä»¥å¨é£è£¡é¡¯ç¤ºï¼åè¨±ç¨æ¶å¿«éå¡«å¯«æ§å¶é çå¼ã

html

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

ç¯åé¡å

html

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

é¡è²é¡å

html

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

å¯ç¢¼é¡å

html

<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

ç¡éç¤è°é¡

æ¸æåè¡¨é¸é çåé«å¤§å°ä¸ææ¾å¤§ï¼å§çµä¿æç¸åå¤§å°ãå¨ç¸®æ¾ææ¾å¤§å¶é¤å§å®¹æï¼èªåå»ºè°çå§å®¹ä¸æå¢å¤§ææ¸å°ã
ç±æ¼ä½¿ç¨ CSS å®ä½åè¡¨é¸é çè½åéå¸¸æéçè³ä¸åå¨ï¼å æ¤ç¡æ³çºé«å°æ¯åº¦æ¨¡å¼è¨ç½®æ¸²ææ¨£å¼ã
ä¸äºå±å¹é±è®å¨/çè¦½å¨çµåï¼åæ¬ NVDA å Firefoxï¼ä¸æå®£åèªåå»ºè°å½åºçªå£çå§å®¹ã

æè¡æè¦

å§å®¹é¡å	æµå§å®¹ãæ®µè½åå§å®¹ã
åè¨±çå§å®¹	æ®µè½åå§å®¹ï¼ææ¯é¶åæå¤å `<option>` åç´ ã
æ¨ç±¤çç¥	ä¸åè¨±ï¼éå§åçµææ¨ç±¤é½æ¯å¿é çã
åè¨±çç¶åç´	ä»»ä½æ¥åæ®µè½åå§å®¹çåç´ ã
é±å«ç ARIA è§è²	`listbox`
åè¨±ç ARIA è§è²	ä¸åè¨± `role`
DOM ä»é¢	`HTMLDataListElement`