innerHTML插入form表单数据，浏览器解析后表单数据跑到了form标签外面

html代码table的行内容包含在form标签里，单通过浏览器打开后，通过浏览器控制台查看html元素，如下图


<!doctype html>
<html dir="lrt" lang="zh">
<body>
    <table id="t1" border=1 >
        
    </table>
</body>
</html>

<script>

var th="<tr><th>a</th><th>b</th><th>c</th></tr>";
var tr="<form><tr><td>1</td><td>2</td><td>3</td></tr></form>";
document.getElementById("t1").innerHTML=th+tr;
</script>

img

form表单不能放在table和tr之间，否则提交内容就会很奇怪。也就是说，table，tr，td这三组标签之间不能加入其它标签，否则效果就会很奇怪
用table标签来布局form表单元素，table标签必须放在form表单内部，否则可能会出现各种bug

    <tr>元素只能放<table>，<tbody>等表格元素之内，不能放其它的<form>之类的元素内。
    你应该用<form>元素包含整个<table>。

比如

<!doctype html>
<html dir="lrt" lang="zh">
<body>
    <form>
        <table id="t1" border=1 >
        </table>
    </form>
</body>
</html>
<script>
var th="<tr><th>a</th><th>b</th><th>c</th></tr>";
var tr="<tr><td>1</td><td>2</td><td>3</td></tr>";
document.getElementById("t1").innerHTML=th+tr;

如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮