Utilisez CSS pour ajouter automatiquement un astérisque `` champ obligatoire '' pour former les entrées

Quel est un bon moyen de surmonter le fait regrettable que ce code ne fonctionnera pas comme souhaité:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

Dans un monde parfait, tous les inputs requis recevraient le petit astérisque indiquant que le champ est obligatoire. Cette solution est impossible puisque le CSS est inséré après le contenu de l'élément, pas après l'élément lui-même, mais quelque chose comme ça serait idéal. Sur un site avec des milliers de champs obligatoires, je peux déplacer l'astérisque devant l'entrée avec une modification sur une ligne ( :aftervers :before) ou je peux le déplacer vers la fin de l'étiquette ( .required label:after) ou devant l'étiquette, ou vers une position sur la boîte contenant, etc ...

Ceci est important non seulement au cas où je changerais d'avis sur l'endroit où placer l'astérisque partout, mais aussi pour les cas étranges où la mise en page du formulaire ne permet pas l'astérisque à la position standard. Il joue également bien avec la validation qui vérifie le formulaire ou met en évidence les contrôles mal complétés.

Enfin, cela n'ajoute pas de balisage supplémentaire.

Existe-t-il de bonnes solutions qui présentent tous ou la plupart des avantages du code impossible?

Est-ce ce que tu avais en tête?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

Voir https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

Jouez avec votre structure exacte: http://jsfiddle.net/bQ859/

Bien que ce soit la réponse acceptée, veuillez m'ignorer et utiliser la :aftersyntaxe suggérée ci-dessous. Ma solution n'est pas accessible.

Un résultat similaire pourrait être obtenu en utilisant une image d'arrière-plan d'une image d'un astérisque et en définissant l'arrière-plan de l'étiquette / de l'entrée / du div externe et un remplissage de la taille de l'image de l'astérisque. Quelque chose comme ça:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

Cela placera l'astérisque À L'INTÉRIEUR de la zone de texte, mais en le mettant au div.requiredlieu de.required input sera probablement plus ce que vous recherchez, même s'il est un peu moins élégant.

Cette méthode ne nécessite pas d'entrée supplémentaire.

Pour le mettre exactement dans l'entrée comme il est montré sur l'image suivante:

J'ai trouvé l'approche suivante:

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

Le site sur lequel je travaille est codé en utilisant une mise en page fixe, donc ça me convenait.

Je ne suis pas sûr que ce soit bon pour la conception liquide.

écrire en CSS

.form-group.required .control-label:after {content:"*";color:red;}

et HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

L'image a un espace d'environ 20 pixels sur la droite pour ne pas se chevaucher avec la flèche de sélection de la liste déroulante

Et ça ressemble à ça:

Utilisez jQuery et CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

Je pense que c'est le moyen efficace de faire, pourquoi tant de maux de tête

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

Nous sommes en 2019 et les réponses précédentes à ce problème n'utilisent pas

1. Grille CSS
2. Variables CSS
3. Éléments de formulaire HTML5
4. SVG en CSS

La grille CSS est le moyen de créer des formulaires en 2019, car vous pouvez faire précéder vos entrées de vos étiquettes sans avoir de div supplémentaires, de portées, de portées avec des astérisques et d'autres reliques.

Voici où nous allons avec un CSS minimal:

Le HTML pour ce qui précède:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

Le texte d'espace réservé peut également être ajouté et est fortement recommandé. (Je réponds juste à cette mi-forme).

Maintenant pour les variables CSS:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

Le CSS pour les éléments du formulaire:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

Le formulaire lui-même doit être dans la grille CSS:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

Les valeurs des colonnes peuvent être définies sur 1fr autoou 1fravec quelque chose comme<p> balises du formulaire définies sur span 1 / -1. Vous modifiez les variables dans vos requêtes multimédias afin que les zones de saisie deviennent pleine largeur sur mobile et comme indiqué ci-dessus sur le bureau. Vous pouvez également modifier votre espace de grille sur mobile si vous le souhaitez en utilisant l'approche des variables CSS.

Lorsque les cases sont valides, vous devriez obtenir une coche verte au lieu de l'astérisque.

Le SVG en CSS est un moyen d'éviter au navigateur d'avoir à faire un aller-retour vers le serveur pour obtenir une image de l'astérisque. De cette façon, vous pouvez affiner les astérisques, les exemples ici sont à un angle inhabituel, vous pouvez le modifier car l'icône SVG ci-dessus est entièrement lisible. La zone de visualisation peut également être modifiée pour placer l'astérisque au-dessus ou en dessous du centre.

Cet exemple place un astérisque devant une étiquette pour désigner cette entrée particulière comme un champ obligatoire. J'ai défini les propriétés CSS à l'aide de% et em pour m'assurer que ma page Web est réactive. Vous pouvez utiliser px ou d'autres unités absolues si vous le souhaitez.

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

Ce dont vous avez besoin est: sélecteur requis - il sélectionnera tous les champs avec l'attribut «requis» (donc pas besoin d'ajouter des classes supplémentaires). Ensuite, modifiez les entrées en fonction de vos besoins. Vous pouvez utiliser le sélecteur ': after' et ajouter un astérisque de la manière suggérée parmi d'autres réponses

Vous pouvez obtenir le résultat souhaité en encapsulant le code HTML dans une balise div qui contient la classe "required" suivie de la classe "form-group". * Cependant, cela ne fonctionne que si vous avez Bootstrap.

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

Pour ceux qui finissent ici, mais qui ont jQuery:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }