html5--select与HTML5新增的datalist元素

学习要点

  • 掌握select元素与datalist元素的使用

select元素

  • 用来建立一个下拉菜单选项列表
  • 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
  • select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立
    • option元素可以用来建立一个选项，即下拉列表的一个菜单项
    • optgroup元素用来对option元素进行组合分组
  • size用来定义列表中显示的列表项
  • multiple属性用来定义是否可以多选
  • 可以添加disabled属性和autofocus属性

datalist元素

  • HTML5新增元素，用来建立一个选项列表
  • datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项
  • 通常与input元素配合使用

实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7     <p style="color:#FF0000">
 8 <!--
 9         autofocus属性：自动获得焦点<br>
10         accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点<br>
11         tabindex属性：指定按Tab键时，项目间的移动顺序<br>
12         autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能<br>
13 -->
14
15     </p>
16     <form action="L3_01.html" method="get">
17 <!--
18         姓名：<input type="text" name="name" accesskey="n" tabindex="3" autocomplet="on"><br><br>
19         密码：<input type="password" name="password" accesskey="p" autofocus="autofocus" tabindex="2" autocomplet="off"><br><br>
20         电话：<input type="tel" name="tel" accesskey="t" tabindex="1" autocomplet="on"><br><br>
21 -->
22         <p2 style="color:#FF0000">这是select元素</p2><br>
23         请选择你喜欢的课程：<select name="select" id="">
24             <optgroup>
25                 <option value="HTML5">HTML5</option>
26                 <option value="CSS3">CSS3</option>
27                 <option value="JAVA">JAVA</option>
28                 <option value="JAVASCRIPT">JAVASCRIPT</option>
29             </optgroup>
30             <optgroup>
31                 <option value="HTML5">HTML5</option>
32                 <option value="CSS3">CSS3</option>
33                 <option value="JAVA">JAVA</option>
34                 <option value="JAVASCRIPT">JAVASCRIPT</option>
35             </optgroup>
36         </select><br><br>
37
38         <p2 style="color:#FF0000">这是datalist元素</p2><br>
39         <input type="text" name="datalist" list="mydatalist">
40         <datalist id="mydatalist">
41             <optgroup>
42                 <option value="HTML5">HTML5</option>
43                 <option value="CSS3">CSS3</option>
44                 <option value="JAVA">JAVA</option>
45                 <option value="JAVASCRIPT">JAVASCRIPT</option>
46             </optgroup>
47             <optgroup>
48                 <option value="HTML5">HTML5</option>
49                 <option value="CSS3">CSS3</option>
50                 <option value="JAVA">JAVA</option>
51                 <option value="JAVASCRIPT">JAVASCRIPT</option>
52             </optgroup>
53         </datalist>
54         <br><input type="submit" value="确定"><br>
55     </form>
56
57 <body>
58 </body>
59 </html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/7967565.html

html5--select与HTML5新增的datalist元素相关推荐

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

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

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

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

  3. 关于H5、CSS3新增的一些元素及属性

    H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...

  4. html5新增了哪些表单元素,HTML5新增表单元素

    8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签 其type类型主要有有以下几种:type="tel"用 ...

  5. 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...

  6. HTML5新增的结构元素和网页元素

    1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本 新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...

  7. 【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换

    文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...

  8. html5表单新增的输入类型,HTML5之表单新增类型介绍

    1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...

  9. html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性

    新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...

  10. html5 url颜色,HTML5input新增type属性color颜色拾取器的实例代码

    type 属性规定 input 元素的类型.本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随脚本之家小编一起看看吧 定义和用法 type ...

最新文章

  1. bzoj1412[ZJOI2009]狼和羊的故事
  2. Cacti 插件中setup.php 文件的编写
  3. 【算法与数据结构】在n个数中取第k大的数（基础篇）
  4. 《系统集成项目管理工程师》必背100个知识点-24变更的常见原因
  5. 如何将SAP C4C TI页面的值传递到Embedded Component里去
  6. 电子表格转换成数据库_创建数据库，将电子表格转换为关系数据库，第1部分...
  7. 详解Java中static关键字和final关键字的功能
  8. 数字图像处理学习 matable
  9. 【RFID】阅读器和应答器之间的电感耦合
  10. Luogu P3174 [HAOI2009]毛毛虫 （树形dp）
  11. 无线专题 路由器和交换机、光猫的区别
  12. 零基础小白必须学习的，3Dmax快捷键大全！你都会吗？
  13. 心有景旗，志存远方——湖南安全技术职业学院美和易思愿景图活动
  14. 金三银四跳槽季，java面试突击（100题）进大厂就这么简单
  15. python打开文件,路径存在'\t'被转义
  16. 搭建清晰的前端技术体系
  17. proteus教程——cc4014串行输入
  18. 【运筹学】产销平衡下的运输问题概念理解（4月9日学习笔记）
  19. 自顶向下浅析go-iris框架
  20. Oracle数据库官方权威内部培训教材

热门文章

  1. 计算机网络物理结构两大部分组成,计算机网络的组成部分 -华强电子网
  2. iperf3怎么看结果_iperf3命令使用
  3. Layui 数据表格动态cols（字段）动态变化
  4. linux 管道 线程,linux中通过管道实现qq的聊天功能，用到了线程
  5. java 数学公式解析_JAVA 文本表达式解析成数学公式,计算出结果
  6. 别人统一四大力学，吾统一四大布局方向
  7. com.jogamp.opengl.GLException: J3D-Renderer-1: createImpl ARB n/a but required, profile ＞ GL2 reques
  8. swig: 未找到命令
  9. Windows访问samba：\\IP不行，那就\\IP\共享名
  10. OpenJDK8编码代码三合一：x86/Arm/Mips