Étiquettes flottantes et comment les utiliser dans votre site Web Joomla

Rédigé par Pietro Strada le 6 Décembre 2025. Publié dans Blog.

Vous les avez peut-être vus dans les champs de formulaire: les étiquettes qui semblent flotter au-dessus du champ lorsque vous tapez. Pouvez-vous les faire dans votre site Web Joomla aussi? Oui, vous pouvez! Brian Teeman explique comment.

Que sont les étiquettes flottantes?

Les étiquettes flottantes sont un modèle de conception d'interface utilisateur souvent utilisé dans les champs de formulaire où le texte de l'espace réservé pour un champ d'entrée se déplace ou "flotte" au-dessus du champ lorsque l'utilisateur commence à taper. Ce modèle a été popularisé par les lignes directrices de Google sur la conception des matériaux.

Comment fonctionnent les étiquettes flottantes:

État initial:
L'étiquette apparaît sous forme de texte d'espace réservé à l'intérieur du champ de saisie.
État ciblé:
Lorsque l'utilisateur clique ou se concentre sur l'entrée, le texte de l'espace réservé anime et se déplace au-dessus du champ d'entrée.
État rempli:
Une fois que l'utilisateur a saisi les données, l'étiquette reste au-dessus du champ de saisie pour fournir le contexte des données saisies.

Avantages des étiquettes flottantes

Efficacité spatiale:
Combine les rôles des étiquettes de texte et de champ, réduisant l'encombrement et économisant de l'espace.
Amélioration de la facilité d'utilisation:
S'assure que le contexte est toujours disponible (par exemple, les utilisateurs peuvent voir ce que le champ représente même après avoir entré des données).
Appel visuel renforcé:
Ajoute un look poli et moderne aux formes.
Accessibilité:
Fournit une meilleure expérience pour les lecteurs d'écran et améliore la facilité d'utilisation pour les utilisateurs malvoyants, par rapport aux espaces réservés qui disparaissent au foyer. L'alternative est de masquer l'étiquette à l'aide de CSS et de ne la rendre visible que pour les lecteurs d'écran. (C'est ce que Joomla fait avec le module de connexion par défaut).

Inconvénients des étiquettes flottantes

Charge cognitive:
Les utilisateurs peuvent d'abord trouver la transition distrayant, surtout si l'animation est trop dramatique ou pas lisse.
Mise en œuvre complexe:
Nécessite la création d'un remplacement Joomla. Les étiquettes flottantes ne sont pas possibles avec le balisage Joomla par défaut pour les champs.
Fonctionnalité réduite de l'espace réservé:
Les étiquettes flottantes ne peuvent pas fournir de conseils détaillés ou d'exemples dans l'espace réservé lui-même (par exemple, « Par exemple, cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer JavaScript pour le visualiser.").
Comportement incohérent:
S'ils ne sont pas bien conçus, les utilisateurs peuvent confondre l'étiquette flottante avec les données saisies.

Mise en œuvre de Joomla

Le CSS pour Bootstrap 5.3 (qui est utilisé par le modèle Cassiopeia) prend en charge nativement les étiquettes flottantes dont vous avez juste besoin pour ajouter les classes CSS requises et structurer le balisage dans l'ordre requis.

Configuration rapide

Enveloppez une paire de

<input class="form-control"> et <label> éléments dans .forme flottante pour activer les étiquettes flottantes avec les champs de formulaire textuels de Bootstrap. A »substituant« est obligatoire sur chaque <entrée> Comme les étiquettes flottantes CSS de Bootstrap utilisent le :placeholder-illustré pseudo-élément. Notez également que le <entrée> doit venir avant le <label>.

Exemple - Module de connexion

Il s'agit d'un remplacement de modèle assez facile à créer. Modifier le balisage pour le champ nom d'utilisateur et mot de passe en ajoutant un supplément <div class="form-floating"> autour des champs et enlevant le class="visuellement caché" de l'étiquette. Le code modifié doit ressembler au code ci-dessous.

Nom d'utilisateur

<div class="input-group">

<div class="form-floating">

<input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Texte::_('MOD_LOGIN_VALUE_USERNAME'); ?>">