Comprendre le problème : plusieurs boutons de soumission dans les formulaires HTML

Créer un formulaire HTML de type assistant nécessite souvent plusieurs boutons de soumission, tels que “Précédent” et “Suivant”. Cependant, un problème courant se pose lorsque vous appuyez sur la touche Entrée : le navigateur déclenche automatiquement le premier bouton de soumission dans l’ordre du balisage. Cela peut être frustrant, surtout si vous souhaitez que le bouton “Suivant” soit activé au lieu du bouton “Précédent”. Le défi consiste à déterminer comment contrôler quel bouton le formulaire soumet lorsque la touche Entrée est pressée.

Dans cet article, nous allons explorer une solution CSS simple à ce problème, en gardant les choses accessibles et en évitant les méthodes JavaScript qui peuvent compliquer l’expérience utilisateur.

La solution présentée : utiliser CSS pour flotter les boutons

Pour résoudre le problème de contrôle de quel bouton de soumission est actif lorsque la touche Entrée est pressée, nous pouvons utiliser la propriété CSS float. En faisant flotter les boutons à droite, nous pouvons manipuler l’arrangement visuel sans changer l’ordre logique des boutons dans la structure HTML.

Solution étape par étape

1. Propriété CSS Float : Utilisez la propriété float pour positionner les boutons. Le bouton “Suivant” apparaîtra en premier dans le balisage HTML mais sera affiché à droite.
2. Clearfix : Une technique de clearfix empêchera les éléments suivants d’être affectés par le flottement.

Exemple de code

Voici comment mettre en œuvre la solution en utilisant HTML et CSS :

Structure HTML

<form action="action" method="get">
    <input type="text" name="abc">
    <div id="buttons">
        <input type="submit" class="f" name="next" value="Suivant">
        <input type="submit" class="f" name="prev" value="Précédent">
        <div class="clr"></div> <!-- Ce div empêche les éléments suivants de flotter avec les boutons. Les garde 'à l'intérieur' de div#buttons -->
    </div>
</form>

Code CSS

.f {
    float: right;
}
.clr {
    clear: both;
}

Avantages de cette approche

• Pas de JavaScript requis : Cette solution ne repose pas sur JavaScript, simplifiant le code et améliorant les performances de la page.
• Accessibilité : Les deux boutons de soumission conservent leur fonctionnalité et peuvent être utilisés avec des technologies d’assistance, garantissant une meilleure expérience pour tous les utilisateurs.
• Préservation des types de boutons : Les deux boutons restent des boutons type="submit", ce qui est essentiel pour la soumission du formulaire.

Conclusion

En utilisant une astuce CSS simple avec la propriété float, vous pouvez gérer efficacement plusieurs boutons de soumission dans un formulaire HTML sans compliquer la structure sous-jacente. Cette méthode est non seulement directe, mais préserve également l’accessibilité et élimine le besoin de JavaScript, en faisant une solution élégante à un problème courant.

Que vous conceviez un formulaire convivial pour un site web ou que vous développiez une interface de type assistant, rappelez-vous que la disposition et le flux logique de vos boutons sont essentiels pour améliorer l’expérience utilisateur.