<datalist> 标签

简介: <datalist> 标签

一、<datalist>标签的作用

1. <datalist> 标签规定了<input> 元素可能的选项列表。

2. <datalist>元素包含了一组<option>元素,这些元素表示预定义可选值,在<input>元素输入过程中,会自动响应<option>元素的值。

3. 绑定的<input>标签必须设置list 属性,属性值等于<datalist>标签的id 属性值。

二、<datalist>标签演示案例

1.<datalist>标签未绑定效果:

如上图运行效果我们看到,我们在<datalist>标签中书写了<option>选项,但是并没有和<input>进行关联起来,还是普通的<input>。

2.<datalist>标签绑定后的效果(1):

阿福的工作室制作

相关文章
|
6月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
1月前
datalist元素
datalist元素
17 3
|
3月前
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
6月前
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
559 1
|
6月前
|
UED
datalist是什么,有什么作用?
datalist是什么,有什么作用?
65 0
|
存储 前端开发 JavaScript
datalist用法?是什么?
datalist用法?是什么?
|
XML Java 数据格式
自定义foreach标签&&select标签
自定义foreach标签&&select标签
|
Java 开发者
remove标签 | 学习笔记
快速学习remove标签
120 0
remove标签 | 学习笔记
|
JSON 数据格式 开发者
EasyUI–下拉列表datalist详解
本篇主要介绍下拉列表控件的数据绑定和下拉列表选中项的获取。
1027 0
EasyUI–下拉列表datalist详解