Migrate labels to enclosing, plus other testing/fixing #37552

allan-bonadio · 2025-01-08T04:15:11Z

Description

Converted '<label for=id' instances to enclosing labels, in Live Samples, in en-us/web/html directory. Also tested and fixed some of the examples.

THIS PR IS NOT NEARLY AS INTIMIDATING AS IT SEEMS!
see below.

Motivation

Unfortunately, the for=ID method requires that you have to make up a sometimes arbitrary ID for each instance. Often, there is no other reason for that ID. For large pages, if a nontrivial widget appears in many places in the site, each might need a unique string to put into its ID(s).

The for=ID method appears in almost all cases in examples in MDN. This leads to the impression that no other method is available, and that misconception is propagated.

Additional details

THIS PR IS NOT NEARLY AS INTIMIDATING AS IT SEEMS! Although the size is XL, most of the changes are the same thing over and over again:

before	after
<label for="foo">blah blah</label>	<label>
<input id="foo"... />	blah blah
	<input ... />
	</label>

See also the <label> element
First section describes how you can use either method. I think in the early days, the enclosure method didn't work reliably so people got in the habit of using the for=ID method.

Related issues and pull requests

…all of those files, proofreading changes and trying out the examples. Many of them were originally broken; I tried to fix as many as possible. Some of the examples were uninspired or didn't demonstrate the methods very well, so I added prose or refactored.

github-actions · 2025-01-08T04:17:03Z

Preview URLs (33 pages)

Flaws (759)

URL: /en-US/docs/Web/HTML/Global_attributes/autocorrect
Title: autocorrect
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Global_attributes/autocapitalize
Title: autocapitalize
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/required
Title: HTML attribute: required
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/disabled
Title: HTML attribute: disabled
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/multiple
Title: HTML attribute: multiple
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/accept
Title: HTML attribute: accept
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/minlength
Title: HTML attribute: minlength
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/placeholder
Title: HTML attribute: placeholder
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/size
Title: HTML attribute: size
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/capture
Title: HTML attribute: capture
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Attributes/pattern
Title: HTML attribute: pattern
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/datalist
Title: <datalist>: The HTML Data List element
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/fieldset
Title: <fieldset>: The Field Set element
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/label
Title: <label>: The Label element
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input
Title: <input>: The HTML Input element
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/time
Title: <input type="time">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/submit
Title: <input type="submit">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/file
Title: <input type="file">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/radio
Title: <input type="radio">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/date
Title: <input type="date">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/password
Title: <input type="password">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/hidden
Title: <input type="hidden">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/image
Title: <input type="image">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/tel
Title: <input type="tel">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/range
Title: <input type="range">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/reset
Title: <input type="reset">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/week
Title: <input type="week">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/number
Title: <input type="number">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/datetime-local
Title: <input type="datetime-local">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/search
Title: <input type="search">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/text
Title: <input type="text">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/url
Title: <input type="url">
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/search
Title: <search>: The generic search element
Flaw count: 23

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- and 18 more flaws omitted

External URLs (1)

URL: /en-US/docs/Web/HTML/Element/input/datetime-local
Title: <input type="datetime-local">

https://en.wikipedia.org/wiki/ISO_8601 (1 time) (Note! This may be a new URL 👀)

allan-bonadio · 2025-01-10T03:07:24Z

files/en-us/web/html/attributes/accept/index.md

@@ -45,16 +45,22 @@ When set on a file input type, the native file picker that opens up should only

 ```html
 <p>


This is a typical changes I made. Checkboxes and Radios put the label text After the <input; other inputs (like this) put the text before.

allan-bonadio · 2025-01-10T03:07:37Z

files/en-us/web/html/attributes/disabled/index.md

@@ -120,7 +120,7 @@ When form controls are disabled, many browsers will display them in a lighter, g
 </fieldset>
 ```

-{{EmbedLiveSample('Examples', 500, 450)}}
+{{EmbedLiveSample('Examples', 500, 560)}}



Sometimes I made the box taller.

allan-bonadio · 2025-01-10T03:12:30Z

files/en-us/web/html/attributes/pattern/index.md

@@ -145,9 +147,11 @@ input:valid + span::after {
 }
 ```

+Notice that the `span` has to come immediately after the `input` element, in order for the `input + span` css selector to work.
+


most of the examples use the same technique to indicate valid ✔︎ or invalid ✘. It was easy to break these; that's when I decided I had to test each one of these before I was done.

allan-bonadio · 2025-01-10T03:14:34Z

files/en-us/web/html/attributes/required/index.md

+  background: #f00;
+}
+```
+


an alternate validity mechanism - I thought this seemed more appropriate for the situation

allan-bonadio · 2025-01-10T03:18:48Z

files/en-us/web/html/attributes/size/index.md

+  margin-block: 1em;
+}
+```
+
 ```html


This example just seemed boring, and didn't illustrate different combinations (more items than size, less items than size, same number).

allan-bonadio · 2025-01-10T03:23:40Z

files/en-us/web/html/attributes/size/index.md

+<label>
+  enter a breed of dog:
+  <input type="text" value="corgi" size="45" />
+</label>


extra long size

allan-bonadio · 2025-01-10T03:24:09Z

files/en-us/web/html/attributes/size/index.md

+<label>
+  enter a breed of cat:
+  <input type="text" value="cheshire" size="4" />
+</label>


extra short size

allan-bonadio · 2025-01-10T03:28:22Z

files/en-us/web/html/element/datalist/index.md

+  <option value="11:00 am"></option>
+  <option value="12:00 pm"></option>
+  <option value="13:00 pm"></option>
+  <option value="14:00 pm"></option>
 </datalist>


This seemed kindof contrived with only 3 slots

allan-bonadio · 2025-01-10T03:31:26Z

files/en-us/web/html/element/input/date/index.md

@@ -109,7 +110,7 @@ You can use the [`min`](/en-US/docs/Web/HTML/Element/input#min) and [`max`](/en-

 {{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}

-The result is that only days in April 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside April 2017 can't be selected in the picker widget.
+The result is that only days in April 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside April 2017 can't be selected in the picker widget. (The user might be able to click and type in day, month and year, depending on the browser.)



just based on my playing around with Chrome, Firefox and Safari

allan-bonadio · 2025-01-10T03:34:46Z

files/en-us/web/html/element/input/date/index.md

-    <span class="validity"></span>
+    <label>
+      Enter your birthday:
+      <input type="date" name="bday" value="1995-01-01" />


added a value cuz it didn't look insightful

allan-bonadio · 2025-01-10T03:35:41Z

files/en-us/web/html/element/input/datetime-local/index.md

@@ -11,23 +11,21 @@ browser-compat: html.elements.input.type_datetime-local

 {{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}

-The control's UI varies in general from browser to browser. In browsers with no support, these degrade gracefully as if [`<input type="text">`](/en-US/docs/Web/HTML/Element/input/text) were set.
+The control's UI varies in general from browser to browser. In browsers with no support, these degrade gracefully as if [`<input type="text">`](/en-US/docs/Web/HTML/Element/input/text) were set. More modern implementations have an icon on the side that brings up a calendar panel where the user can select a date and time. Also, the user can often just enter numbers by clicking and typing.


browser behavior seems to have changed over the years since this was written

allan-bonadio · 2025-01-10T03:37:36Z

files/en-us/web/html/element/input/datetime-local/index.md


 The control is intended to represent _a local date and time_, not necessarily _the user's local date and time_. In other words, the input allows any valid combination of year, month, day, hour, and minute—even if such a combination is invalid in the user's local time zone (such as the one hour within a daylight saving time spring-forward transition gap).

 ## Value

-A string representing the value of the date entered into the input. The format of the date and time value used by this input type is described in [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
+A string representing the value of the date entered into the input. The format of the date and time value used by this input type is described in [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings). It's similar to [ISO8601](<https://en.wikipedia.org/wiki/ISO_8601#Local_time_(unqualified)>).


I guess I'm familiar with ISO so I know how it looks.

allan-bonadio · 2025-01-10T03:41:26Z

files/en-us/web/html/element/input/datetime-local/index.md

+        min="2017-06-01T08:30"
+        max="2017-06-30T16:30"
+        required />
+      <span class="validity"></span>


It's this <span that turns into a check ✔︎ or x ✘

allan-bonadio · 2025-01-10T03:44:23Z

files/en-us/web/html/element/input/file/index.md

@@ -9,6 +9,8 @@ browser-compat: html.elements.input.type_file

 {{HTMLElement("input")}} elements with **`type="file"`** let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using [form submission](/en-US/docs/Learn_web_development/Extensions/Forms), or manipulated using JavaScript code and [the File API](/en-US/docs/Web/API/File_API/Using_files_from_web_applications).

+The user can click the button to bring up a file selection dialog, or they can just drag the file into the button.
+


I see people using the dialog all the time, not realizing you can just drag & drop. At least the developers will know.

allan-bonadio · 2025-01-10T03:45:55Z

files/en-us/web/html/element/input/image/index.md

@@ -117,7 +117,7 @@ Let's look at a basic example that includes all the essential features you'd nee

 ```html
 <input
-  id="image"
+  id="loginImageButton"
  type="image"
  width="100"
  height="30"


here, lots of things were named 'image'. I wanted to say, no, they don't all have to be the same names.

allan-bonadio · 2025-01-10T03:48:35Z

files/en-us/web/html/element/input/number/index.md

@@ -118,6 +120,8 @@ Here, we have an `number` input with the placeholder "Multiple of 10". Note how

 {{EmbedLiveSample('Placeholders', 600, 40)}}

+Of course, the user can still type in any number they want.
+


wasn't clear from the context

allan-bonadio · 2025-01-10T03:54:16Z

files/en-us/web/html/element/input/number/index.md

+  min="4"
+  max="107" />
+```
+


illustrate that you can start at a number that isn't a multiple of the stepsize

allan-bonadio · 2025-01-10T03:58:46Z

files/en-us/web/html/element/input/number/index.md

-    switchBtn.setAttribute("class", "feet");
-    switchBtn.value = "Enter height in meters";
+  if (switchBtn.classList.contains("meters")) {
+    // switch to feet and inches


Instead of deciding based on the whole class string, just search for the speific class keyword with array.contains()

allan-bonadio · 2025-01-10T04:22:33Z

files/en-us/web/html/element/input/number/index.md

+  let m = inches / 39.37;
+  output.textContent = `${m.toFixed(2)} meters, or ${ft} feet ${inch.toFixed(0)} inches`;
+}
+


display in both forms

allan-bonadio · 2025-01-10T04:25:38Z

files/en-us/web/html/element/input/password/index.md

+    required
+    autocomplete="new-password" />
+  <span class="validity"></span>
+</label>


added validity <span so the example actually does something

allan-bonadio · 2025-01-10T04:29:31Z

files/en-us/web/html/element/input/radio/index.md

@@ -19,6 +19,8 @@ They are called radio buttons because they look and operate in a similar manner

 > **Note:** [Checkboxes](/en-US/docs/Web/HTML/Element/input/checkbox) are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

+The set of `N` radio buttons actually has `N + 1` states: each one selected, and then none selected. The user can't set it to this last state, and it's pretty useless; but it's legal and your app might set it that way by accident.
+


something about radios that isn't obvious at first

allan-bonadio · 2025-01-10T04:30:28Z

files/en-us/web/html/element/input/radio/index.md

@@ -54,7 +62,7 @@ The resulting HTML looks like this:
 </form>
 ```

-Here you see the three radio buttons, each with the `name` set to `contact` and each with a unique `value` that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's [`for`](/en-US/docs/Web/HTML/Element/label#for) attribute to associate the labels with the radio buttons.


no unique ID needed with enclosing labels

allan-bonadio · 2025-01-10T04:34:39Z

files/en-us/web/html/element/input/search/index.md

    <span class="validity"></span>
+    <button>Search</button>


separating the span.validity from the input breaks the check & x, so I fixed it

allan-bonadio · 2025-01-10T04:36:06Z

files/en-us/web/html/element/input/search/index.md

    <button>Search</button>
-    <span class="validity"></span>


span.validity must be contiguous to <input

allan-bonadio · 2025-01-10T05:22:19Z

files/en-us/web/html/element/input/url/index.md

@@ -107,14 +107,14 @@ It's important, however, to note that this is not enough to ensure that the spec
 This element is implemented as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:

 ```html
-<input id="myURL" name="myURL" type="url" />
+<input id="myURL" name="myURL" type="url" value="https://mozilla.org" />


it was a bit mysterious without some text already in it

allan-bonadio · 2025-01-10T05:24:51Z

files/en-us/web/html/element/input/url/index.md


-There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: `myURL=http%3A%2F%2Fwww.example.com`. Note how characters are escaped as necessary.
+There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: `myURL=https%3A%2F%2Fmozilla.org`. Note how characters are escaped as necessary.


everybody uses https these days, not so much http

allan-bonadio · 2025-01-10T07:03:27Z

files/en-us/web/html/element/input/url/index.md

+  id="myURL"
+  name="myURL"
+  type="url"
+  size="60"


wanted to really accentuate the effect of a high size

Allan Bonadio and others added 3 commits December 25, 2024 20:18

enclosed label changes for en-us/web/html

bdf1fcc

Merge branch 'mdn:main' into abonadio-enclLabs-web-html

d2714f9

allan-bonadio requested a review from a team as a code owner January 8, 2025 04:15

allan-bonadio requested review from chrisdavidmills and removed request for a team January 8, 2025 04:15

github-actions bot added Content:HTML Hypertext Markup Language docs size/xl [PR only] >1000 LoC changed labels Jan 8, 2025

allan-bonadio commented Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate labels to enclosing, plus other testing/fixing #37552

Migrate labels to enclosing, plus other testing/fixing #37552

allan-bonadio commented Jan 8, 2025 •

edited

Loading

github-actions bot commented Jan 8, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025 •

edited

Loading

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

allan-bonadio Jan 10, 2025

		@@ -45,16 +45,22 @@ When set on a file input type, the native file picker that opens up should only

		```html
		<p>

		@@ -9,6 +9,8 @@ browser-compat: html.elements.input.type_file

		{{HTMLElement("input")}} elements with `type="file"` let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using [form submission](/en-US/docs/Learn_web_development/Extensions/Forms), or manipulated using JavaScript code and [the File API](/en-US/docs/Web/API/File_API/Using_files_from_web_applications).

		The user can click the button to bring up a file selection dialog, or they can just drag the file into the button.

		@@ -118,6 +120,8 @@ Here, we have an `number` input with the placeholder "Multiple of 10". Note how

		{{EmbedLiveSample('Placeholders', 600, 40)}}

		Of course, the user can still type in any number they want.

		@@ -19,6 +19,8 @@ They are called radio buttons because they look and operate in a similar manner

		> Note: [Checkboxes](/en-US/docs/Web/HTML/Element/input/checkbox) are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

		The set of `N` radio buttons actually has `N + 1` states: each one selected, and then none selected. The user can't set it to this last state, and it's pretty useless; but it's legal and your app might set it that way by accident.


		There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: `myURL=http%3A%2F%2Fwww.example.com`. Note how characters are escaped as necessary.
		There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: `myURL=https%3A%2F%2Fmozilla.org`. Note how characters are escaped as necessary.

Migrate labels to enclosing, plus other testing/fixing #37552

Are you sure you want to change the base?

Migrate labels to enclosing, plus other testing/fixing #37552

Conversation

allan-bonadio commented Jan 8, 2025 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Jan 8, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

allan-bonadio Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

allan-bonadio commented Jan 8, 2025 •

edited

Loading

allan-bonadio Jan 10, 2025 •

edited

Loading