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

Question

If I have a plain checkbox <input> element with an id attribute that contains a space, I can still use <label for=""> to bind a label to the element, and then click on the label text to toggle the checkbox value:

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

However, if I create the same <input> element using the HtmlHelper class, <label for=""> does not seem to bind the label to the label text. When I click on the label text, the checkbox does not toggle:

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

Why is the behavior differing when I use HtmlHelper? Is it possible to use <label for=""> with a HtmlHelper rendered element that has an id that contains a space?

---

Please note, the main purpose of this question is to document something interesting that I discovered. According to HTML 5 standards, the id attribute should be at least one character, and should not contain any space characters. I came across some code that obviously didn't follow the W3C recommendations, and while cleaning it up, found a solution for the above problem, so I figured I may as well share what I found in case this can help someone in the future.

Answer 1

When the HtmlHelper creates the <input> element, it replaces all spaces in the id attribute with underscores.

If you inspect the rendered HTML code, you will see the the input element renders as follows:

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

If you want to associate a label with the above element, therefore, you need to replace all spaces with underscores in the forstring:

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

---

Another way you can possibly avoid the above problem is by skipping the for="" attribute all together, and just wrapping the <label> tag around the entire input element:

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

I've found this solution to sometimes causes issues, however, if I had some CSS styles set for all label elements, and didn't want the styles applied to all the elements that the label surrounded.