h5新增标签和表单元素

h5新增表单元素

1. video
2. audio标签
3.datalist标签
4. progress标签
5. 表单新增元素

1. video

作用：播放视频
video常用标签属性：
src：告诉video标签需要播放的视频地址
autoplay：视频自动播放
controls：在浏览器中出现对视频播放的控制条
loop：视频循环播放
muted：静音播放
width/height:设置视频的宽和高
poster：用于告诉video标签视频没有播放之前的占位图片
格式：

<video src=""></video><!-- 第二种格式 --><video><source src="" type=""></source><source src="" type=""></source>
</video>

2. audio标签

作用：播放音频
格式：

<audio src=""></audio><!-- 第二种格式 -->
<audio><source src="" type="">
</audio>

注意：
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster

3.datalist标签

作用：给输入框绑定待定待选项
格式：

<input type="text" list="xxx"><datalist id="xxx"><option>待选项内容</option></datalist>

如何给输入框绑定待选列表:

新增一个input输入框
新增一个datalist列表
在input输入框中新增一个list属性，并赋予属性值
在datalist增加属性id，把input的属性值付给datalist的id属性值

4. progress标签

作用：表示任务完成度，常用于进度条
格式：

<!-- value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。 --><progress value="60" max="100"></progress>

5. 表单新增元素

邮箱
作用：可以自动校验输入的内容是否符合邮箱的格式

<input type="email">

域名
作用：可以自动校验输入的内容是否是URL地址

 <input type="url">

数字
作用：输入框中只能填入数字

<input type="number">

时间
作用：可以通过日历来选择时间

<input type="date">

颜色
作用：可以通过取色板来选择颜色

<input type="color">

h5新增标签和表单元素相关推荐

h5新增标签和表单属性
一.h5新增结构性标签(有意义的div) 1.header 定义网页的头部 2.nav 定义网页的导航部分 3.section 定义网页的某个区域 4.footer 定义网页的底部 5.article ...
html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签其type类型主要有有以下几种:type="tel"用 ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
html5标签之表单元素
form标签学习 <form action="" method="" > <input type="text" name= ...
HTML5新标签-结构标签、表单元素、媒体标签
文章目录新的结构标签新的表单元素新的媒体标签 1. audio 音频标签(src controls autoplay loop muted) 2.video 视频标签(src controls ...
表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...
H5新增表单元素、控件
表单-新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. • ①email.②url.③number.④range • ⑤Date pick ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...