Comment créer des commutateurs à bascule élégants sans JavaScript: tutoriel HTML & CSS

L’incorporation de commutateurs de bascule dans les formulaires Web est devenue répandue, améliorant l’expérience utilisateur (Ux) en fournissant des contrôles intuitifs sur les commandes. Cet article plonge dans l’historique des commutateurs à bascule et leur intégration dans les formulaires Web et propose un guide complet sur les implémentations en utilisant Html et CSS.

L’évolution des commutateurs à bascule

Les interrupteurs à bascule sont originaires de commutateurs électriques physiques, datant du début du 20e siècle. Initialement conçus pour des fonctionnalités simples sur les circuits électriques, ces commutateurs ont fourni une méthode tactile aux utilisateurs pour contrôler les appareils. À mesure que la technologie avançait, le concept de bascule est passé dans le domaine numérique. Dans le développement de logiciels, les bascules des fonctionnalités ont émergé dans les années 1970, permettant aux développeurs d’activer ou de désactiver les fonctionnalités sans modifier la base de code. Cette pratique a facilité les processus de test et de déploiement plus lisses.

Dans le contexte de la conception Web, les commutateurs de bascule ont commencé à apparaître dans les interfaces utilisateur en tant que représentations numériques de leurs homologues physiques. Ils ont offert aux utilisateurs un mécanisme familier pour contrôler les paramètres et les préférences, améliorant l’expérience utilisateur globale.

Comprendre les commutateurs de bascule dans les formulaires Web

Un commutateur à bascule dans un formulaire Web est une entrée booléenne ou binaire qui permet aux utilisateurs de sélectionner entre deux options mutuellement exclusives, représentant généralement des états de marche et d’arrêt. Cette fonctionnalité ressemble à des cases à cocher traditionnelles mais fournit une interface plus interactive et visuellement attrayante.

Quand utiliser les commutateurs à bascule

Les commutateurs à bascule sont particulièrement efficaces dans les scénarios où:

• Une action immédiate est requise: Les modifications prennent effet instantanément sans confirmation supplémentaire.
• Les choix binaires sont présentés: L’utilisateur doit choisir entre deux options distinctes: activer ou désactiver une fonctionnalité.

Il est essentiel de s’assurer que l’utilisation des commutateurs à bascule s’aligne sur les attentes des utilisateurs et la conception globale du formulaire Web.

Implémentation de commutateurs à bascule avec HTML et CSS

L’intégration d’un interrupteur à bascule dans votre formulaire Web peut être réalisée de manière transparente à l’aide de HTML et CSS, éliminant le besoin de JavaScript. Cette approche garantit la compatibilité et améliore les performances.

Structure HTML

Commencez par créer la structure fondamentale:

<label class="toggle-switch">
  <input type="checkbox" name="featureToggle">
  <span class="slider"></span>
</label>

Dans cette configuration:

• Le <label> élément avec la classe toggle-switch résume l’intégralité de l’interrupteur, offrant une zone accessible et cliquable.
• Le <input type="checkbox"> représente la fonctionnalité sous-jacente de la bascule.
• Le <span class="slider"> est un élément visuel qui sera conçu pour ressembler au curseur du commutateur.

Style CSS

Pour styliser l’interrupteur à bascule, appliquez le CSS suivant:

/* Hide the default checkbox */
.toggle-switch input {
  display: none;
}

/* The slider */
.slider {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.4s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
}

/* Toggle effect */
input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider::before {
  transform: translateX(26px);
}

Ce CSS accomplit ce qui suit:

• Cache la case par défaut pour permettre un style personnalisé.
• Styles le .slider classe pour créer l’apparence de la piste du commutateur.
• Utilise le ::before pseudo-élément pour représenter le bouton mobile de l’interrupteur.
• Implémente les transitions pour les changements d’état lisse lorsque l’interrupteur est basculé.

La combinaison de ce HTML et CSS crée un interrupteur de bascule fonctionnel et esthétique sans compter sur JavaScript.

Voici la section révisée que vous pouvez ajouter à votre article pour expliquer comment transmettre des valeurs spécifiques pour les états basés comme «vous abonner» et «se désabonner» sous une forme HTML:

Capturer les valeurs de basculement: les états de transmission et de désactivation sous forme

Par défaut, une case à cocher HTML envoie une valeur uniquement au serveur si elle est cochée. S’il n’est pas contrôlé, il n’envoie rien du tout. Le suivi des deux états peut poser des problèmes, tels que si un utilisateur souhaite s’abonner ou se désabonner à partir d’une newsletter. Heureusement, cela peut être géré avec une simple technique HTML.

Voici le comportement dans la soumission de forme standard:

<input type="checkbox" name="subscribe" value="yes">

Si la case à cocher est à carreauxle formulaire soumet:

subscribe=yes

Si la case à cocher est non vérifié, Aucune valeur pour subscribe est soumis du tout. Le serveur ne peut pas distinguer incontrôlé et non représenté.

Pour assurer votre formulaire soumet toujours une valeurmême lorsque la bascule est désactivée, vous pouvez utiliser une entrée cachée à côté de votre case:

<input type="hidden" name="subscribe" value="no">
<input type="checkbox" name="subscribe" value="yes">

Avec ce modèle:

• Si la case à cocher est incontrôlél’entrée cachée envoie subscribe=no.
• Si la case à cocher est à carreauxil remplace l’entrée cachée avec subscribe=yes.

Cette approche garantit que votre serveur reçoit A oui ou Non réponse et peut interpréter adéquatement si l’utilisateur a opté dans ou sorti.

Vous pouvez combiner cette logique avec votre commutateur à bascule de style CSS sans couture:

<label class="toggle-switch">
  <input type="hidden" name="subscribe" value="no">
  <input type="checkbox" name="subscribe" value="yes">
  <span class="slider"></span>
</label>

Cette implémentation maintient vos bascules visuellement attrayants tout en assurant un traitement de données backend fiable. Que vous suiviez les préférences des fonctionnalités, les paramètres de notification ou les statuts d’abonnement, cette technique maintient votre comportement de forme propre, prévisible et cohérent.

Les commutateurs à bascule ont évolué de leurs origines physiques pour devenir des composants intégraux dans les interfaces numériques, offrant aux utilisateurs des contrôles intuitifs dans les formulaires Web. Les entreprises et les développeurs peuvent intégrer efficacement les commutateurs à bascule pour améliorer l’expérience utilisateur en comprenant leur histoire, leur fonctionnalité et leurs meilleures pratiques. Les implémenter à l’aide de HTML et CSS assure la compatibilité, les performances et l’accessibilité, en s’alignant sur les normes de développement Web modernes.