Bonjour à tous,

je cherche un moyen propre de transposer un formulaire de calcul initialement en Excel vers un simple fichier html (avec un soupçon de css et de javascript).

N'ayant pas du tout suivi les dernières évolutions html5/css3, j'ai découvert pas mal de choses... j'ai commencé par essayé flex puis grille et j'ai trouvé que le second se prêtait nettement plus à mon besoin qui était d'aligner horizontalement et verticalement des libellés et des zones de saisies.

J'ai donc quelque chose comme ça dans le html (avec beaucoup plus de lignes):
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
<div class="calc">
  <label for="aaa">Question 1</label>
  <input type="text" id="aaa" value="" maxlength="5">
  <div class="filler"></div>
  <label for="bbb">Question 2</label>
  <input type="text" id="bbb" value="">
  <label for="ccc">Question 3</label>
  <input type="checkbox" id="ccc" value="ccc">
  <label for="ddd">Question 4</label>
  <input type="text" id="ddd" value="">
</div>
Et le css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
.calc {
	display: grid;
	grid-template-columns: repeat(3, max-content 1fr);
	grid-auto-flow: row;
	grid-gap: 5px;
}
 
.filler {
	grid-column-end: -1;
}
Ça répond exactement à mon besoin : j'ai les 6 colonnes dont j'ai besoin (3 paires de libellé/valeurs), les colonnes des libellés prennent la largeur du plus grand élément de la colonne et les colonnes de valeurs se répartissent l'espace restant et font la même dimension.
Il me reste 2 questions :
1) est-ce que je ne suis pas complètement à côté de la plaque dans mon choix technique ou est-ce qu'il y a autre chose qui serait plus adapté ?
2) certaines questions sont indépendantes et d'autres sont liées, c'est pour ça que j'ai 6 colonnes : il y a pas mal de lignes qui ont les 3 paires de libellés+valeurs et quelques lignes qui n'ont qu'une ou deux paires. J'ai donc cherché un moyen "d'arrêter une ligne" sans avoir à positionner explicitement chaque élément sur la grille (y'en a beaucoup) ; le meilleur moyen que j'ai trouvé pour le moment c'est avec le <div class="filler"></div> et le style grid-column-end: -1;. Est-ce que ce qu'il y aurait un autre moyen plus propre ? (je voulais utiliser une balise <br class="filler"> mais ça ne marche pas ?).

Merci d'avance pour votre aide !