《图解HTML练习》- 实现下拉选择不是只有select

简介: 《图解HTML练习》- 实现下拉选择不是只有select

## datalist标签

###### 定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

#### 示例

datalist标签,这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。

1.gif

贴上一段简短的代码:

```

<!DOCTYPE html>

<html>

<head lang="en">

   <meta charset="UTF-8">

   <title></title>

</head>

<body>

请输入姓名:<input type="text" list="li"/>

<datalist id="li">

   <option>

       张三

   </option>

   <option>

       李四

   </option>

   <option>

       王五

   </option>

</datalist>

</body>

</html>

```

#### Datalist的限制

当然,Datalist也有限制和不足之处,体现在:

* 不能使用CSS去随意控制或改变其下拉建议列表中的项

* 不能控制datalist的位置

*  不能控制每次当用户输入多少个字符后,就出现下拉建议列表

* 不能控制大小写敏感,或当匹配什么样的字符就出现下拉建议列表

* 不能将其与服务端的数据源绑定

目录
相关文章
|
8天前
|
前端开发
html编写登录页面练习
html编写登录页面练习
18 0
|
22天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
9月前
Html入门练习
Html入门练习
48 0
|
7月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
70 1
|
9月前
|
前端开发
html和css进阶小练习
html和css进阶小练习
|
12月前
|
数据安全/隐私保护
html表单专项练习
html表单专项练习
151 0
|
12月前
|
存储 前端开发 JavaScript
html 练习:展示一首古诗词
html 练习:展示一首古诗词
136 0
纯html的form表单实操练习
纯html的form表单实操练习
151 0
纯html的form表单实操练习
|
JavaScript 前端开发
HTML+CSS+JAVASCRIPT实现——球球坠落小游戏
本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分
249 0
HTML+CSS+JAVASCRIPT实现——球球坠落小游戏
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
本篇文章,主要讲解一下如何创建一个响应式登录注册表单
174 0
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单