|
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Une méthode classique (mais limitée aux navigateurs
modernes, comme Mozilla ou Opera) pour séparer/regrouper
des éléments dans un menu SELECT est d'utiliser
l'attribut disabled="disabled"
sur le séparateur et de le styler afin de le différencier
du reste du menu :
<form>
<fieldset>
<legend>Destinataire de ce mail</legend>
<select name="destinataire">
<option disabled="disabled"
style="font-weight: bold;">Techniciens</option>
<option value="pc">Tech.
PC</option>
<option value="mc">Tech.
Mac</option>
<option value="un">Tech
Unix</option>
<option disabled="disabled"
style="font-weight: bold;">Commerciaux</option>
<option value="eu">Europe</option>
<option value="mo">Moyen-Orient</option>
<option value="us">Amériques</option>
<option disabled="disabled"
style="font-weight: bold;">Direction</option>
<option value="dg"
selected="selected">PDG</option>
<option value="ct">CTO</option>
<option value="ci">CIO</option>
</select>
</fieldset>
</form>
Ce qui donnait le résultat suivant :
Mais
il existe une manière plus propre - et compatible avec
Internet Explorer 6 - de parvenir au même résultat
: la balise optgroup, spécialement
conçue pour regrouper les options d'un menu SELECT.
Voici son utilisation :
<form>
<fieldset>
<legend>Destinataire de ce mail</legend>
<select name="destinataire">
<optgroup label="Techniciens">
<option
value="pc">Tech. PC</option>
<option
value="mc">Tech. Mac</option>
<option
value="un">Tech Unix</option>
</optgroup>
<optgroup label="Commerciaux">
<option
value="eu">Europe</option>
<option
value="mo">Moyen-Orient</option>
<option
value="us">Amériques</option>
</optgroup>
<optgroup label="Direction">
<option
value="dg" selected="selected">PDG</option>
<option
value="ct">CTO</option>
<option
value="ci">CIO</option>
</optgroup>
</select>
</fieldset>
</form>
Ce qui donne :
Plus besoin donc de recourir aux CSS : la spécification
HMTL4 a déjà prévu les usages possibles...
|
