Sélectionner

La fonction Sélectionner (code « Select ») permet de créer une liste déroulante. Voir l’aide-mémoire pour les paramètres.

Pratiques exemplaires

  • À utiliser dans les formulaires seulement.
  • Rédiger des questions claires et concises.
  • Pour permettre de choisir plus d’une option, utiliser plutôt les cases à cocher.

Exemple


                    [Select options="Valeur 1|{Valeur 2}|Valeur 3" name="select" hint="---" required="true" separator="|"]Composante « Select »[/Select]
                
<div class="bocss-select__group">
    <label class="bocss-label" id="bocss-select-2-label" for="bocss-select-2">Composante « Select » *</label>
    <div>
        <select name="select" id="bocss-select-2" class="bocss-select">
                <option class="bocss-hint" value="" selected
                    disabled>---</option>
                <option value="Valeur 1" 
                    >Valeur 1</option>
                <option value="Valeur 2" 
                    disabled>Valeur 2</option>
                <option value="Valeur 3" 
                    >Valeur 3</option>
        </select>
        <i class="arrow downward"></i>
    </div>
    
</div>

Paramètres

Paramètre Valeurs Description
hint définie par l’utilisateur Pour définir le texte non sélectionné de la première option.
id définie par l’utilisateur ID HTML du champ
label définie par l’utilisateur Étiquette du champ. Le contenu des balises du code simplifié remplit ce champ.
name définie par l’utilisateur Nom HTML du champ
options définie par l’utilisateur Pour définir les options du menu. Utiliser des virgules pour séparer les éléments. Les valeurs entre accolades sont des options désactivées.
required true, false La valeur « true » rend le champ obligatoire.
selected_option définie par l’utilisateur Pour définir l’option par défaut, p. ex, selected_option=’2’.
separator définie par l’utilisateur Si des virgules font partie du contenu, utiliser un caractère spécial pour séparer les éléments.