<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):

阿福的工作室制作

相关文章
|
4月前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
142 1
|
4月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
前端开发
element ui el-table 多选 表头全选框替换文字
element ui el-table 多选 表头全选框替换文字
1600 0
|
1月前
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
4月前
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
239 1
|
4月前
|
UED
datalist是什么,有什么作用?
datalist是什么,有什么作用?
41 0
|
4月前
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
|
10月前
|
存储 前端开发 JavaScript
datalist用法?是什么?
datalist用法?是什么?
|
11月前
|
XML Java 数据格式
自定义foreach标签&&select标签
自定义foreach标签&&select标签