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. Django：Python3.6.2+Django2.0配置MySQL 转载

    Django默认使用的数据库是python自带的SQLlite3,但SQLlite并不适用于大型的项目,因此我将数据库换成了MySQL,下面介绍下Django如何配置数据库... 我使用的版本是:Py ...

  2. Delphi INI 文件读写

    delphi中,配置文件的相关操作. () INI文件的结构: ;这是关于INI文件的注释部分 [节点] 关键字=值 ... INI文件允许有多个节点,每个节点又允许有多个关键字, “=”后面是该关键 ...

  3. 【转】Anaconda安装与使用

    PS:这还是17年一次数据挖掘训练营使用的软件 [转至]https://blog.csdn.net/m0_37605642/article/details/98726766 安装和配置 1.在官网或清 ...

  4. Android笔记（四十五） Android中的数据存储——XML（一）DOM解析器

    DOM解析XML在j2ee开发中比较常见,在Dom解析的过程中,是先把dom全部文件读入到内存中,然后使用dom的api遍历所有数据,检索想要的数据,这种方式显然是一种比较消耗内存的方式,对于像手机这 ...

  5. 【HICP Gauss】数据库 升级迁移维护-2

    DM-Data Manager 集群管理web工具 数据库升级 1.检查版本 依次升级.升级前全备数据 2.磁盘空间不小于表预留空间 3. 确保数据库对包有一定权限 4.升级后正常启停 python ...

  6. onvirt安装linux系统

    情况说明: (1)本文接前文kvm虚拟化学习笔记(十九)之convirt集中管理平台搭建,采用convirt虚拟化平台安装linux操作系统的过程,这个过程中需要对convirt进行一系列的配置才能真 ...

  7. ARP欺骗之ettercap图形化界面

    ARP欺骗原理: 在每台主机中都有ARP缓存表,缓存表中记录了IP地址与MAC地址的对应关系,而局域网数据传输依靠的是MAC地址(网络设备之间互相通信是用MAC地址而不是IP地址) 一.ARP欺骗 工 ...

  8. Spring -13 -Spring 中常用注解总结

    1.@Component 创建类对象,相当于配置<bean/> 2.@Service 与@Component 功能相同. 2.1都写在ServiceImpl 类上. 3.@Reposito ...

  9. python关于字典嵌套字典，列表嵌套字典根据值进行排序

    python 对于字典嵌套字典, 列表嵌套字典排序 例:列表嵌套自字典:d = [{"name": '张三', 's': 68}, {'name': '李四', 's': 97}] ...

  10. C用malloc 向系统申请一个大小为n*4个字节的内存块

    #include <stdio.h> #include <malloc.h> void out(int *p, int n){ int i; for(i=0;i<n;i+ ...