Я пытаюсь подготовить HTML-форму, которая требует макета до 4 отдельных строк. Смотрите код ниже с примечаниями. По сути, я ищу первые 3 элемента формы, которые должны быть в строке 1. Следующие 3 элемента в строке 2 и т. Д. Каждый элемент должен быть разнесен от остальных. Я использовал 3 размера столбца, поскольку каждое текстовое поле ожидает относительно короткий ввод (одно слово).
Блоки с 3 по 8 (строки 2 и 3) включаются и выключаются в зависимости от опции выбора. Если отключено, есть только 2 строки (первые 3 элемента = строка 1, кнопка = строка 2).
Когда я добавляю class = "row", элементы формы смешиваются друг с другом и когда тип 2выбран, это еще больше не в порядке, так как 6 дополнительных полей добавлены в беспорядок.
Использование начальной загрузки 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>