简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

HTML5中的Datalist元素標籤怎麼用

藏色散人
發布： 2018-12-05 09:43:37
原創
5603 人瀏覽過



標籤是 HTML 5 中的新標籤，此元素在表單中用於從使用者中接收數據，它可以顯示供用戶選擇的選項。

HTML5中的Datalist元素標籤怎麼用

推薦學習：《HTML5教學》

下面我們就透過具體的程式碼範例給大家介紹。 

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Datalist元素使用示例</title>
</head>
<body>
<input name="section" list="scripts" />
<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="java" />
    <option value="Go" />
    <option value="python" />
    <option value="c++" />
</datalist>
</body>
</html>
登入後複製

效果如下圖：

HTML5中的Datalist元素標籤怎麼用

它具有自動完成功能，可協助使用者在文字方塊中輸入內容，與下拉列錶框或單選按鈕不同，使用者可以編寫任何文字而不限制由datalist給出的選項。 Datalist透過輸入元素列表屬性綁定（或連結）。

附註：

標籤定義選項清單。與 input 元素搭配使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它只是合法的輸入值清單。需使用 input 元素的 list 屬性來綁定 datalist。

這篇文章就是關於HTML5中的Datalist元素的用法介紹，簡單易懂，希望對需要的朋友有幫助！

以上是HTML5中的Datalist元素標籤怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
Datalist元素
來源：php.cn
上一篇：html5是什麼意思 下一篇：如何使用HTML5 canvas繪製文字
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
無法從網站取得輸入元素 所以我試圖從Twitter獲取一個輸入元素，但當我運行它時，它不斷在節點終端中給我一個這樣的錯誤，結果，由此代碼創建的瀏覽器窗口將自行關閉，因為它找不到正確的輸入選擇器。如何取得正...
來自於 2024-04-06 18:59:57
0
1
442
用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...
來自於 2024-04-06 17:40:41
0
2
410
React子元素無效（發現：具有鍵{clientVersion}的物件）。如果您想渲染一個子元素集合，請使用數組代替 我有一個多步驟表單，當我嘗試提交時會顯示此錯誤。但是，如果我以簡單的形式使用createOrganization調度，它就會起作用。是後端問題還是前端問題？我可能做錯了什麼？我希望...
來自於 2024-04-06 16:25:39
0
1
346
供應商特定偽元素上的 JavaScript 懸停事件 我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！