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

时间 2019-11-17

标签开始 web html5 html 表单多媒体新增内容获取元素自定义属性栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......html

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

微信公众号：Web前端之巅

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

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

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

1、表单新增内容

一、表单新增属性

1.一、type相关属性

<!--email提供了邮箱的完整验证，必须包含@和后缀，若是不知足验证，会阻止表单提交-->
邮箱：<input type="email">

<!--tel并非来验证手机号码的，由于全球手机号码格式的标准不一样。它的目的是可以在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其余字符。（在PC端没法展现）-->
手机：<input type="tel">

<!--url 提供了网址的合法格式验证。必须包含 http:// 或者 https://-->
手机：<input type="url">

number

<!--number只能输入数字和小数点，不能输入其余字符，而且输入框最右边有上下调节按钮-->
<!--value:默认值-->
<!--min:最小值-->
<!--max:最大值-->
<!--step:步伐-->
数量：<input type="number" value="50" min="0" max="100" step="5">

<!--search能够在输入框输入文本后右边显示“x”，能够将输入的文本清除-->
搜索：<input type="search">

range

<!--range范围-->
<!--step:步伐-->
范围：<input type="range" step="5">

color

<!--color颜色选择器-->
颜色：<input type="color">

时间日期相关java

<!--时间：时分-->
<input type="time">
<!--日期：年月日-->
<input type="date">
<!--日期+时间：年月日时分-->
<input type="datetime-local">
<!--年+月-->
<input type="month">
<!--年+周-->
<input type="week">

1.二、表单其余属性

<!--提示用户输入信息-->
<input type="text" placeholder="请输入文本" autofocus autocomplete="on" required pattern="xxx">

一、placeholder：提示文本git

二、autofocus：自动获取焦点github

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

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

四、required：必须输入，若是未输入将阻止表单提交后端

五、pattern：正则表达式验证浏览器

<input type="file" multiple>

multiple：能够一次选择多个文件（在 email中，multiple 容许填写多个邮件地址，中间用逗号隔开）微信

二、表单新增元素

datalist 元素

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

<input type="text" list="field">
<datalist id="field">
  <option value="嵌入式" label="c"></option>
  <option value="前端" label="web"></option>
  <option value="后端" label="java"></option>
</datalist>

一、由于可以手动输入选项，因此须要输入框；

二、输入框经过 list 属性和 datalist 关联起来；

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

注意：若是 type 的类型为 url 网址的话，value 的值必须加 http:// 或 https:// 才可以显示出来。

三、新增表单事件

oninput：当元素中的内容改变时，就会触发。
oninvalid：当验证不经过时触发。

<body>
<form action="">
    用户名：<input type="text" placeholder="请输入用户名" id="user"><br>
    手机号：<input type="tel" id="phone" pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$"><br>
    <input type="submit"> <br>
</form>
<script>
    document.getElementById("user").oninput = function (ev) {
        console.log(this.value);
    };
    document.getElementById("phone").oninvalid = function (ev) {
        // 设置默认提示信息
        this.setCustomValidity("请输入正确的手机号码！")
    };
</script>

</body>

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

四、进度条

progress：

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

meter（度量器）：

属性：

high：被界定为高的值的范围。
low：被界定为低的值的范围。
max：规定范围的最大值。
min：规定范围的最小值。
optimum：规定度量的最优值。
value：规定度量的当前值。

<progress max="100" value="30"></progress>
<br>
<meter max="100" min="0" high="70" low="30" value="20"></meter>
<meter max="100" min="0" high="70" low="30" value="50"></meter>
<meter max="100" min="0" high="70" low="30" value="90"></meter>

五、案例：表单总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 600px;
            margin: 10px auto;
        }

        form > fieldset {
            padding: 10px 10px;
        }

        form > fieldset > meter,
        form > fieldset > input {
            width: 100%;
            height: 30px;
            margin: 8px 0;
            border: none;
            border: 1px solid #aaa;
            border-radius: 4px;
            font-size: 16px;
            padding-left: 5px;
            box-sizing: border-box; /*避免padding+border的影响*/
        }

        form > fieldset > meter {
            padding: 0;
        }

    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="txt">姓名：</label>
        <input type="text" name="userName" id="txt" placeholder="请输入姓名" required>

        <label for="phone">手机号码：</label>
        <input type="tel" name="phone" id="phone" required
               pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$">

        <label for="em">邮箱：</label>
        <input type="email" name="myemail" id="em" required>

        <label for="collage">学院：</label>
        <input type="text" name="collage" id="collage" list="dl" required>
        <datalist id="dl">
            <option value="电气与电子工程学院"></option>
            <option value="经济与管理学院"></option>
            <option value="外国语学院"></option>
            <option value="艺术与传媒学院"></option>
        </datalist>

        <label for="num">入学成绩：</label>
        <input type="number" name="num" id="num" required max="100" min="0" value="0" step="0.5">

        <label for="level">基础水平：</label>
        <meter id="level" max="100" min="0" high="90" low="59"></meter>

        <label for="edt">入学日期：</label>
        <input type="date" name="dt" id="edt" required>

        <label for="ldt">毕业日期：</label>
        <input type="date" name="dt" id="ldt" required>

        <input type="submit" id="sub">
    </fieldset>
</form>
<script>
    document.getElementById("phone").oninvalid = function () {
        this.setCustomValidity("请输入11位正确的手机号码！");
    };
    document.getElementById("num").oninput = function () {
        document.getElementById("level").value = this.value;
    };
</script>
</body>
</html>

2、多媒体新增内容

audio：音频

属性：

src：播放的音频文件路径

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

autoplay：自动播放

loop：循环播放

<audio src="mp4/1.mp3" controls autoplay></audio>

video

属性：

src：播放的音频文件路径

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

autoplay：自动播放

loop：循环播放

weight：宽度（通常只须要设置宽度或者高度，可使视频等比例缩放。）

height：高度

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

<video src="mp4/2.mp4" controls autoplay width="500px" poster="1.jpg"></video>

source

因为不一样浏览器支持的视频格式不一样，因此咱们在进行视频添加的时候，须要考虑浏览器是否支持。咱们能够准备多种不一样格式的视频文件，而后使用 source 标签，让浏览器选择支持的视频格式播放视频。

<video controls>
    <source src="mp4/2.mp4" type="video/mp4">
    <source src="mp4/2.flv" type="video/flv">
    浏览器不支持该格式的视频文件
</video>

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

3、新增获取/操做元素

一、新增获取元素

document.querySelector("选择器");
document.querySelectorAll("选择器");

二、新增操做元素类样式

document.querySelector("选择器").classList.add("类样式"); // 添加类样式
document.querySelector("选择器").classList.remove("类样式"); // 移除类样式
document.querySelector("选择器").classList.toggle("类样式"); // 反转类样式（有则删除，无则添加）
document.querySelector("选择器").classList.contains("类样式"); //是否包含类样式
document.querySelector("选择器").classList.item(索引); // 获取类样式

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .blue {
            color: blue;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<ul>
    <li>第一个li标签</li>
    <li class="green">第二个li标签</li>
    <li>第三个li标签</li>
    <li>第四个li标签</li>
</ul>

<input type="button" value="添加样式" id="btn1">
<input type="button" value="删除样式" id="btn2">
<input type="button" value="反转样式" id="btn3">
<input type="button" value="判断样式" id="btn4">

<script>
    // 点击第一个按钮给第一个标签添加样式
    document.querySelector("#btn1").onclick = function () {
        document.querySelector("li").classList.add("red");
        document.querySelector("li").classList.add("underline");
        // 获取样式：获取元素的样式，索引表明样式的位置
        var class1 = document.querySelector("li").classList.item(0);
        var class2 = document.querySelector("li").classList.item(1);
        console.log(class1 + "=====" + class2); // red=====underline
    };
    // 点击第二个按钮给第二个标签删除样式
    document.querySelector("#btn2").onclick = function () {
        document.querySelectorAll("li")[1].classList.remove("green");
    };
    // 点击第三个按钮给第三个标签反转样式
    document.querySelector("#btn3").onclick = function () {
        document.querySelectorAll("li")[2].classList.toggle("blue");
    };
    // 点击第四个按钮判断第四个标签是否包含某样式
    document.querySelector("#btn4").onclick = function () {
        var flag = document.querySelectorAll("li")[3].classList.contains("red");
        console.log(flag);
    };
</script>
</body>
</html>

4、自定义属性

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

建议：

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

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

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

<p data-user-name="Daotin"></p>

获取自定义属性的值

<script>
    var pObj = document.querySelector("p");
    var value = p.dataset["userName"];
    console.log(value); // Daotin
</script>

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