Du point de vue logique, inscrire qu’un champ est obligatoire devrais se faire à l’intérieur de l’étiquette (balise label). N’est-ce pas cher M. Spock?

Autre élément: l’astérisque (*) est une concept à bannir. L’astérique n’est pas intuitif pour ceux qui n’ont jamais utilisé un formulaire. Seulement pour cela, je ne veux plus l’utiliser. Après plusieurs tentatives et recherches, la meilleure solution semble celle d’inscrire «obligatoire». Si cela permet que cela soit clair et précis, du coté visuel, le «label» commence à être surchargé. Pourquoi ne pas le mettre à la droite du champ? Bien sûr! Comment inscrire le mettre à sa droite tout en le gardant dans le «label»?

C’est Derek Featherstone qui m’a ouvert les yeux afin d’arriver à une solution optimale: mettre l’information dans une balise «em» et aligner le tout à droite du champ en utilisant le CSS..

Voici ce que cela donne en xHtml:

<form>
<div>
<label for=”nom”>Votre nom <em>Ce champ est obligatoire</em></label>
<input id=”nom” type=”text” name=”nom” value=”" />
</div>

</form>

Et comment faire pour disposer «l’obligatoire» à droite? Utilisez des «div» et utiliser le CSS pour mettre l’élément en position relative. Donnez lui aussi une largeur:

form fieldset div {

position: relative;

width: 60em;

}

Établissez une largeur pour le «label»:

label {

width: 15em;

}

Établissez également une largeur pour l’élément d’entrée:

input {

width: 15em;

}

Et finalement, positionner l’élément d’emphasement («em») en absolu dans la boite (div):

label em {

position: absolute;
left: 35em;
}

Simple et efficace, j’aime!