《图解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的位置

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

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

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

目录
相关文章
|
5月前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
5月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
65 0
|
6月前
|
前端开发
html编写登录页面练习
html编写登录页面练习
53 0
|
6月前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
140 1
|
前端开发
html和css进阶小练习
html和css进阶小练习
|
数据安全/隐私保护
html表单专项练习
html表单专项练习
205 0
|
存储 前端开发 JavaScript
html 练习:展示一首古诗词
html 练习:展示一首古诗词
245 0
|
JavaScript
【Node.js练习】根据不同的url响应不同的html内容
【Node.js练习】根据不同的url响应不同的html内容
109 1
【Node.js练习】根据不同的url响应不同的html内容