HTML <datalist> 選項列表
<datalist>標籤通常與<input>標籤配合使用,HTML5新增。
大家知道所有新功能的出現都是由需求推動的,各行各業都是如此。
首先介紹一下<datalist>出現的現實需求。
特別說明:下面僅以input 文字框為例子,其實它還可以用於其他控制元件。
看如下程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform"> <select name="sel"> <option value="1">螞蟻部落一</option> <option value="2">螞蟻部落二</option> <option value="3">螞蟻部落三</option> <option value="4">螞蟻部落四</option> </select> </form> </body> </html>
上面是一個簡單的select下拉選單,執行截圖如下:
select下拉選單可以預定義幾個選擇項。
能夠在有限的空間內給使用者提供多種選擇機會。
但是它也有一個問題,那就是不夠靈活,選擇項是固定的,有限的選擇項難以涵蓋使用者的所有需求。
尤其是網站無法預估使用者所有需求,所以需要一個更加靈活的解決方案。
<datalist>標籤能夠很好的滿足此需求,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form action="do.php" name="myform"> <input type="text" name="txt" list="softwhy"> <datalist id="softwhy"> <option value="螞蟻部落" /> <option value="css教程" /> <option value="div教程" /> <option value="softwhy.com" /> </datalist> </form> </body> </html>
程式碼執行效果截圖如下:
程式碼分析如下:
(1).將input元素的list屬性值設定為datalist的id屬性值,即可將兩者關聯起來。
(2).datalist可以預定義input元素的可能的value值。
(3).那麼文字框不但具有了select預定義效果,也可以自己輸入,功能更加強大。
特別說明:兩者關聯後,可以具有篩選功能,截圖如下:
在文字框輸入"教程"後,下拉選單會被篩選出具有"教程"兩個關鍵字的選項。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form action="do.php" name="myform"> <input type="text" name="txt" list="softwhy"> <datalist id="softwhy"> <option label="anzone" value="螞蟻部落" /> <option label="css" value="css教程" /> <option label="div" value="div教程" /> <option label="url" value="softwhy.com" /> </datalist> </form> </body> </html>
可以給<option>項新增label標籤,用於對選項的值進行說明。
程式碼執行效果截圖如下:
label屬性規定的值顯示在value值的後面,用於對其加以說明。
相關文章
- HTML datalist 選項列表HTML
- html5 datalist自動完成HTML
- php curl選項列表(超詳細)PHP
- HTML————12、HTML列表HTML
- HTML列表HTML
- HTML5 <datalist>標籤用法簡答介紹HTML
- HTML速查列表HTML
- HTML之列表HTML
- JN專案-查詢的下拉選項只應顯示列表中存在的選項
- HTML 列表簡介HTML
- html列表標籤HTML
- html定義列表HTML
- Datalist巢狀巢狀
- HTML <ol> 有序列表HTML
- HTML <ul> 無序列表HTML
- HTML 速查列表簡介HTML
- HTML列表是什麼?HTML
- PHP+Ajax點選載入更多列表資料例項PHP
- HTML的ul無序列表HTML
- HTML5 標籤列表HTML
- 【HTML】02有序無序列表HTML
- jq+css+html打造下拉導航選單例項CSSHTML單例
- SharePoint REST API - 列表和列表項RESTAPI
- vue 列表渲染例項Vue
- 3890.23匯出→SiteBrain HTML,01檔案, 8快捷鍵,15首選項,5選項,T3選單欄AIHTML
- 巢狀使用 datalist (轉)巢狀
- DataList.ItemCommand 事件事件
- uniapp列表多選APP
- HTML datalist瞭解一下,使用它建立自動完成輸入女神小例子HTML
- CSS 列表項佈局技巧CSS
- 常用HTML標籤2:表格和列表HTML
- HTML標記語法之列表元素HTML
- c# listbox可顯示多個子項的列表控制元件(可單多選子項)C#控制元件
- QTP恢復場景-處理找不到列表項或選單的情況QT
- html - 下拉選單HTML
- 觀察下面的選項,選出正確的選項。
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- 基於 HTML5 Canvas 的屬性值點選出現多選項的製作HTMLCanvas