表单标签不包含 innerHTML

Question

好的，所以我在我的项目中遇到了一个问题，总结是：我有一个 bootstrap 模态，其中有一个包含要更新的用户数据的表单。在所述表格中，意味着有一个 h5 标题和一个输入。问题是表单标签正在关闭并将所述表单的内容放在 parent 元素（在它下面）中。源代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Admin || <%= config.name %>
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <%- include("./../components/head.ejs")%>
</head>

<body class="w-100 bg-light-light h-auto">
    <%- include("./../components/nav.ejs")%>
        <div class="float-end content bg-light-light ps-3 pt-3" style="width: 80%;">
            <p class="text-muted">Click on a user to see more.</p>
            <div class="container">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Username</th>
                            <th scope="col">Rank</th>
                            <th scope="col">Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% users.forEach(target=>{%>
                            <tr style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modal-<%=target.username%>">
                                <th scope="row">
                                    <%= Buffer.from(target.username, 'base64').toString() %>
                                </th>
                                <td>
                                    <%= target.rank %>
                                </td>
                                <td>
                                    <%= target.name %>
                                </td>
                            </tr>

                            <!-- Modal -->
                            <div class="modal fade" id="modal-<%=target.username%>" tabindex="-1"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">
                                                <%= config.code + Buffer.from(target.username, 'base64').toString() %>
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <h4>User <%= config.code + Buffer.from(target.username, 'base64').toString() %></h4>
                                            <hr>
<!--HERE=================-->
                                            <form class="form-control" method="POST" action="/admin/reqs/updateUser">

                    <h5>User Options</h5>
                                                    <input class="form-control" type="text" value="<%= Buffer.from(target.username, 'base64').toString() %>">
                                            </form>
<!--HERE=================-->
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <%})%>
                    </tbody>
                </table>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"
            integrity="sha512-s40QuZdS5wcjdt2OHUWSGRCECWr+YqbvRSaiBpEKOlOsbePPvXreeOTB4SVteinFcc1RpW/uDueEsknm9iJl2g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>

但是在浏览器元素视图（thingy）中它显示了这个：

这会影响所有浏览器，

发送帮助

Answer 1

只有 <tr> 个元素可以是 <tbody> 个元素的子元素。

您正试图在此处放置一个 <div>（并且 <form> 位于 <div> 的深处），这是不允许的。

浏览器为尝试修复您的错误而应用的错误恢复规则并未给您带来好的结果。

使用a validator。写入有效 HTML.

表单标签不包含 innerHTML

Form tag is not containing innerHTML

html

ejs