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. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  2. jenkins-harbor迁移(问题记录)

    读者们原谅,可能有点没头没尾,根据公司情况具体写的 需求:jenkins和harbor迁移另一台物理机 jenkins和harbor都迁移的情况,之前一直都是使用的是harbor的域名 我也在新的je ...

  3. git学习记录--标签随笔

    创建标签: 命令git tag <name>用于新建一个标签,默认为HEAD,也可以指定一个commit id: git tag -a <tagname> -m "b ...

  4. Centos7安装autoconf

    一.原因 安装此插件的原因:在初始化MySQL数据库时出现提示FATAL ERROR: please install the following Perl modules before executi ...

  5. PHP-5.6.8 源码包编译安装

    一.下载源码包后,进行解压 [root@www home]# .tar.bz2 gzip: stdin: not in gzip format tar: Error is not recoverabl ...

  6. 【转】spring bean 卸载

    spring bean 卸载起因: 群里的一个朋友问到: 关于配置destory-method, springboot中 yml如何指定 首先介绍 bean卸载的三种形式 自定义destory-met ...

  7. Systemweaver — 电子电气协同设计研发平台

            当前电子电气系统随着功能安全.AutoSAR.车联网.智能驾驶等新要求,导致其复杂性.关联性日益上升.当前,传统基于文档的设计由于其低复用性.无关联性.无协同性等缺点,已经无法适应日益 ...

  8. linux系统编程综合练习-实现一个小型的shell程序(一)

    之前已经花了不少篇幅学习了linux系统编程的很多知识点:文件与io.进程.信号.管道,而零散的知识点,怎么能够综合的串接起来是学习的一个很重要的目的,当然最好的方式就是用所学的知识点做一个项目了,所 ...

  9. 开发搭建环境之springboot配置logback日志管理

    首先书写logback-spring.xml文件为: <?xml version="1.0" encoding="UTF-8"?><confi ...

  10. 再论strlen sizeof

    今天,在使用字符串的时候,对sizeof和strlen的用法更加深入了,特此记录下. strlen是运行是计算的,不能放在函数外面计算的sizeof是预编译时运行的,可以放在函数外面计算. 对于cha ...