3-5. dalist标签

作者: 一Left一 | 来源:发表于2017-11-09 21:47 被阅读5次

1、<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
作用: 给输入框绑定待选项

2、datalist格式:

<datalist>
    <option>待选项内容</option>
</datalist>

3、如何给输入框绑定待选列表

  • 搞一个输入框
  • 搞一个datalist列表
  • 给datalist列表标签添加一个id
  • 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
<body>
<!--
datalist: 是为了给输入框提供一些带选项,也是一个复合标签
格式:
    <datalist>
        <option >美国</option>
        <option >中国</option>
        <option >泰国</option>
    </datalist>
注意:
    1. 输入框
    2. datalist
    3. 相互绑定: 输入框要有一个属性list=datalist的id值
    4. 虽然可以在带选项中进行选择,但是依然可以自己输入不同的数据
-->
<form action="">
    请输入你的国籍: <input type="text" list="country">

    <datalist id="country">
        <option >美国</option>
        <option >中国</option>
        <option >泰国</option>
    </datalist>
</form>
</body>
图片.png

http://www.w3school.com.cn/tags/tag_datalist.asp

相关文章

网友评论

    本文标题:3-5. dalist标签

    本文链接:https://www.haomeiwen.com/subject/phgmmxtx.html