文档章节

html5的datalist元素详解

o
 osc_zoa3moe9
发布于 2019/12/07 18:38
字数 818
阅读 36
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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元素配合使用

 

实例

 

 

 

 

 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>

 

 
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Html5的新特性

什么是HTML5? HTML5是最新的HTML标准,他的主要目标是提供所有内容而不需要任何的像flash,silverlight等的额外插件,这些内容来自动画,视频,富GUI等 HTML5是万维网联盟(W3C)和网络超文...

furw
2015/04/29
84
0
HTML5

HTML5新元素 <canvas>新元素 新多媒体元素 新表单元素 新的语义和结构元素 HTML5新的Input类型 HTML5新的表单元素 HTML5有一下新的表单元素:<datalist>,<keygen>,<output> HTML5新的表单属性......

asap_rocky
2019/04/06
0
0
html5 表单元素 101

HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datalist keygen output datalist 元素 datalist 元素规定输入域的选项列表。 列表是通过 datali...

Tunie2014
2013/05/17
7
0
html5.js让IE(包括IE6)支持HTML5元素方法

html5.js让IE(包括IE6)支持HTML5元素方法 微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(...

巴顿
2015/04/08
39
0
html5 form表单,html5 教程

html5 form表单 html5 教程 html5 form表单表单介绍 1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性...

zencart.me
2013/01/06
227
0

没有更多内容

加载失败,请刷新页面

加载更多

写技术博客的一些心得体会

目录 1. 是什么 2. 为什么 2.1. 优秀的学习方法 2.2. 知识的备份 2.3. 体系的形成 2.4. 知识的交流 2.5. 写作能力和思维能力 3. 怎么做 1. 是什么 不知不觉已经写了近百篇技术博文了,其实在...

osc_873fteab
4分钟前
0
0
android组件间共享数据的常用方法

使用Intent在激活组件的时候携带数据,以进行数据的传递 使用广播进行组件间数据的伟递 使用外部存储(sharedPreference,文件,数据库,网络)进行组件间数据共享 使用Static静态成员进行数...

osc_sdnu59mg
6分钟前
0
0
Chrome浏览器的插件扩展默认安装目录

1:打开谷歌浏览器在地址栏输入:chrome://version 并回车 2:如上图个人资料路径,该路径下的Extensions文件夹即默认的插件安装目录:

osc_zg8wy3xa
8分钟前
0
0
知识圈APP开发记录(二十一)

今日完成:新增学习情况概览功能 花费时间:4小时 剩余时间:2小时 遇到问题:图标刷新时X轴成倍数刷新(已解决) 部分代码截图: 明日将完成:个性化模块及其附属功能测试

osc_bodzcw38
9分钟前
0
0
在做python大作业自己设计学生信息管理的增删改查操作遇到的问题

数据库的创建 conn = sqlite3.connect('student1.db') """ #在该数据库下创建学生信息表 conn.execute ('''CREATE TABLE StudentTable( ID INTEGER PRIMARY KEY AUTOINCREMENT, StuId INTEGE......

osc_7dwwmolq
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部