jquery - 以行组织的 HTML 表单

Question

我正在尝试准备一个需要布局到最多 4 个不同行的 html 表单。请参阅下面的代码和注释。基本上，我正在寻找前 3 个表单项位于第 1 行。接下来的 3 个位于第 2 行，依此类推。每个项目都应该与其他项目分开。我使用了 3 列大小，因为每个文本框都需要相对较短的输入（一个单词）。

框 3 到 8（第 2 行和第 3 行）根据选择选项打开和关闭。如果关闭，则只有 2 行（前 3 项 = 第 1 行，按钮 = 第 2 行）。

When I add class="row", the form items mash up against each other and when type 2 is selected, it gets even more out of whack since 6 additional boxes are added to the mess.

使用引导程序 4

行类在正确的位置吗？我应该使用其他课程吗？我对这一切都很陌生，因此对于将此表单设置为正确规格的任何帮助将不胜感激。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#conj").hide();
        $("#type").on("change", function() {
            if ($(this).val() === "addl") {
                $("#conj").show();
            }
            else {
                $("#conj").hide();
            }
        });
    });
</script>

<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="form-inline">

    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-3">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-3">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-3">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div>

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
        <label id="conj">

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
            </div>


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
            </div>

        </label>
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
        <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

</form>

标签： jqueryhtmlbootstrap-4

Answer 1

我对您的代码进行了一些更改。我希望它有帮助

<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="">

    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-4">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-4">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-4">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div class="row">

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
<!--        <label id="conj">-->

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
<!--             <div class=""> -->
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
<!--             </div> -->


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
<!--             <div class="col-12"> -->
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-4">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
<!--             </div> -->

<!--        </label>-->
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
        <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

</form>