Site-wide: Examples with outdated HTML containing submittable forms can break
- Dominant language
- Markdown
- Stars
- 11k
- Forks
- 23.2k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 331
Description
I first noticed this with the "Updating border style" example at https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#updating_border_style (and opened #44346 to fix that one page), but subsequent investigation revealed this to be a more widespread issue.
If an example's demo HTML contains a `` element (which many legacy examples do, if they use ``, `` or other elements previously restricted to use in HTML forms), and that form is _submittable_ (the child elements have `id` attributes), then activating those elements will break the demo, because a form submission is attempted and the playground `runner.html` returns a 400 Bad Request error, crashing the example (all rendered output vanishes).
This can also be seen at https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#examples . Although the input field does demonstrate the `beforeunload` functionality properly, because the form is submittable (the `` has an `id=` attribute), it will break if navigation is triggered.
### Steps to reproduce
1. Navigate to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#examples and scroll down to the rendered output containing an input field.
2. Enter some text into the input field
3. Press Enter, triggering the `beforeunload` unsaved-changes alert
4. Click "Leave" (or whatever button signals acceptance of the navigation attempt)
5. The example will crash (the input field disappears, leaving a blank white box), because a form submission was attempted and got a 400 response from the playground server.
_Heavily modified from a comment originally posted by @ferdnyc in https://github.com/mdn/content/issues/44346#issuecomment-4616096392_
It would be good to go through the rest of the site's content and find all of the other examples with submittable forms, as they'll all be broken the same way. (`` elements wrapped around demo controls amount to superfluous noise at least 90% of the time, anyway. They're a legacy holdout from the pre-HTML5 web, and it's better if they're removed wherever possible just to make the examples more focused.)
Contributor guide
Assessment
This issue has not been assessed yet.