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--select与HTML5新增的datalist元素的更多相关文章

  1. HTML5中form的新增属性或元素

    1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...

  2. html5表单及新增的改良元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. html5的datalist元素详解

    html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...

  4. HTML5系列：HTML5与HTML4的区别

    1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...

  5. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  6. 利用HTML5 的Datalist 元素实现输入提示

    HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷. 今天看到datalist 这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件 ...

  7. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  8. html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  9. HTML5新增的结构元素

    HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...

随机推荐

  1. 椭圆人头跟踪bmp图像序列 BMP Image Sequences for Elliptical Head Tracking

    BMP Image Sequences for Elliptical Head Tracking The BMP image sequences used in the head tracking d ...

  2. [WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platform dependent!

    一.背景 最近的项目在用maven 进行install的时候,发现老师在控制台输出警告:[WARNING] Using platform encoding (UTF-8 actually) to co ...

  3. SilverLight：基础控件使用（6）-Slider控件

    ylbtech-SilverLight-Basic-Control:基础控件使用(6)-Slider控件 Slider 控件 Slider 控件的 ValueChanged 事件 1.A,返回顶部 S ...

  4. mysql_config_editor使用简介

      原文 : http://blog.itpub.net/29773961/viewspace-1817640/   ----------------------------------------- ...

  5. Windows 如何为绿色软件运行时添加参数 如最小化,无窗口运行

    1 有些软件运行的时候需要或者可以添加参数来实现一些特殊要求,比如开机自启动,运行时不显示主界面,不显示托盘图标等,比如下面的这个流量精灵软件,"urlcore.exe /h /r /t 4 ...

  6. 猫猫学iOS之小知识之_xcode插件的删除方法_自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示，

    猫猫分享,必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:解决解决自己主动提示图片插件KSImageNamed有时不 ...

  7. java中Volatile修饰符的含义

    在java语言中:为了获得最佳速度,同意线程保存共享成员变量的私有拷贝.并且仅仅当线程进入或者离开同步代码块时才与共享成员变量的原始值进行对照. volatilekeyword的作用就是提示vm:对于 ...

  8. WinDbg加载不同版本CLR

    WinDbg调试.net2.0和.net4.0程序有所不同,因为.net4.0使用新版本的CLR.例如: mscoree.dll 变为 mscoree.dll 和 mscoreei.dll, msco ...

  9. vs2012 MinGW编译ffmpeg 出现libavdevice/avdevice.c(38) : error C2059: 语法错误:“.”

    利用vs2012编译ffmpeg出现以下错误: libavdevice/avdevice.c(38) : error C2059: 语法错误:“.” libavdevice/avdevice.c(40 ...

  10. How to reset your password in Ubuntu

    There are many reasons you might want to reset a password: Someone gave you a computer with Ubuntu i ...