从零开始学 Web之HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、表单新增内容

1、表单新增属性

1.1、type相关属性

email

tel

url

number

search

range

color

时间日期相关

1.2、表单其他属性

1、placeholder：提示文本

2、autofocus：自动获取焦点

3、autocomplete：自动完成：on 打开，off 关闭。

前提：必须成功提交过；添加 autocomplete 的元素必须有 name 属性。

4、required：必须输入，如果未输入将阻止表单提交

5、pattern：正则表达式验证

multiple：可以一次选择多个文件（在 email中，multiple 允许填写多个邮件地址，中间用逗号隔开）

2、表单新增元素

datalist 元素

功能：拓展下拉菜单，可以手动输入选项。

1、因为能够手动输入选项，所以需要输入框；

2、输入框通过 list 属性和 datalist 关联起来；

3、value 为选中后输入框的内容，label 为 value 的辅助描述性内容。

注意：如果 type 的类型为 url 网址的话，value 的值必须加 http:// 或 https:// 才能够显示出来。

3、新增表单事件

oninput：当元素中的内容改变时，就会触发。

oninvalid：当验证不通过时触发。

setCustomValidity：修改 pattern 校验失败时，默认的提示信息。

4、进度条

progress：

属性： max 最大值，value：当前值

meter（度量器）：

属性：

high：被界定为高的值的范围。

low：被界定为低的值的范围。

max：规定范围的最大值。

min：规定范围的最小值。

optimum： 规定度量的最优值。

value：规定度量的当前值。

5、案例：表单总结

二、多媒体新增内容

audio：音频

属性：

src：播放的音频文件路径

controls：显示音频播放器的控制面板

autoplay：自动播放

loop：循环播放

video

属性：

src：播放的音频文件路径

controls：显示音频播放器的控制面板

autoplay：自动播放

loop：循环播放

weight：宽度（一般只需要设置宽度或者高度，可以使视频等比例缩放。）

height：高度

poster：视频未播放时展示的画面。默认为视频第一帧的画面。

source

由于不同浏览器支持的视频格式不同，所以我们在进行视频添加的时候，需要考虑浏览器是否支持。我们可以准备多种不同格式的视频文件，然后使用source标签，让浏览器选择支持的视频格式播放视频。

浏览器或从上至下，如果浏览器支持mp4格式就播放，不支持看下一个flv格式，如果都不支持就输出 “ 浏览器不支持该格式的视频文件”。

三、新增获取/操作元素

1、新增获取元素

2、新增操作元素类样式

PS：classList 的方式与 document.querySelector("选择器").className 的方法对比：

classList 的方法添加和删除不会清除原来的 class 类样式，只是在其基础上添加和删除。而 className的方式直接对源类样式操作，容易遗漏和误操作。

示例：

四、自定义属性

定义：以 “data-” 开头，后面必须有至少一个字符，多个单词间用 “-” 连接。

建议：

1、名称中应该都是用小写字符；

2、名称中不要包含任何特殊符号；

3、名称中不要由纯数字组成。

获取自定义属性的值

使用 "元素.dataset[]" 的方式获取自定义属性的值。其中自定义属性的名称要使用驼峰命名法填写。

欢迎关注

Web前端之巅

念念不忘，必有回响。