feat: add JavaScript to code snippet

[CBID2]

Description

This PR adds JavaScript to the code snippet in the HTML input example.

Motivation

David Cook mentioned that the demo doesn't demonstrate the browser validation for required or pattern, because it is not inside a <form>. By adding JavaScript to it, the example will work.

Additional details

Example where the issue takes place

Related issues and pull requests

Fixes #2535

[github-actions]

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[estelle]

The EmbedInteractiveExample macro works in the /mdn/content/ directory.
This directory contains the examples that are embedded using the EmbedInteractiveExample within MDN. In other words, this repo contains HTML, CSS, and JS, which is can then be pulled into MDN pages using the macro.

To solve the issue raised, you would want to update the code to include a <form>. The form with no action will submit to itself, reloading the example in place.

[CBID2]

The EmbedInteractiveExample macro works in the /mdn/content/ directory. This directory contains the examples that are embedded using the EmbedInteractiveExample within MDN. In other words, this repo contains HTML, CSS, and JS, which is can then be pulled into MDN pages using the macro.

To solve the issue raised, you would want to update the code to include a <form>. The form with no action will submit to itself, reloading the example in place.

Ok @estelle, I added the form element.

[estelle]

The EmbedInteractiveExample macro works in the /mdn/content/ directory. This directory contains the examples that are embedded using the EmbedInteractiveExample within MDN. In other words, this repo contains HTML, CSS, and JS, which is can then be pulled into MDN pages using the macro.

This part needs to be addressed.

To solve the issue raised, you would want to update the code to include a <form>. The form with no action will submit to itself, reloading the example in place.

Ok @estelle, I added the form element.

while a label works anywhere in the page, visually the label with the form control it's labelling is vital. Best practices is to put the label next to the input, before the input in most cases, but after a checkbox or radio button. In other words, the label should be in the form.

so, the EmbedInteractiveExample needs to be removed, the label needs to be moved to be in the form, and no js was added, but not sure if it needs any

[CBID2]

The EmbedInteractiveExample macro works in the /mdn/content/ directory. This directory contains the examples that are embedded using the EmbedInteractiveExample within MDN. In other words, this repo contains HTML, CSS, and JS, which is can then be pulled into MDN pages using the macro.

This part needs to be addressed.

To solve the issue raised, you would want to update the code to include a <form>. The form with no action will submit to itself, reloading the example in place.

Ok @estelle, I added the form element.

while a label works anywhere in the page, visually the label with the form control it's labelling is vital. Best practices is to put the label next to the input, before the input in most cases, but after a checkbox or radio button. In other words, the label should be in the form.

so, the EmbedInteractiveExample needs to be removed, the label needs to be moved to be in the form, and no js was added, but not sure if it needs any

Hi @estelle! :) I made the changes.

[estelle]

Thanks! 🎉

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

Congratulations on your first merged pull request. 🎉 Thank you for your contribution! Did you know we have a project board with high-impact contribution opportunities? We look forward to your next contribution.

[dacook]

Thanks @CBID2 and @estelle for working through this one, it works perfectly now!

Sorry for causing confusion with the mention of the input-url.html file; it was all I could figure out at the time.

[CBID2]

Thanks @CBID2 and @estelle for working through this one, it works perfectly now!

Sorry for causing confusion with the mention of the input-url.html file; it was all I could figure out at the time.

No problem @dacook! :) We're glad that this makes the documentation clearer now! :)