Sommaire

Les boutons à bascule

1. Utiliser les boutons à bascule

Les boutons à bascule permettent de sélectionner des choix avec un simple clic de souris. Deux états sont possibles : un état actif et un état inactif. Cela peut être très pratique pour l’élaboration d’une interface interactive.

Deux possibilités s’offrent à vous pour utiliser ces boutons à bascule : un seul bouton ou plusieurs boutons à choix unique.

2. Un seul bouton

Premier cas de figure donc, l’utilisation d’un seul bouton à bascule qui permet aux utilisateurs de valider un choix. Initialement, le bouton est inactif, c’est-à-dire que l’utilisateur n’a pas encore validé le choix proposé. Dans ce cas, le bouton est gris. Quand l’utilisateur valide le choix, le bouton est actif et il est bleu.

Voici le code HTML utilisé :

<p>Acceptez-vous les conditions ?</p> 
<div class="switch"> 
  <input class="switch-input" id="accepte" type="checkbox" name="choix"> 
  <label class="switch-paddle" for="accepte"> 
     <span class="show-for-sr">Accepte conditions</span> 
  </label> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 08 / 08-bouton-g2.html.

Voici l’affichage obtenu initialement :

images/C08-006.png

Voici l’affichage obtenu lorsque ...