将 <label for= " " > 与 id 包含空格的 HtmlHelper 呈现元素一起使用

Question

如果我有一个普通的复选框<input>元素，其中包含包含空格的id属性，我仍然可以使用<label for="">将标签绑定到元素，然后单击标签文本以切换复选框值：

<input type="checkbox" id="remember me" />
<label for="remember me">Remember me</label>

但是，如果我使用 HtmlHelper 类创建相同的<input>元素，<label for="">似乎不会将标签绑定到标签文本。当我单击标签文本时，复选框不会切换：

@Html.CheckBox("remember me")
<label for="remember me">Remember me</label>

为什么当我使用 HtmlHelper 时行为不同？是否可以将<label for="">与具有包含空格的id的 HtmlHelper 呈现元素一起使用？

---

请注意，这个问题的主要目的是记录我发现的一些有趣的事情。根据 HTML 5 标准，id属性应至少为一个字符，并且不应包含任何空格字符。我遇到了一些显然没有遵循 W3C 建议的代码，并且在清理它时，找到了上述问题的解决方案，所以我想我不妨分享我的发现，以防这可以帮助某人将来。

Answer 1

当 HtmlHelper 创建<input>元素时，它会将id属性中的所有空格替换为下划线。

如果检查呈现的 HTML 代码，您将看到input元素呈现如下：

<input id="remember_me" name="remember me" value="true" type="checkbox">

因此，如果要将标签与上述元素相关联，则需要将for字符串中的所有空格替换为下划线：

@Html.CheckBox("remember me")
<label for="remember_me">Remember me</label>

---

另一种可以避免上述问题的方法是一起跳过for=""属性，只需将<label>标记包裹在整个input元素周围：

<label>
@Html.CheckBox("remember me")
Remember me
</label>

我发现这个解决方案有时会导致问题，但是，如果我为所有标签元素设置了一些 CSS 样式，并且不希望将样式应用于标签周围的所有元素。