（13）＜datalist＞标签

一、<datalist>标签的作用

<datalist> 标签规定了<input> 元素可能的选项列表。
<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
绑定的<input>标签必须设置list 属性，属性值等于<datalist>标签的id 属性值。

二、<datalist>标签演示案例

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text"></form><datalist><option value="北京市">bj</option><option value="广州市">gz</option><option value="深圳市">sz</option></datalist>
</body>
</html>

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

2.<datalist>标签绑定后的效果（1）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text" list="city-list"></form><datalist id="city-list"><option value="北京市">bj</option><option value="广州市">gz</option><option value="深圳市">sz</option></datalist>
</body>
</html>

如上图演示，我们看到通过<datalist>标签的id属性和<input>标签的list属性进行绑定，二者就关联起来啦。

3.<datalist>标签绑定后的效果（2）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text" list="city-list"></form><datalist id="city-list"><option value="北京市"><option value="广州市"><option value="深圳市"></datalist>
</body>
</html>

如上图演示我们看到，<datalist>标签中的<option>标签支持但标签书写，展示的效果如上图所示。

（13）＜datalist＞标签相关推荐

php中 datalist,html5 datalist标签的用法是什么？这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧我们先来看 ...
datalist标签
学习笔记,仅供参考,有错必纠参考自:w3school 关于datalist标签 <datalist> 标签定义选项列表,应该与 <input>标签配合使用该,它定义 inpu ...
课时47.datalist标签（了解）
1.datalist标签作用:给输入框绑定待选项 2.datalist格式: <datalist> <option>待选项内容</option> </dat ...
HTML前端开发入门之表单标签/labei标签/datalist标签
##表单标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
13.表格标签及其应用实例
表格标签及其应用实例
HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
python——前端常用的标签
1.meat标签 meta标签的使用meta标签共有两个属性:http-equiv和name;不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能.name属性 name属性主要用于描述 ...
第四节：HTML5给表单带来的新标签、新属性、新类型
上一章节讲了21个语义化的标签,这一节我们来讲表单标签,HTML5不仅仅给表单带来了新的标签,还给原来的标签带来了新的属性,这一节我们会来介绍介绍它们. 到目前为止,我们对HTML5的学习还是停留在新 ...
audio标签的controls属性_HTML5 新增标签和属性
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...

（13）＜datalist＞标签

一、<datalist>标签的作用

二、<datalist>标签演示案例

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

2.<datalist>标签绑定后的效果（1）：

3.<datalist>标签绑定后的效果（2）：

（13）＜datalist＞标签相关推荐

最新文章

热门文章

（13）＜datalist＞ 标签

一、<datalist>标签的作用

二、<datalist>标签演示案例

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

2.<datalist>标签绑定后的效果（1）：

3.<datalist>标签绑定后的效果（2）：

（13）＜datalist＞ 标签相关推荐

最新文章

热门文章

（13）＜datalist＞标签

（13）＜datalist＞标签相关推荐