（13）＜datalist＞标签

最新推荐文章于 2024-10-11 07:30:00 发布

泽哥ins

最新推荐文章于 2024-10-11 07:30:00 发布

阅读量5.5k

点赞数 5

分类专栏： HTML5 文章标签： html 前端 html5

本文链接：https://blog.csdn.net/qq_36213140/article/details/121416283

版权

HTML5 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、<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>