html5的datalist元素详解

一、总结

一句话总结：

datalist元素配合input元素可以出现有提示选择作用的选框效果，还是相对比较简便好用的

1、optgroup元素是干嘛的？

optgroup元素用来对option元素进行组合分组
<select name="select" id="">

      <optgroup>

          <option value="HTML5">HTML5</option>

          <option value="CSS3">CSS3</option>

          <option value="JAVA">JAVA</option>

          <option value="JAVASCRIPT">JAVASCRIPT</option>

      </optgroup>

      <optgroup>

          <option value="HTML5">HTML5</option>

          <option value="CSS3">CSS3</option>

          <option value="JAVA">JAVA</option>

          <option value="JAVASCRIPT">JAVASCRIPT</option>

      </optgroup>

  </select>

2、datalist元素配合input元素 做选项框实例？

input元素要指定list属性的值为datalist的id
  <input type="text" name="datalist" list="mydatalist">

  <datalist id="mydatalist">

      <optgroup>

          <option value="HTML5">HTML5</option>

          <option value="CSS3">CSS3</option>

          <option value="JAVA">JAVA</option>

          <option value="JAVASCRIPT">JAVASCRIPT</option>

      </optgroup>

      <optgroup>

          <option value="HTML5">HTML5</option>

          <option value="CSS3">CSS3</option>

          <option value="JAVA">JAVA</option>

          <option value="JAVASCRIPT">JAVASCRIPT</option>

      </optgroup>

  </datalist>

二、html5--select与HTML5新增的datalist元素

学习要点

  • 掌握select元素与datalist元素的使用

select元素

    • 用来建立一个下拉菜单选项列表
    • 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
    • select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立
    • option元素可以用来建立一个选项，即下拉列表的一个菜单项
    • optgroup元素用来对option元素进行组合分组
  • size用来定义列表中显示的列表项
  • multiple属性用来定义是否可以多选
  • 可以添加disabled属性和autofocus属性

datalist元素

    • HTML5新增元素，用来建立一个选项列表
    • datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项
    • 通常与input元素配合使用

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

 <!--

         autofocus属性：自动获得焦点<br>

         accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点<br>

         tabindex属性：指定按Tab键时，项目间的移动顺序<br>

         autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能<br>

 -->

     </p>

     <form action="L3_01.html" method="get">

 <!--

         姓名：<input type="text" name="name" accesskey="n" tabindex="3" autocomplet="on"><br><br>

         密码：<input type="password" name="password" accesskey="p" autofocus="autofocus" tabindex="2" autocomplet="off"><br><br>

         电话：<input type="tel" name="tel" accesskey="t" tabindex="1" autocomplet="on"><br><br>

 -->

         <p2 style="color:#FF0000">这是select元素</p2><br>

         请选择你喜欢的课程：<select name="select" id="">

             <optgroup>

                 <option value="HTML5">HTML5</option>

                 <option value="CSS3">CSS3</option>

                 <option value="JAVA">JAVA</option>

                 <option value="JAVASCRIPT">JAVASCRIPT</option>

             </optgroup>

             <optgroup>

                 <option value="HTML5">HTML5</option>

                 <option value="CSS3">CSS3</option>

                 <option value="JAVA">JAVA</option>

                 <option value="JAVASCRIPT">JAVASCRIPT</option>

             </optgroup>

         </select><br><br>

         <p2 style="color:#FF0000">这是datalist元素</p2><br>

         <input type="text" name="datalist" list="mydatalist">

         <datalist id="mydatalist">

             <optgroup>

                 <option value="HTML5">HTML5</option>

                 <option value="CSS3">CSS3</option>

                 <option value="JAVA">JAVA</option>

                 <option value="JAVASCRIPT">JAVASCRIPT</option>

             </optgroup>

             <optgroup>

                 <option value="HTML5">HTML5</option>

                 <option value="CSS3">CSS3</option>

                 <option value="JAVA">JAVA</option>

                 <option value="JAVASCRIPT">JAVASCRIPT</option>

             </optgroup>

         </datalist>

         <br><input type="submit" value="确定"><br>

     </form>

 <body>

 </body>

 </html>
 

html5的datalist元素详解的更多相关文章

  1. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  2. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  3. html5中time元素详解

    html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...

  4. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  5. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  7. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  9. 史上最全web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...

随机推荐

  1. saleae逻辑分析仪-串口

    安装软件 下载:https://www.saleae.com 连线 逻辑分析仪CHx分别连接UART的rx和tx 配置Logic 选择串口 设置波特率 还可以自定义显示方式 打开串口助手 波特率和Lo ...

  2. js 数组 数组 最大值、最小值 算法（转载）

    一:https://www.cnblogs.com/zhouyangla/p/8482010.html 1.排序法 首先我们给数组进行排序,可以按照从小到大的顺序来排,排序之后的数组中第一个和最后一个 ...

  3. 无法将文件“E:\NetWorkPace\Permission\packages\EntityFramework.6.1.1\lib\net45\EntityFramework.xml”复制到“bin\EntityFramework.xml”。对路径“bin\EntityFramework.xml”的访问被拒绝。

    无法将文件“E:\NetWorkPace\Permission\packages\EntityFramework.6.1.1\lib\net45\EntityFramework.xml”复制到“bin ...

  4. Python3正则匹配re.split，re.finditer及re.findall函数用法详解

    这篇文章主要介绍了Python3正则匹配re.split,re.finditer及re.findall函数用法,结合实例形式详细分析了正则匹配re.split,re.finditer及re.finda ...

  5. 运维开发笔记整理-Django模型语法

    运维开发笔记整理-Django模型语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模型基本概念 1>.什么是模型 模型是你的数据唯一的,权威的信息源.它包含你所存储数 ...

  6. Python工程目录组织

    Python工程目录组织 from: https://zhuanlan.zhihu.com/p/36221226 Python工程目录组织 关于如何组织一个较好的Python工程目录结构,已经有一些得 ...

  7. 29.LINQ初探

    本页内容: 1.LINQ查询语言的组成部分: 2.使用LINQ方法语法: 3.排序查询结果 orderby 字句: 4.聚合运算符: 5.查询复杂对象: 6.投影:在查询中创建新对象: 7.Disti ...

  8. P1772 [ZJOI2006]物流运输[DP+最短路]

    题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格的管理和跟踪. ...

  9. sitemap怎么制作才适合蜘蛛抓取？

    网站sitemap制作格式与要求 1.sitemap格式说明 <?xml version="1.0" encoding="utf-8"?> < ...

  10. PL/sql配置相关

    可以安装oracle之后,打开PL/sql之后,自动找到oracle的路径以及数据库连接.   或者:安装oracle客户端,手动在PL/sql中配置oic以及oracle主目录的位置,并且配置好C: ...