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

<dl>

<dt>premier item</dt><dd>Définition</dd>

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

</dl>

/*

 * 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;

}

<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>