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

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渲染元素一起使用？

请注意，这个问题的主要目的是记录我发现的一些有趣的东西。根据{{​​3}}，id属性应至少为一个字符，并且不应包含任何空格字符。我遇到了一些明显没有遵循W3C建议的代码，在清理它的同时，找到了上述问题的解决方案，所以我想我也可以分享一下我发现的情况，以防将来有人帮忙。

Answer 1

当HtmlHelper创建<input>元素时，它会用{16}替换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样式，并且不希望样式应用于标签所包含的所有元素。