iT邦幫忙

DAY 6
1

HTML5 & CSS3系列 第 6

30天分享(8) - HTML5 <datalist> 標籤

<datalist> 是表單元素裡的下拉式選單,功能跟 <select> 大致上相似,
都是給使用者一個下拉式的選單,可以對選項作選擇,
兩者也都只是個容器,需要在標籤內加入 <option> 標籤並輸入值,
不過 <datalist> 的使用方式有一點不同。

<select> 的使用方式 :

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

<datalist> 的使用方式 :

<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

如果未加 <input>,<datalist> 是會隱藏的,
所以請記得加上。

使用 <datalist> 的好處是,
只要在 <input> 裡輸入對應的字元,
瀏覽器會幫你選好 <option> 裡含有你輸入字元的選項,
這在當資料筆數很多,像是選擇地區時可以提升使用者體驗,
方便使用者外速找到對應的選項。


上一篇
30天分享(7) - HTML5 <object> & <embed> 標籤
下一篇
30天分享(9) - HTML5 <details> & <dialog> 標籤
系列文
HTML5 & CSS328

1 則留言

我要留言

立即登入留言