Issue
If the following code were to run as I expected, pressing the button would replace the inner P element of the FORM into another FORM and a nested border would appear:
<form id="aa1" style="border: solid 2px blue; padding: 4px;">
<p>Original content</p>
</form>
<button type="button"
onclick="document.getElementById('aa1').innerHTML = '<form id=\'aa2\' style=\'border: solid 8px red; padding: 4px;\'><p>New content</p></form>';">
Click me
</button>
In Chrome 119 and Edge 118 (on Windows) this is not what is happening: the inner form is stripped out and the original paragraph gets replaced by the content of the inner form.
I know, nested forms are not allowed in HTML.
My question is: are all browsers behaving like this ? Is this behaviour described somewhere ? Since what versions are browsers behaving like this ?
Try it on Fiddle: https://jsfiddle.net/rnk9vms5/3/
Solution
Modern browsers are very lenient and accept invalid HTML, trying to render it anyway and making assumptions about what the programmer may have wanted. This does not mean that you should rely on such behavior or write invalid HTML on purpose.
are all browsers behaving like this?
Yes, all of them nowadays.
Is this behaviour described somewhere? Since what versions are browsers behaving like this?
Not really. It is implementation specific and will vary from browser to browser, and likely also from version to version of the same browser. You should not rely on it.
As an example, a web page containing the following invalid HTML code:
<a>Hello
Will be transformed by most modern browsers to:
<html>
<head></head>
<body>
<a>Hello</a>
</body>
</html>
Answered By - Marco Bonelli
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.