傑立資訊事業有限公司
電話：(02)2739-9096 | 傳真：(02)2739-6637 | 客服：[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策
标签定义及使用说明
datalist标签规定了 input 元素可能的选项列表, 被用来在为 input元素提供”自动完成”的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户点击输入的待选数据。
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php" method="get">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>
对比select标签示例:
<form action="demo-form.php" method="get">
<select>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox" selected>Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select><input type="submit">
</form>
不难看出:
1. 代码结构上, 通常二者均包含在form标签内, 但datalist上方需要关联input输入框, select则不需要; select的option标签是成对出现的, 且待选值夹在标签对中, datalist则是直接使用自闭合的option标签, option value直接指定待选值, 另外, select中option标签可以添加属性selected表示默认选中, datalist不具备这个特性;
2. 实际功能上, datalist可谓更强大, 可以看作是输入框和下拉框的结合体, 可以在框内输入字符(输入时下拉框具备联想筛选功能), 也可以直接从下拉框中选择预设选项, 使用很方便, 用户体验也更棒 ……
以上便是本人对datalist学习时的简单总结, 欢迎讨论及补充
精選專案.網頁設計.RWD響應式網站.活動網站 / 醫療衛生類
網站技術：PHP . Javascript/MySql
你能相信每天上傳測量資料就可以獲得點數嗎? 搭配歐姆龍的血壓計或體脂計每日測量，在APP更新紀錄就可以獲得點數，可以透過點數兌換商品或是抽獎。
網頁設計.RWD響應式網站 / 美容保養類
網站技術：PHP . Javascript/MySql
長松從吃的到用的，像是身體保健、眼睛保護、口腔清潔.....等等。每一項商品都是經過許多評估與檢測，才會上架在官網平台。讓會員在官網可以安心的購買與使用。
精選專案.網頁設計.RWD響應式網站 / 教育人文類
網站技術：PHP . Javascript/MySql
當提到英文廣播就會想到ICRT，配合生動有趣的主持人，馬上吸引各群族的聽眾。ICRT非常具有教育，長時間收聽是可以增進聽力與口說的喔。 目前可透過PC版與APP版來作收聽ICRT，操作簡易不困難。
傑立資訊事業有限公司
電話：(02)2739-9096 | 傳真：(02)2739-6637 | 客服：[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策
線