Créer un masque de saisie avec les listes de description

L'objectif, ici, est d'utiliser les listes de description pour créer facilement des masques de saisie.

Les listes de définition utilisent plusieurs balises :

  • <dl> : nouvel item
  • <dt> : texte à expliciter
  • <dd> : définition

Ainsi, classiquement, une liste aura la forme suivante :

<dl>
<dt>premier item</dt><dd>Définition</dd>
<dt>second item</dt><dd>Définition associée</dd>
</dl>

Nous allons utiliser ces trois balises pour réaliser une mise en forme d'un formulaire, en réécrivant le comportement de chacune :

  • <dl> sera utilisé pour une nouvelle ligne
  • <dt> pour afficher le libellé
  • <dd> pour afficher les champs.

Entrées correspondantes dans le fichier CSS :

/*
 * Masque de saisie par liste
 */
.formSaisie {
    border-style: solid;
    border-width: 1px;
    background-color: rgba(152, 193, 233, 0.5);
    width: 800px;
}
.formSaisie .formBouton {
    text-align: center;
    width: 750px;
}
dl input:hover, input:focus {
    border-color: #a66d1a;
   
}
dl {
    clear: both;
}
.formSaisie dt {
    float: left;
    text-align: right;
    width: 250px;
    margin: 0 10px 10px 0;
}
.formSaisie dd {
    float: left;
    text_align: left;
    width: 450px;
    margin: 0 0 10px 0;
    /*background: #ffffff;*/
}
.formSaisie400 {
    border-style: solid;
    border-width: 1px;
    background-color: rgba(152, 193, 233, 0.5);
    width: 400px;
}
.formSaisie400 dt {
    float: left;
    text-align: right;
    width: 140px;
    margin: 0 10px 10px 0;
}
.formSaisie400 dd {
    float: left;
    text_align: left;
    width: 250px;
    margin: 0 0 10px 0;
}
.formSaisie400 .formBouton {
    text-align: center;
    width: 400px;
}
input.date {
    background-image: url("images/calendar-small.gif");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    width: 10em;
}
input.num5 {
    width: 5em;
}
input.num10 {
    width: 10em;
}
dl select {
    max-width: 480px;
}

Par défaut, la largeur du formulaire est définie à 800 px. Il est également possible de travailler avec un formulaire d'une largeur de 400 points, si nécessaire. Vous pouvez également adapter à vos besoins spécifiques. La couleur de fond est affichée avec un coefficient de transparence de 50 %.

Un exemple de formulaire (créé pour fonctionner avec Smarty, un moteur de templates) :

<div class="formSaisie">
<div>
<form id="alimentForm" method="post" action="index.php?module=alimentWrite">
<input type="hidden" name="aliment_id" value="{$data.aliment_id}">
<dl>
<dt>Nom de l'aliment <span class="red">*</span> :</dt>
<dd><input name="aliment_libelle" value="{$data.aliment_libelle}" size="40" autofocus required></dd>
</dl>
<dl>
<dt>Nom court (pour éditions) <span class="red">*</span> :</dt>
<dd><input name="aliment_libelle_court" value="{$data.aliment_libelle_court}" size="8" maxlength="8" required></dd>
</dl>
<dl>
<dt>Type d'aliment <span class="red">*</span> :</dt>
<dd>
<select name="aliment_type_id">
{section name=lst loop=$alimentType}
<option value="{$alimentType[lst].aliment_type_id}" {if $alimentType[lst].aliment_type_id == $data.aliment_type_id}selected{/if}>
{$alimentType[lst].aliment_type_libelle}
</option>
{/section}
</select>
</dd>
</dl>
<dl>
<dt>Aliment actuellement utilisé ?</dt>
<dd>
<input type="radio" name="actif" value="1" {if $data.actif == 1 or $data.actif == ""}checked{/if}>oui
<input type="radio" name="actif" value="0" {if $data.actif == 0}checked{/if}>non
</dd>
</dl>
<div class="formBouton">
<input class="submit" type="submit" value="Enregistrer">
</div>
</form>
</div>
{if $data.aliment_id > 0 &&$droits["suppr"] == 1}
<div class="formBouton">
<form action="index.php" method="post" onSubmit='return confirmSuppression("Confirmez-vous la suppression ?")'>
<input type="hidden" name="aliment_id" value="{$data.aliment_id}">
<input type="hidden" name="module" value="alimentDelete">
<input class="submit" type="submit" value="Supprimer">
</form>
</div>
{/if}
</div>
<span class="red">*</span><span class="messagebas">Champ obligatoire</span>

Dans cet exemple, la suppression est gérée dans un formulaire différent, qui appelle une autre page, et qui nécessite des droits d'accès différents.

Et voici le résultat (avec d'autres informations, qui n'ont pas été intégrées dans le code de l'exemple) :