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

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

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>    

​