名称的 HTML 标签

Question

是否可以使用元素

name

的标签for属性而不是id？我们的应用程序存在一个错误，两个复选框具有相同的 id，单击一个复选框的标签会检查另一个复选框。由于 HTML 生成逻辑丑陋且复杂，更改 id 会很痛苦。

但是，两个复选框都有一个唯一的名称属性，使用标签

for

这个名称将是一个快速的解决方案。这可能吗？

Answer 1

是否可以使用标签作为元素名称的属性而不是 id？

没有。

HTML 将其定义为与

id

有关，仅与

id

有关，除了

id

之外什么都没有。

它无法设计为引用

name

，因为

name

不是唯一的。您尝试解决的问题是由非唯一的

id

引起的。与

name

的区别在于它们允许（有时需要）是非唯一的。

考虑一组单选按钮。每个人都需要一个独特的

<label>

，但他们必须共享一个

name

才能使他们成为一个群体。

Answer 2

您可以将目标元素包裹在标签中，并且不需要

for

属性，如下所示：

<label><input type="checkbox">Label</label>

单击标签将激活复选框。

此外，这还有一个好处就是可以充当分组容器，所以如果你想要 Flexbox 之类的东西，你可以直接使用它，无需包装器。

Answer 3

如果不用于任何其他功能并且想要加快速度，请使用与名称相同的 ID 名称，请再次检查后端开发人员使用带有标签的条件，并且显然对它们使用相同的 id，但您不能有多个元素在 HTML 文档中具有相同的 id。

请参阅此示例，我在我的项目中使用这些复选框类别。

  <div class="form-check-label  wrap col-sm-12 col-md-6 col-lg-4">
                    {% if listing_details.lake %}
                    <input class="form-check-input" type="checkbox" name="lake" id="lake" checked>
                    {% else %}
                    <input class="form-check-input" type="checkbox" name="lake" id="lake" unchecked>
                    {% endif %}
                    <label class="form-check-label" for="lake">
                        Lake
                    </label>
                </div>

Answer 4

不可以，但您可以向具有不同类名称的 HTML 元素添加类属性，并也使用该类名称执行操作。