标签内的按钮

Question

I have a label with “ for="the pointer to the checkbox input" ” and as long as I know, this for can be added only for label .因此，我需要在 label 中添加一个 <button> （我需要它），但点击事件无法正常工作 - 它没有选中复选框 for 指向。

如果我必须将 <button> 放在 label 中， 只有 html+css 编码，我可以在这里使用什么可能性？

一些代码例如：

 <input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>

原文由 nikoletta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

事实证明，您可以使 <button> 操作输入，但前提是您将 <label> 放在 <button> 中。

 <button type="button">
  <label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">

尽管这违反了 W3C 规范：

交互式元素标签不得作为按钮元素的后代出现。 https://www.w3.org/TR/html-markup/label.html

原文由 Sinetheta 发布，翻译遵循 CC BY-SA 3.0 许可协议