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. XnViewer管理浏览照片、图片

    有时候拍完照片想要浏览照片.浏览照片的时候想做一些标记,这个时候就需要使用照片管理器: 之前一直使用谷歌的picasa(不更新了),adobe也有个管理器(比较大):这里主要推荐一个: https:/ ...

  2. spark 机器学习 随机森林 实现(二)

    通过天气,温度,风速3个特征,建立随机森林,判断特征的优先级结果 天气 温度 风速结果(0否,1是)天气(0晴天,1阴天,2下雨)温度(0热,1舒适,2冷)风速(0没风,1微风,2大风)1 1:0 2 ...

  3. 用于并发系统建模和验证的着色Petri网及其工具软件的CPN Tools（笔记整理）

    1.着色Petri网(CPNS)是一种建模和验证系统的语言,在这些熊中并发性,交互性和同步性扮演着主要的角色,着色Petri网是一种功能编程语言Standard ML结合起来的离散时间建模语言,Pet ...

  4. python 执行系统命令模块比较

    python 执行系统命令模块比较 1.os.system模块 仅仅在子终端运行命令,返回状态码,0为成功,其他为失败,但是不返回执行结果 如果再命令行下执行,结果直接打印出来 >>> ...

  5. HQL基本语法及应用案例

    HQL基本语法及应用案例 摘自:<大数据技术体系详解:原理.架构与实践> 一.HQL基本语法 HQL是Hive提供的数据查询语言,由于Hive巨大的影响力,HQL已被越来越多的Hive O ...

  6. netty实现websocket发送文本和二进制数据

    原文:https://huan1993.iteye.com/blog/2433552 最近在学习netty相关的知识,看到netty可以实现 websoket,因此记录一下在netty中实现webso ...

  7. APS实现的要点与难点

    在前一篇关于文章中讨论了不同层级.粒度的生产计划,在各行业中受重视程度的差异问题. 承蒙大家热烈讨论.本文则在收集各方高见的基础上,对于供应链上各个环节的运营.生产计划再作稍微深入一点的探讨.本文将列 ...

  8. redis开发相关

    1.为什么要用缓存,缓存的使用场景2.redis数据存储类型 string/list/set/hash/sort set(zset)3.redis的常用数据类型,使用方式4.redis实现的跳跃表是什 ...

  9. C++面向对象程序设计第三章习题答案解析

    整理一下自己写的作业,供考试前复习用,哈哈 进入正题!!! 题目: 2.分析下面的程序,写出其运行时的输出结果 这里就不展示课本源代码,直接给出修改后的代码,错误部分代码已给出具体的注释 #inclu ...

  10. The 2018 ACM-ICPC CCPC 宁夏 A-Maximum Element In A Stack

    题意 对一个栈有入栈和出栈两种操作,求每次操作后栈的最大值的异或. 题目链接 分析 类似于单调栈,但是还没有那么复杂. 只需保持栈顶为最大值,如果入栈元素小于栈顶元素,则重复一次栈顶元素入栈:否则,直 ...