一文告诉你HTML5中的新增属性该如何使用

举报
lwq1228 发表于 2021/08/09 17:33:52 2021/08/09
【摘要】 HTML5中新增了很多新的属性，下面就经常使用的属性的用法予以举例说明，主要包括新增的公共属性、input元素的新增属性和form元素的新增属性三个方面。

HTML5中新增了很多新的属性，下面就经常使用的属性的用法予以举例说明，主要包括新增的公共属性、input元素的新增属性和form元素的新增属性三个方面。

1、新增的公共属性

HTML5新增了很多公共属性。所谓的公共属性，指的是可以应用于大多数元素的属性，而并不只限于某一个元素。其中，HTML5新增的常见公共属性有4个：hidden、draggable、contenteditable、data-*。

1.1、hidden属性

在HTML5中可以使用hidden属性来显示或隐藏某一个元素。

语法：

<element hidden="hidden"></element>

hidden只有一个属性值：hidden，可以简写为：<element hidden></element>，其中，element是一个元素。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div hidden>Hello Html5</div>
<div>Hello Css3</div>
</body>
</html>

效果图：

1.2、draggable属性

在HTML5中可以使用draggable属性来定义某一个元素是否可以被拖动。

语法：

<element draggable="true或false"></element>

draggable有两个属性值：true和false，默认值为false。当取值为true时，表示元素可以被拖动；当取值为false时，表示元素不可以被拖动。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            display: inline-block;
            padding: 10px;
            border: 1px dashed gray;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<p draggable="true">你拖动我一下试试。。。</p>
</body>
</html>

效果图：

说明：

当我们使用鼠标左键长按时，会发现p元素可以被拖动，但是松开鼠标后你会发现元素位置并没有发生改变，这是为什么呢？其实draggable="true"只能定义元素可以被拖动这一个行为，拖动后并不会改变元素的位置。如果想要改变元素的位置，需要结合HTML5中的元素拖放的技巧来实现，这个我会在后面的博文中进行详细的介绍。

1.3、contenteditable属性

在HTML5中，我们可以使用contenteditable属性来定义某个元素的内容是否可以被编辑。

语法：

<element contenteditable="true或false"></element>

contenteditable有两个属性值：true和false，默认值为false。当取值为true时，元素内容可以被编辑；当取值为false时，元素内容不能被编辑。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            display: inline-block;
            padding: 10px;
            border: 1px dashed gray;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<p contenteditable="true">你可以点击我对内容进行编辑。。。</p>
</body>
</html>

效果图：

说明：

当点击p元素后，发现光标会在内容中闪烁，里面的文字可以被编辑了。

1.4、data-*属性

在HTML5中，我们可以使用data-*属性来为元素实现自定义属性。

语法：

<element data-*="属性值"></element>

“data-”只是一个前缀，后面接一个小写的字符串，例如data-name、data-age、data-birthday等。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var lis = document.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                console.log(lis[i].innerText + ": " + lis[i].dataset.fruitPrice + "/斤")
            }
        }
    </script>
</head>
<body>
<ul>
    <li data-fruit-price="￥6.5">毛桃</li>
    <li data-fruit-price="￥12.5">香蕉</li>
    <li data-fruit-price="￥3.5">菠萝</li>
</ul>
</body>
</html>

效果图：

说明：

在使用JavaScript获取data-属性的值时，要注意书写格式：

2、input元素的新增属性

为了提高开发效率，以及达到更好的用户体验，HTML5为input元素新增了大量的属性，其中，在实际开发中用得最多的有以下5个： autocomplete、 autofocus、placeholder、required、pattern。

2.1、autocomplete属性

在HTML5中，我们可以使用autocomplete属性来实现文本框的自动提示功能。

语法：

<input type="text" autocomplete="on或off"/>

autocomplete属性有两个属性值：on和off，on表示开启，off表示关闭。autocomplete属性一般都是结合datalist元素来实现自动提示功能。autocomplete属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <label>选择课程：<input type="text" autocomplete="on" list="tips"/></label>
    <datalist id="tips">
        <option value="HTML"></option>
        <option value="CSS"></option>
        <option value="JavaScript"></option>
        <option value="Vue"></option>
        <option value="React"></option>
        <option value="Angular"></option>
    </datalist>
</form>
</body>
</html>

效果图：

说明：

从外观上来看，这个文本框跟普通文本框没有任何区别，当我们输入内容时，文本框会自动匹配datalist元素中的选项并且弹出匹配列表，效果如图所示。

2.2、autofocus属性

默认情况下，文本框是不会自动获取焦点的，必须点击文本框才会获取。我们经常可以看到很多页面一打开时，文本框就已经自动获取到了焦点，例如百度首页。在HTML5之前，都是使用JavaScript的focus()方法来实现的，这种方式相对来说比较麻烦。在HTML5中，我们可以使用autofocus属性来实现文本框自动获取焦点。

语法：

<input type="text" autofocus="autofocus"/>

autofocus只有一个属性值：autofocus，可以直接简写为：<input type="text" autofocus/>。autofocus属性也适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <label>自动获取焦点：<input type="text" autofocus></label>
</form>
</body>
</html>

效果图-设置autofocus：

效果图-不设置autofocus：

说明：

对比以上两个图可以发现设置autofocus的文本框会自动获取焦点。

2.3、placeholder属性

在HTML5中，我们可以使用placeholder属性为文本框添加提示内容。

语法：

<input type="text" placeholder="提示内容"/>

placeholder属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <div><label>账号：<input type="text" placeholder="请输入账号"></label></div>
    <div><label>密码：<input type="password" placeholder="请输入密码"></label></div>
</form>
</body>
</html>

效果图：

2.4、required属性

在HTML5中，我们可以使用required属性来定义文本框输入内容不能为空，如果文本框为空，则不允许提交。

语法：

<input type="text" required="required"/>

required只有一个属性值：required，可以简写为：<input type="text" required/>。required属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <div><label>账号：<input type="text" required></label></div>
    <input type="submit" value="提交">
</form>
</body>
</html>

效果图：

说明：

如果文本框为空，点击【提交】按钮后，会弹出提示框，效果如图所示。

2.5、pattern属性

在HTML5中，我们可以使用pattern属性来为文本框添加验证功能。

语法：

<input type="text" pattern="正则表达式">

pattern属性取值是一个正则表达式。email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <div><label>账号：<input type="text" pattern="^[a-zA-Z]\w{4,9}$"></label></div>
    <input type="submit" value="提交">
</form>
</body>
</html>

效果图：

说明：

pattern="^[a-zA-Z]\w{4,9}$"表示文本框的内容必须符合“以字母开头，包含字母、数字或下划线，并且长度在5~10之间”的规则。如果不符合条件，则会弹出提示框，如图所示。

3、form元素的新增属性

在HTML5中，form元素的新增属性中比较重要的只有一个，那就是：novalidate。在我的《图文并茂将HTML5中的新增表单元素彻底搞明白》这篇博文详细介绍了email、tel、url等类型的input元素，这些元素都内置了验证机制，这些验证机制默认会自动执行。但是在某些情况下，我们需要使用JavaScript来创建更为复杂且健全的验证，这时就要覆盖原有的验证机制了。那么问题来了，该怎么覆盖呢？在HTML5中，我们可以使用novalidate属性来禁用form元素的所有文本框内置的验证功能。

语法：

<form novalidate="novalidate">
    ......
</form>

novalidate只有一个属性值：novalidate，可以直接简写为：<form novalidate></form>。

举例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" novalidate>
    <div><label>电子邮箱：<input type="email"/></label></div>
    <div><label>手机号码：<input type="tel"/></label></div>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

效果图2：

说明1：

在上面这个例子中，我们为form元素添加了novalidate属性，因此当点击按钮提交表单时，form元素内的文本框就不会采用浏览器内置的验证机制，然后我们就可以使用JavaScript来创建新的验证规则，请看下面的例子。

举例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oEmail = document.getElementsByTagName("input")[0];
            var oTel = document.getElementsByTagName("input")[1];
            var errorEmail = document.getElementById("errorEmail");
            var errorTel = document.getElementById("errorTel");
            var oForm = document.getElementsByTagName("form")[0];//正则表达式
            var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3} $/;
            var regTel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$ /;
            //点击按钮后进行验证
            oBtn.onclick = function () {
                debugger
                if (!regEmail.test(oEmail.value)) {
                    errorEmail.innerHTML = "请输入正确的邮箱地址";
                } else {
                    errorEmail.innerHTML = "";
                }
                if (!regTel.test(oTel.value)) {
                    errorTel.innerHTML = "请输入正确的手机号码";
                } else {
                    errorTel.innerHTML = "";
                }
                //如果验证都通过，则提交表单
                if (regEmail.test(oEmail.value) && regTel.test(oTel.value)) {
                    oForm.onsubmit();
                }
            };
        }
    </script>
</head>
<body>
<form method="post" novalidate>
    <div><label>电子邮箱：<input type="email"/></label><span id="errorEmail" style="color: red;"></span></div>
    <div><label>手机号码：<input type="tel"/></label><span id="errorTel" style="color: red;"></span></div>
    <input id="btn" type="button" value="提交"/>
</form>
</body>
</html>

效果图2：

说明2：

在这个例子中，我们使用novalidate属性来禁用所有文本框内置的验证功能，这样我们就可以使用JavaScript来定义自己的一套验证方法，而不会跟内置的验证功能冲突。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML HTML5
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入