关闭 div 标签使表单无法使用

Question

我正在使用带有 NodeJs 后端的 HTML 创建一个表单。 如果我关闭 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 : https://stackoverflow.com/questions/43958335/select-folder-instead-of-single-file-input-->  

        <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 个问题。

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

这是您的代码的修订版和工作版

<% 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 : https://stackoverflow.com/questions/43958335/select-folder-instead-of-single-file-input-->  

        <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>