先来一个例子:
<html>
<head>
<script>
function log(...args) {
let output = document.querySelector('pre');
output.textContent += args.join(' ') + '\n';
}
</script>
</head>
<body>
<div id="main">
<label>Button inside label: <button onClick="log('button inside label')">
ok
</button></label>
<label>input inside label: <input onClick="log('input inside label')"></label>
<label>anchor inside label: <a href='#' onClick="log('anchor inside label')">I'm a link</a></label>
<label for="ok">Button attached with label</label><button id="ok" onClick="log('button id-fored with label')">ok</button>
</div>
<output><pre></pre></output>
</body>
</html>
<label> 的用法熟悉 html 的人都知道, 在一些情况下也比较有意思:
-
如果
<label>和<button>关联, click<label>内的任何空间, 都相当直接 click 在<button>上. 这个特性常常会引起混乱, 通常需要避免. -
但如果单击区域比较小, 利用
<label>的这个特性, 可以扩大点击范围, 方便用户操作, 特别在触摸界面上. 比如图标按钮(使用透明的背景, 加大padding, 也可以实现, 但如果有复杂的 element, 使用<label>会更方便), 输入框. -
<label>最 native 的结合, 是checkbox和 输入框.
网友评论