（13）＜datalist＞标签

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

泽哥ins

5321人浏览 · 2021-11-19 10:19:18

泽哥ins · 2021-11-19 10:19:18 发布

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