Maison > interface Web > tutoriel CSS > Comment ajouter automatiquement un astérisque de champ obligatoire aux entrées de formulaire à l'aide de CSS ?

Comment ajouter automatiquement un astérisque de champ obligatoire aux entrées de formulaire à l'aide de CSS ?

Mary-Kate Olsen
Libérer: 2024-11-03 06:28:02
original
247 Les gens l'ont consulté

How to Automatically Add a Required Field Asterisk to Form Inputs Using CSS?

Méthode pour ajouter automatiquement un astérisque « Champ obligatoire » aux entrées de formulaire à l'aide de CSS

Il est possible d'ajouter automatiquement un astérisque (*) pour indiquer les entrées de formulaire requises sans avoir à inclure un balisage supplémentaire. Une approche consiste à exploiter le pseudo-élément CSS :after pour insérer l'astérisque après les éléments d'entrée.

Cependant, avec cette approche, l'astérisque est inséré après le contenu de l'élément, ce qui rend impossible l'obtention du résultat souhaité. d'avoir l'astérisque apparaissant directement après l'élément lui-même.

Pour surmonter cette limitation et atteindre une solution qui offre la flexibilité et la fonctionnalité souhaitées, envisagez l'approche suivante :

CSS :

<code class="css">.required:after {
    content: " *";
    color: red;
}</code>
Copier après la connexion

HTML:

<code class="html"><label class="required">Name:</label>
<input type="text"></code>
Copier après la connexion

Dans cette approche, le pseudo-élément :after est appliqué à la classe .required, qui est affectée à l'élément d'étiquette. Cela garantit que l'astérisque apparaît après l'étiquette, qui est la position souhaitée pour indiquer que le champ est obligatoire.

Cette solution offre les avantages suivants :

  • Flexibilité pour contrôler la position de l'astérisque par rapport à la saisie du formulaire.
  • Capacité à gérer les cas étranges où la disposition du formulaire empêche l'astérisque d'apparaître dans la position standard.
  • Fonctionne bien avec une validation qui vérifie le formulaire ou met en surbrillance contrôles incomplets.

En utilisant cette technique, vous pouvez ajouter automatiquement un astérisque de champ obligatoire pour former des entrées tout en conservant la flexibilité et en évitant un balisage supplémentaire.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal