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. c#读写apk的 comment

    写入: ZipFile zipFile = new ZipFile("C:\\Users\\Administrator\\Desktop\\2.apk"); zipFile.Beg ...

  2. Android笔记（四十六） Android中的数据存储——XML（二）PULL解析

    PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser．nextText()从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDo ...

  3. c# 字符串修改

  4. k8s 应用优先级，驱逐，波动，动态资源调整

    k8s 应用优先级,驱逐,波动,动态资源调整 应用优先级 Requests 和 Limits 的配置除了表明资源情况和限制资源使用之外,还有一个隐藏的作用:它决定了 Pod 的 QoS 等级. 上一节 ...

  5. sqlserver 排序

    sqlserver中有几种排序的方式 1.order by asc||desc  [默认值升序(asc).降序:desc] 列:select * from tb order by id 2.ROW_N ...

  6. 【转】spring 自定义注解（annotation）与 aop获取注解

    首先我们先介绍Java自定义注解. 在开发过程中,我们实现接口的时候,会出现@Override,有时还会提示写@SuppressWarnings.其实这个就是Java特有的特性,注解. 注解就是某种注 ...

  7. 51nod 1396 还是01串

    给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...

  8. 4.Linq to Xml

    目录 1.Linq to Xml函数构造方法 2.创建包含文本节点的Xml文档 3.保存和加载Xml 4.处理Xml片段 5.从数据库中生成XML 1.Linq to Xml函数构造方法 Linq t ...

  9. zmq使用记录

    zmq套接字介绍 https://www.cnblogs.com/fengbohello/p/4354989.html zmq示例 https://github.com/booksbyus/zguid ...

  10. C++类分号（;）问题

    环境:vs2010 问题:今天编代码过程中发现好多很奇怪的错误,我以为昨天调了下编译器才出问题了.搞了好久,代码注释掉很多还是不行,并且错误还一直在变化.问题大概如下: (照片上传不了) .error ...