HTML5 新增属性

HTML5 新增属性

公共属性

HTML5新增的常见公共属性有4个:

  • hidden
  • draggable
  • contenteditable
  • data-*

hidden属性

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div hidden>hello1</div>
		<div>hello2</div>
	</body>
</html>

draggable属性

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

语法

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

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			p {
				display: inline-block;
				padding: 10px;
				border: 1px dashed gray;
				background-color: #F1F1F1;
			}
		</style>
	</head>
	<body>
		<p draggable="true">这是一段可以被拖动的文字</p>
	</body>
</html>

contenteditable属性

可以使用contenteditable属性来定义某个元素的内容是否可以被编辑。

语法

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

使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p {
                display: inline-block;
                padding: 10px;
                border: 1px dashed gray;
                background-color: #F1F1F1;
            }
        </style>
    </head>
    <body>
        <p contenteditable="false">这是一段可以被编辑的文字</p>
    </body>
</html>

data-*属性

可以使用data-*属性来为元素实现自定义属性。

语法

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

说明

“data-”只是一个前缀,后面接一个小写的字符串,例如data-color、data-article-title等。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			window.onload = function() {
				var oP = document.getElementsByTagName("p")[0];
				oP.style.color = oP.dataset.color;
			}
		</script>
	</head>
	<body>
		<p data-color="red">你的努力程度之低,根本轮不到拼天赋。</p>
	</body>
</html>

说明:可以使用DOM操作中的obj.dataset.xxx来获取data-*属性的值。

注意:

  • 如果是data-xxx格式,则应该写成obj.dataset.xxx。例如data-color应该写成obj.dataset.color,而data-content应该写成obj.dataset.content。
  • 如果是data-xxx-yyy格式,则应该写成obj.dataset.xxxYyy。例如data-fruit-price应该写成obj.dataset.fruitPrice,而data-animal-type应该写成obj.dataset.animalType。

input元素新增属性

为了提高开发效率,以及达到更好的用户体验,HTML5为input元素新增了大量的属性:

  • autocomplete
  • autofocus
  • placeholder
  • required
  • pattern

autocomplete属性

可以使用autocomplete属性来实现文本框的自动提示功能。

语法

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

说明

autocomplete属性有两个属性值:on和off。

on表示开启,off表示关闭。

autocomplete属性一般都是结合datalist元素来实现自动提示功能。

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

使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post">
            <input type="text" autocomplete="on" list="tips" />
            <datalist id="tips">
                <option value="HTML"></option>
                <option value="CSS"></option>
                <option value="JavaScript"></option>
                <option value="Vue.js"></option>
                <option value="React.js"></option>
                <option value="Angular.js"></option>
            </datalist>
        </form>
    </body>
</html>

在这里插入图片描述

autofocus属性

默认情况下,文本框是不会自动获取焦点的,必须点击文本框才会获取。

在HTML5之前,都是使用JavaScript的focus()方法来实现的,这种方式相对来说比较麻烦。在HTML5中,我们可以使用autofocus属性来实现文本框自动获取焦点。

语法

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

使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post">
            <input type="text" autofocus />
        </form>
    </body>
</html>

placeholder属性

可以使用placeholder属性为文本框添加提示内容。

语法

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

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form method="post">
			<input type="text" placeholder="请输入账号" /><br />
			<input type="text" placeholder="请输入密码" />
		</form>
	</body>
</html>

在这里插入图片描述

required属性

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

语法

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

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form method="post">
			<input type="text" required /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

在这里插入图片描述

pattern属性

可以使用pattern属性来为文本框添加验证功能。

语法

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

说明

email、url、tel这3个类型的input元素,本质上都内置了pattern属性,因此它们会自动进行相关匹配验证。

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form method="post">
			<input type="text" pattern="^[a-zA-Z]\w{4,9}$" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

在这里插入图片描述

说明:pattern="^[a-zA-Z]\w{4,9}$表示文本框的内容必须符合“以字母开头,包含字母、数字或下划线,并且长度在5~10之间”的规则。

form元素新增属性

novalidate属性

可以使用novalidate属性来禁用form元素的所有文本框内置的验证功能,使用JavaScript来创建更为复杂且健全的验证,这时就要覆盖原有的验证机制了。

语法

<form novalidate="novalidate">

</form>

说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			window.onload = function() {
				var email = document.getElementById("email");
				var tel = document.getElementById("tel");
				var errorEmail = document.getElementById("errorEmail");
				var errorTel = document.getElementById("errorTel");
				var btn = document.getElementById("btn");
				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}$/;

				btn.onclick = function() {
					if (!regEmail.test(email.value)) {
						errorEmail.innerText = "请输入正确的邮箱地址";
						return;
					} else {
						errorEmail.innerText = "";
					}
					if (!regTel.test(tel.value)) {
						errorTel.innerText = "请输入正确的手机号码";
						return;
					} else {
						errorTel.innerText = "";
					}

					//通过验证
					oForm.submit();
				}
			}
		</script>
	</head>
	<body>
		<form method="post" novalidate>
			<p>
				<label>电子邮箱:<input id="email" type="email" value="abced@qq.com" /></label><span id="errorEmail"></span>
			</p>
			<p>
				<label>手机号码:<input id="tel" type="tel" value="13745617896" /></label><span id="errorTel"></span>
			</p>
			<input id="btn" type="button" value="提交" />
		</form>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值