主页 / coding / 问题 / 79277173
Accepted
sh1
Asked: 2024-12-13 11:45:33 +0800 CST

标签可以（应该）跨越其所标记的输入吗？

  • 772

我在文档中看到了这种模式：

<input type="checkbox" id="foo" /><label for="foo">Foo!</label>

但问题是，它在复选框和它的标签之间留下了一个死区，您可以单击标签，也可以单击复选框，但两者之间存在一点间隙，单击不会执行任何操作，这有点烦人。

显然，如果输入和标签标签之间有任何空格，情况会变得更糟。

为了修复这个问题我尝试了这个：

<label for="foo"><input type="checkbox" id="foo" />Foo!</label>

这对我来说很有效，因为它消除了框和文本之间的死角，并且更容易交互。但它是合法且惯用的 HTML 吗？

html

3 个回答

  1. Best Answer

    根据HTML标准，答案是肯定的。

    ... 标题可以与特定的表单控件（称为标签元素的标签控件）相关联，可以使用for属性，也可以将表单控件放在标签元素本身内。

    此外，如果标记元素（）是该元素的子元素，则可能不需要提供for该属性。labelinputlabel

    for若未指定该属性，但标签元素具有可标记元素后代，则按树顺序排列的第一个此类后代 是标签元素的标记控件。

    我提供的链接提供了更多您可能感兴趣的示例和信息：https ://html.spec.whatwg.org/multipage/forms.html#the-label-element

    • 2

  2. 是的，这是有效的。

    而且通过这种方式您不需要使用id属性。

    <label><input type="checkbox" name="foo" />Foo!</label>

    需要注意的是：
    您不需要使用id表单的元素。
    它们是表单的子元素

    例子：

    const myForm = document.forms['my-form'];

myForm.inDate.valueAsDate = new Date();  // intialize the date element

myForm.addEventListener('submit', e =>
  {
  e.preventDefault(); // disable submit for this sample code
  
  console.clear();
  console.log( 'foo =', myForm.foo.checked );
  console.log( 'inDate =', myForm.inDate.valueAsDate );
  });
    label { 
  display : block;
  margin  : .5em;
  }
    <form name="my-form" >
  <label><input type="checkbox" name="foo" />Foo!</label>
  <label>Date : <input type="date" name="inDate" /></label>
  <button type="submit"> send info </button>
</form>

    • 1

  3. 事实上，我之前见过我的队友多次这样做，而且效果很好。但在我看来，你可以通过使用 CSS 为输入和标签设置样式来消除间隙。尝试用 form-group div 包裹输入和标签，将其显示为弹性框，将间隙设置为 0，并使用 padding 而不是 margin 在输入和标签之间添加间距

    （这里是我从上面的文档链接复制的代码，添加了一个类名form-group）

    .form-group {
    display: flex;
    gap: 0;
    padding: 5px 10px;
}
.form-group input {
    margin: 0;
}
.form-group label {
    padding-left: 10px;
}
    <fieldset>
    <legend>Choose your monster's features:</legend>
  
    <div class="form-group">
      <input type="checkbox" id="scales" name="scales" checked />
      <label for="scales">Scales</label>
    </div>
  
    <div class="form-group">
      <input type="checkbox" id="horns" name="horns" />
      <label for="horns">Horns</label>
    </div>
  </fieldset>

    • 0

相关问题