将 <label for=""> 与包含 space 的 id 的 HtmlHelper 渲染元素一起使用

Question

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

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

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

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

为什么我使用 HtmlHelper 时行为不同？是否可以将 <label for=""> 与包含 space 的 id 的 HtmlHelper 渲染元素一起使用？

请注意，这个问题的主要目的是记录我发现的一些有趣的事情。根据 HTML 5 standards，id 属性应至少为一个字符，并且不应包含任何 space 个字符。我遇到了一些明显不遵循 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 样式，并且不希望将样式应用于标签包围的所有元素.

将 <label for=""> 与包含 space 的 id 的 HtmlHelper 渲染元素一起使用

Using <label for=""> with a HtmlHelper rendered element with an id that contains a space

html

asp.net-mvc

html-helper

label-for