Converting label-id examples to label-enclose examples

[allan-bonadio]

This work converts how <label tags are used in a wide variety of MDN examples.

There are two ways to attach a label tag to its input (or other) control:

• Put an ID attribute on the input element, and use the for attribute on the label
• Enclose the input element with a label element, along with the text of the label

Unfortunately, the ID method is more difficult and complex: you have to make up an arbitrary ID for each instance. The IDs have to be unique on the page, by the laws of ID. For large pages, this results in extra difficulty. Specifically, if a nontrivial widget appears in many places in the site, each might need a unique string to put into its ID(s). This is common on html-assembling systems like React, Angular, and others.

The Enclose method is the easiest. In particular, no ID is needed. Both of these methods have been available since HTML 4.01, when label was introduced.

In almost all cases in MDN documentation, the ID method is used. I have no idea why. This is tragic as other programmers copy this, and so the difficult method is propagated. Many programmers don't seem to realize the enclose method exists, because there's rarely MDN examples.

There are 600-some-odd instances of ID-style labels in examples in mdn/content/files. Aided by global search/replace with regexes, I've converted more than 200 or 300 of these instances in my repo, mostly those that follow patterns I used in my regex scans.

Given the number of files changed, this might be hard to get through a PR. Is this good? How should I proceed?

You can see the changes I have, so far, in

[wbamberg]

@allan-bonadio , I've asked around for some opinions :).