Question

我想在button内使用label标记作为广播类型input;当我们已经拥有一个非常合适的标签时，重新设计无线电输入看起来像一个按钮似乎很愚蠢。

但是，它不起作用。如果您点击label中的任何其他位置，则会检查该label的无线电输入。当您单击按钮时，预先检查的内容将保持选中状态。

当然，我去W3 validator看看这是否是有效的HTML。它似乎是在HTML 4中，但不是5.但是，当我the docs查看label时，没有任何内容发生任何变化。验证器中抛出的错误说明如下：

标签元素最多可包含一个按钮，输入，米，输出，进度，选择或textarea后代

让我感到困惑的是Chrome仍会显示收音机输入点击图片，但实际上并没有检查。似乎难以编码失败......

我的问题是，如何在不使用JavaScript的情况下button检查radio内的label输入？

＆＃13;

label{
  display:block;
  border:1px solid rgba(0,0,0,.2);
  margin:.5rem;
  padding:.4rem;
}

＆＃13;

<label>
  <input type="radio" name="test"/>
  <button>Button</button>
</label>

<label>
  <input type="radio" name="test"/>
  <input type="checkbox"/>
  <input type="button" value="Button"/>
  <p>Test text</p>
  <button>Button</button>
</label>

＆＃13;

我还遇到this answer引用了HTML5 form's label spec状态

如果未指定for属性，但label元素具有可标记元素后代，则树顺序中的第一个此类后代是标记为控件的标签元素。

所以我认为我可以使用id和for属性，但没有运气。想法？

＆＃13;

label{
  display:block;
  border:1px solid rgba(0,0,0,.2);
  margin:.5rem;
  padding:.4rem;
}

＆＃13;

<label>
  <input type="radio" name="test"/>
  <button>Button</button>
</label>

<label>
  <input type="radio" name="test" id="penultimate"/>
  <input type="button" for="penultimate" value="Button"/>
</label>

<input type="radio" name="test" id="last"/>
<input type="button" for="last" value="Button"/>

＆＃13;

如何在标签内部使用按钮进行无线电输入？

0 个答案: