我使用bootstrap创建了一个步进器，我有几个fieldset，但是它不起作用？

问题描述

所以我创建了一个步进器，并且每个进度条都有一个字段集，但是最后一个字段集不起作用？它不会进入字段集，而是退出表单，看起来像这样：

训练字段集本身脱离表单。它不会进入最后一个进度栏中，我哪里出错了？我该怎么做才能解决这个问题？

<div class="container-fluid">
<div class="row justify-content-center mt-0">
    <div class="col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2">
        <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
            <h2><strong>Customer Registration</strong></h2>
            <div class="row">
                <div class="col-md-12 mx-0">
                    <form id="msform">
                      
                        <ul id="progressbar">
                            <li class="active" id="account"><strong>Personal information</strong></li>
                            <li id="personal"><strong>Additional information</strong></li>
                            <li id="payment"><strong>Educational Background</strong></li>
                            <li id="confirm"><strong>Professional Background</strong></li>
                        </ul> 
                        
                        
                        
                        <fieldset>
                            <div class="form-card">
                                <div class="row mx-4">
                                    <div class="col-12 mb-2">
                                      <label class="order-form-label">Full Name</label>
                                    </div>
                                    <div class="col-12 col-sm-12">
                                      <input class="order-form-input" placeholder="FirstName MiddleName LastName">
                                    </div>
                                </div>


                            </div> 
                            <input type="button" name="next" class=" next action-button" value="Next Step" />
                        </fieldset>
                        


                        <fieldset>
                            <div class="form-card">
                                <div class="row mx-4">
                                    <div class="col-12 mb-2">
                                      <label class="order-form-label">Spouse Full Name</label>
                                    </div>
                                    <div class="col-12 col-sm-12">
                                      <input class="order-form-input" placeholder="FirstName MiddleName LastName">
                                    </div>
                                </div>
                               
                               

                            </div> 
                            <input type="button" name="prevIoUs" class="prevIoUs action-button-prevIoUs" value="PrevIoUs" /> 
                            <input type="button" name="next" class="next action-button" value="Next Step" />
                        </fieldset>
                        
                        
                        <fieldset>
                            <div class="form-card">
                                <h2 class="fs-title">Elementary</h2>

                                <div>
                                <div id="readroot" style="display: none">

                                    <div class="row mx-4">
                                        <div class="col-12 mb-2">
                                        <label class="order-form-label">School</label>
                                        </div>
                                        <div class="col-12 col-sm-12">
                                        <input class="order-form-input" placeholder="School Name">
                                        </div>
                                    </div>

                                  


                                    <input class="btn"type="button" value="Remove School"
                                     onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
            
                                </div>          


                                <form method="post" action="/cgi-bin/show_params.cgi">
                                    <span id="writeroot"></span>
                                    <div style="flex:right">
                                        <input class="btn" type="button" value="Add School" onclick="moreFields();"/>
                                    </div>
                            
                                </form>
                            </div> 
                            <input type="button" name="prevIoUs" class="prevIoUs action-button-prevIoUs" value="PrevIoUs" /> 
                            <input type="button" name="next" class="next action-button" value="Next Step" />
                                    

                    </fieldset>

                        <fieldset>
                            <div class="form-card">
                                <h2 class="fs-title">Trainings</h2>
                                <div id="readroot6" style="display: none">
                                
                                <div class="row mx-4">
                                    <div class="col-12 mb-2">
                                        <label class="order-form-label">Title</label>
                                    </div>
                                    <div class="col-12 col-sm-12">
                                        <input class="order-form-input" placeholder="Trainings">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                            

    
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

解决方法

您的ID为readroot6的div没有结束参数，您的字段集应该变为

<fieldset>
    <div class="form-card">
        <h2 class="fs-title">Trainings</h2>
        <div id="readroot6" style="display: none">
            <div class="row mx-4">
                <div class="col-12 mb-2">
                    <label class="order-form-label">Title</label>
                </div>
                <div class="col-12 col-sm-12">
                    <input class="order-form-input" placeholder="Trainings">
                </div>
            </div>
        </div>
   </div>
</fieldset>