J'essaie de préparer un formulaire html qui nécessite une mise en page jusqu'à 4 lignes distinctes. Voir le code ci-dessous avec des notes. Fondamentalement, je recherche les 3 premiers éléments du formulaire sur la ligne 1. Les 3 suivants sur la ligne 2, etc. Chaque élément doit être réparti par rapport aux autres. J'ai utilisé le dimensionnement de 3 colonnes car chaque zone de texte attend une entrée relativement courte (un mot).
Les cases 3 à 8 (lignes 2 et 3) sont activées et désactivées en fonction de l'option sélectionnée. S'il est désactivé, il n'y a que 2 lignes (3 premiers éléments = ligne 1, bouton = ligne 2).
Lorsque j'ajoute class = "row", les éléments du formulaire se mélangent les uns contre les autres et lorsque le type 2 est sélectionné, cela tire encore plus parti du fait que 6 boîtes supplémentaires sont ajoutées au mess.
Utilisation de bootstrap 4
La classe de ligne est-elle au bon endroit? Y a-t-il une autre classe que je devrais utiliser? Je suis nouveau dans tout cela, donc toute aide pour obtenir ce formulaire configuré selon les bonnes spécifications serait appréciée.
<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>
1 réponse
J'ai apporté quelques modifications à votre code. J'espère que ça aide
<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>
De nouvelles questions
jquery
jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.