Checkbox Input elements are inside the Label elements

General information

Checkbox Input elements (both with schema elements and when choosing Properties) are generated inside the Label elements, and not after/before them as it’s normally done. This is bad semantics and produces problems when your styling relies on this fact.

• json-editor version:1.3.5

Expected behavior

Normally a label and its input element are placed next to each other as it can be seen here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox.

Actual behavior

This is what ends up getting generated in for example https://json-editor.github.io/json-editor/: <label class="checkbox" style="display: inline-block; font-weight: normal;"> age <input type="checkbox" disabled="" style="width: auto; display: inline-block;"> </label>

Steps to reproduce the behavior

Just check the HTML code produced.

[pmk65]

Are there other CSS frameworks which require the label before or after? Should/could the theme handle it?

The Materialize Theme set the for attribute on the label tag in the function getFormControl But it still wraps the input tag inside the label tag, which is correct according to the Materialize documentation,

Personally I always use the wrap method, as you don’t have to worry about id and for attributes. (less code.)

[pmk65]

From w3: The label itself may be positioned before, after or around the associated control. Either one is valid. Wrapping the label tag around the input tag allows you to skip the for attribute on the label tag and the id on the input tag,