html中如何使用label标签

发布时间:2020-09-24 11:48:15 作者:小新
来源:亿速云 阅读:146

小编给大家分享一下html中如何使用label标签,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

html label标签用于为 input 元素定义标注(标记);label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性;当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

html label标签怎么用?

作用:为 input 元素定义标注(标记)。

说明:label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

注释:<label> 标签的"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

html label标签 示例1:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<p>请点击文本标记之一,就可以触发相关控件:</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>

效果图:

html中如何使用label标签

html label标签 示例2:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<p>点击文本,就可以触发相关控件:</p>
<form>
<label for="male">Male</label>
<input type="text" id="male" />
<br />
<label for="female">Female</label>
<input type="text" id="female" />
</form>
</body>
</html>

效果图:

html中如何使用label标签

看完了这篇文章,相信你对html中如何使用label标签有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. HTML中<label> 标签的用法
  2. label标签是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html label标签

上一篇:Python中的函数有哪些

下一篇:Canvas绘制股票K线图

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》