html5--select与HTML5新增的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--select与HTML5新增的datalist元素的更多相关文章
- HTML5中form的新增属性或元素
1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...
- html5表单及新增的改良元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5的datalist元素详解
html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...
- HTML5系列:HTML5与HTML4的区别
1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...
- 疯狂的表单-html5新增表单元素和属性
疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...
- 利用HTML5 的Datalist 元素实现输入提示
HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷. 今天看到datalist 这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件 ...
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- HTML5新增的结构元素
HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...
随机推荐
- Windows10下Apache2.4配置Django
开发环境 Windows 10 x64 Apache 2.4 x64 Python 2.7.11 x64 Django 1.9.6+ 下载和安装mod_wsgi 到 http://download.c ...
- TensorFlow 之 高层封装slim,tflearn,keras
tensorflow资源整合 使用原生态TensorFlow API来实现各种不同的神经网络结构.虽然原生态的TensorFlow API可以很灵活的支持不同的神经网络结构,但是其代码相对比较冗长,写 ...
- python 工具 图片批量合并
注:代码两处设置 region = (4,3,x-3,y-5) 目的是crop剪去图片的白边,这个可以视情况改变 图片需要命名为 x_1.png .....这样的格式 #encoding=ut ...
- 怎样用命令行管理SharePoint Feature?
普通情况下对IT管理者来说.在SharePoint Farm中维护Feature,更喜欢使用命令行实现,这样能够省去登录到详细网站的操作. 比方IT接到end user的一个需求,要开启Site Co ...
- 【Access2007】Access2007的打开方式
Access2007提供了多种打开方式 仅仅读与非仅仅读就不用说了,就是能编辑与不可以编辑的差别 是否以独占的方式打开是Access2007的打开方式的核心 这里什么都没有写的打开是指以"共 ...
- VueJS数据绑定文本显示:{{message}}
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- inch mil mm换算
inch:英寸 mil:密耳 mm:毫米 1mil=0.0254mm=25.4um 1mm=39.37mil 1inch=1000mil=25.4mm
- EC知识总结ITE5570
以笔记本上的EC ITE5570进行讲解 ITE EC代码解析 1.一简介 EC(Embed Controller,嵌入式控制器)是一个16位单片机,它内部本身也有一定容量的Flash来存储EC的代 ...
- make mrproper及mrproper的含义
Linux下面去编译项目之前,一般常会用make mrproper去先删除之前编译所生成的文件和配置文件,备份文件等,其中,mrproper和distclean,clean之间的区别,Linux内核源 ...
- jmeter后置处理器之正則表達式提取器
新浪围脖>@o蜗牛快跑o 使用这个组件时,注意使用带分组的正則表達式 使用正则分组方便提取干净数据.以免再次处理数据字符串 正則表達式在线工具推荐:点击打开链接 正則表達式语法參考:点击打 ...