Form checkboxes not working properly with htmlfor attribute

There are cases where DOM is dynamically generated or parsed as it happens in React or when using composable DOM elements libraries as bel.

Where this case

`<form action="#">
    <p>
      <input type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>
  </form>
`

is parsed as

<form action="#">
    <p>
      <input type="checkbox" id="test5" />
      <label htmlfor="test5">Red</label>
    </p>
</form>

this changes for attribute to htmlfor according to W3C Recommendation and getting checkbox controls not working properly.

[fega]

Closed due inactivity, feel free to reopen it if it is still necessary, in that case, please provide a way to reproduce it. like a codepen.

[stef-k]

I have the same issue with Django template, using the following code:

<p>
    <label for="{{ form.remember.id_for_label }}">{% trans "Remember Me" %}:</label>
    <input type="checkbox"
           name="{{ form.remember.html_name }}"
           id="{{ form.remember.id_for_label }}"/>
</p>

The checkbox and the respective label are rendering behind the submit button as seen bellow

The following works

    <p>
      <input type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>

Maybe it has something to do with the dynamic generated parts of the widgets?