mdn / mdn/content

Site-wide: Examples with outdated HTML containing submittable forms can break

Open
#44,347 12 comments 0 reactions 0 assignees View on GitHub
Content:WebAPI effort: large MDN:Project
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.