Comment puis-je ajouter des suffixes de texte aux éléments `` pour un meilleur retour des utilisateurs ?

Ajout de suffixes de texte au

Dans le domaine des interfaces utilisateur, il est essentiel de fournir des et un retour intuitif pour guider les utilisateurs. Lorsqu’il s’agit d’entrées numériques, il devient crucial de communiquer les unités de mesure utilisées. Cependant, la norme HTML L'élément n'a pas cette fonctionnalité. Cet article explore une solution pour ajouter des suffixes de texte aux champs de saisie numérique.

En utilisant une combinaison de HTML et de CSS, nous pouvons créer un élément wrapper personnalisé pour chaque entrée. Ce wrapper positionnera le suffixe d'unité comme un pseudo-élément ::after. En utilisant un positionnement absolu, le pseudo-élément reste indépendant de la disposition du champ de saisie, ce qui permet des options de style flexibles.

Dans le wrapper, le pseudo-élément ::after est situé en haut et à droite du champ de saisie. Il contient l'abréviation de l'unité souhaitée comme contenu. Cette approche s'adresse aux scénarios où la saisie de l'utilisateur est relativement courte, garantissant que le suffixe de l'unité reste lisible à côté du numéro.

Pour optimiser l'UX, nous pouvons ajouter une certaine interactivité. Lors du survol ou de la mise au point sur le champ de saisie, le suffixe de l'unité est légèrement décalé vers la gauche. Cette motion vise à s'adapter à l'apparition des boutons fléchés dans certains navigateurs, garantissant que l'unité et les flèches restent visibles lors des interactions de l'utilisateur.

Voici un exemple d'extrait de code démontrant la mise en œuvre :

/* CSS */
div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'ms';
}

.db::after {
  content: 'db';
}

.percent::after {
  content: '%';
}

/* HTML */
<div class="ms">
  <input type="number" id="milliseconds" />
</div>

<hr />

<div class="db">
  <input type="number" id="decibel" />
</div>

<hr />

<div class="percent">
  <input type="number" id="percentages" />
</div>

Grâce à cette technique, les utilisateurs peuvent désormais distinguer intuitivement les valeurs numériques représentant les millisecondes, les décibels ou les pourcentages. En ajoutant ces suffixes de texte subtils, nous améliorons la convivialité globale et la clarté de nos champs de saisie numérique, permettant ainsi aux utilisateurs de fournir des données précises et significatives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!