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. Linux下批量替换文件内容和文件名（转）

    1.批量替换指定多个文件的文件内容 在指定目录/your/path里,查找包含old_string字符串的所有文件,并用new_string字符串替换old_string字符串. sed -i &qu ...

  2. zip 压缩文件夹

    import java.io.*; import java.util.zip.*; /** * @author Dana·Li * <p> * 程序实现了ZIP压缩[compression ...

  3. iOS Framework: Introducing MKNetworkKit (MKNetworkKit介绍，入门，翻译)

    这片文章也有塞尔维亚-克罗地亚语(由Jovana Milutinovich翻译)和日语(由@noradaiko翻译) 如果有个一个网络库能够自动的为你处理cache该有多好啊. 如果有一个网络库能够在 ...

  4. Android 学习之路和App开发框架

    学习之路: 1. http://www.stormzhang.com/android/2014/07/07/learn-android-from-rookie/ 框架: 2. https://gith ...

  5. Eclipse出现&quot;Running Android Lint has encountered a problem&quot;解决方式

    近期打开Eclipse的时候,总是发生这种一个错误:"Running Android Lint has encountered a problem".截图例如以下: . 可是Ecl ...

  6. gulp在ionic中的使用

    简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...

  7. Unable to satisfy the following requirements解决方式

    今天从git上面download我们项目,然后向往常一样安装Cocoapods.可是却突然发现报错了,尝试了几遍.发现一直报错. 然后我这才看了一下,安装Cocoapods的日志,发现抛出了一个报错. ...

  8. Tachyon源代码结构分析（二）

    公布人:南京大学PASA大数据实验室顾荣 前言 在上一篇<Tachyon源代码结构分析(一)>中,我们介绍了Tachyon的四大模块(Client模块.Master模块.Worker模块以 ...

  9. 一些常用的shell

    1 if语句 if语句的三种写法,注意[]的两个空格,else if 写法是elif,不要漏了fi结束 if [ xxx ] then fi if [ xxx ] then echo "&q ...

  10. VMware虚拟机下实现Linux与window文件夹共享

    这里说的是在VMware虚拟机下来实现在windows与Linux下共享一个文件夹. 下面来说明一下是如何实现的: 1．安装VMware.Workstation. 2．安装Fedora10. 3．完成 ...