如何在Bootstrap Carousels中将表单拆分为幻灯片

Question

我需要实现内部有很多字段的大表单。 所以我想创建一个旋转木马并将表格拆分成多张幻灯片。 但它似乎只有当我为每张幻灯片生成一个表单并且我不想这样做时我才想要在最后一张幻灯片中为所有表单字段提交一个表单。

是否可以做这样的事情？

<!-- <div class="container"> -->
<div id="myCarousel" class="carousel slide" ><!-- data-ride="carousel" -->
    <div class ="row">
        <!-- Indicators -->
        <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
    </div>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <form id="{{form_id}}" action="/addUser" method="post" class="form form-horizontal" role="form">
            {% csrf_token %}
            <div class="item active">
                <h1>User</h1>
                <input type="text" name="Carousel1">
                <input type="text" name="Carousel2">
                <input type="text" name="Carousel3"> 
            </div>
            <div class="item">
                <h1>Parents</h1>
                <input type="text" name="Carousel4">
                <input type="text" name="Carousel5">
                <input type="text" name="Carousel6">
            </div>
            <div class="item">
                <h1>kid</h1>
                <input type="text" name="Carousel7">
                <input type="text" name="Carousel8">
                <input type="text" name="Carousel9">
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>