位置:首頁 > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

HTML 列表<datalist>

提問人:劉團圓發(fā)布時間:2020-11-11

<datalist>雖然也可以生成列表,但是不能獨立使用這個表單。<datalist>標記必須和一個可輸入文本框類型一起配合使用。

基本語法:

<input type="text"list="要綁定的datalist的id"name="名稱"/>

     <datalist id=列表 id>

          <option label="列表項的說明1"value="列表項的值1"/>

               ......

          <option label="列表項的說明n"value="列表項的值n"/>

     </datalist>

語法說明:

<input>文本框表單要和下面的<datalist>一起搭配使用,所以<input>的list屬性要設定為<datalist>的id值;

<datalist></datalist>標記只用來標記列表的區(qū)域范圍;

<option>標記的作用是生成列表中的每一項,<option>標記的label屬性設置列表項的標記,<option>標記的value屬性設定列表項的取值。

在設置option元素時,必須設置value屬性,而label屬性則可以省略。

本例是使用<datalist>列表,當用戶在文本框準備輸入時,輸入表單下面就會顯示出列表供用戶參考。

代碼如下:

<!DOCTYPE html>

<html>

<head>

<title>列表</title>

</head>

<body>

<form>

Webpage: <input type="url" list="url_list" name="link"/>

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn"/>

<option label="Google" value="http://www.google.com"/>

<option label="Microsoft" value="http://www.microsoft.com"/>

</datalist>

</form>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案?

相關視頻回答
回復(0)
返回頂部