关闭 div 标签使表单不可用

Question

我正在使用 HTML 和 NodeJs 后端创建一个表单。如果我关闭其中一个 div 标签，则表单不会提交。这真的很奇怪，如果我保持打开状态，那么它就可以正常提交。
我花了很多时间在这上面，但我看不出我哪里做错了。我已经数了所有 div 多次，但计数越来越好。
下面是我的 HTML 表格 -

<% layout('layouts/boilerPlate') %>
<h1 class="text-center mb-3">Experiment Detail</h1>
<div class="col-6 offset-3">
    <form action="/plannerHome" method="POST" class="classification" enctype="multipart/form-data" >
        <div class="classifications">
            <label class="form-label" for="taskName">Experiment name: </label>
            <input type="text" name="taskName" id="taskName" required>
        </div>
    <!-- The closing tag of this div is causing problem --> 
        <div class="classifications">
            <label class="form-label" for="taskType">Experiment Type: </label>
            <select name="taskType" id = "taskType">
                <option value="None">Please Select a Experiment type</option>
                <option value="classify">Classification</option>
                <option value="instance-segmentation">Instance Segmentation</option>
                <option value="semantic-segmentation">Semantic Segmentation</option>
                <option value="localisation">Localisation</option>
            </select>
        <!--</div> This is causing problem -->
    <!-- For the Supplementary material to revise -->
        <div class="classifications">
            <label class="form-label" for="dataManual">Supplementary material: </label> 
            <input class="form-control" type="file" id="dataManual" name="dataManual">
        </div>  
    <!-- For the input file -->
        <div class="classifications">
            <label class="form-label" for="labelFile">Label file: </label>
            <input class="form-control" type="file" id="labelFile" name="labelFile" >
        </div>  
    <!-- Upload file folder :   

        <div class="classifications"> 
            <label class="form-label" for="data">Data: </label>
            <input class="form-control mb-3 " type="file" id="data" name="data">
        </div>

    </form>
    <div class="mb-3">
        <button>Create Experiment</button>
    </div> 
</div>

Answer 1

我在这里看到了 2 个问题。

您没有关闭 input 个标签，它们是 self-closing 个标签。
问题：按钮不在表单中，您没有将按钮中的点击事件附加到您的表单中 - 或者至少不在包含的表单中。

这是您的代码的修订版本

<% layout('layouts/boilerPlate') %>
<h1 class="text-center mb-3">Experiment Detail</h1>
<div class="col-6 offset-3">
    <form action="/plannerHome" method="POST" class="classification" enctype="multipart/form-data" >
        <div class="classifications">
            <label class="form-label" for="taskName">Experiment name: </label>
            <input type="text" name="taskName" id="taskName" required />
        </div>
    <!-- The closing tag of this div is causing problem --> 
        <div class="classifications">
            <label class="form-label" for="taskType">Experiment Type: </label>
            <select name="taskType" id="taskType">
                <option value="None">Please Select a Experiment type</option>
                <option value="classify">Classification</option>
                <option value="instance-segmentation">Instance Segmentation</option>
                <option value="semantic-segmentation">Semantic Segmentation</option>
                <option value="localisation">Localisation</option>
            </select>
        </div><!-- This is causing problem -->
    <!-- For the Supplementary material to revise -->
        <div class="classifications">
            <label class="form-label" for="dataManual">Supplementary material: </label> 
            <input class="form-control" type="file" id="dataManual" name="dataManual" />
        </div>  
    <!-- For the input file -->
        <div class="classifications">
            <label class="form-label" for="labelFile">Label file: </label>
            <input class="form-control" type="file" id="labelFile" name="labelFile" />
        </div>  
    <!-- Upload file folder :   

        <div class="classifications"> 
            <label class="form-label" for="data">Data: </label>
            <input class="form-control mb-3 " type="file" id="data" name="data" />
        </div>
        <div class="mb-3">
            <button type="submit">Create Experiment</button>
        </div> 
    </form>
</div>

关闭 div 标签使表单不可用

Closing the div tag making form unusable

html

forms

node.js