0

如果我有一个包含空格<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 建议的代码，在清理它时，找到了解决上述问题的方法，所以我想我不妨分享一下我发现的内容，以防将来对某人有所帮助。

4

1 回答 1

0

当 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 样式，并且不希望将样式应用于标签所包围的所有元素。

于 2017-08-31T19:43:11.757 回答