Utilisez le CSS pour ajouter automatiquement l'astérisque "champ obligatoire" aux entrées de formulaire.

Question

Quelle est la bonne façon de surmonter le fait que ce code ne fonctionnera pas comme prévu ?

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

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

Dans un monde parfait, tous les input obtiendraient 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, et non après l'élément lui-même, mais quelque chose comme cela serait idéal. Sur un site comportant des milliers de champs obligatoires, je peux déplacer l'astérisque devant l'entrée en modifiant une seule ligne ( :after à :before ) ou je peux le déplacer à la fin de l'étiquette ( .required label:after ) ou devant l'étiquette, ou à un endroit de la boîte contenant l'étiquette, etc...

C'est important non seulement au cas où je changerais d'avis sur l'endroit où placer l'astérisque, mais aussi pour les cas particuliers où la mise en page du formulaire ne permet pas de placer l'astérisque dans la position standard. Cela convient également à la validation qui vérifie le formulaire ou met en évidence les contrôles mal remplis.

Enfin, il n'ajoute pas de balises supplémentaires.

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

Answer 1

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

L'image a un espace de 20px sur la droite pour ne pas empiéter sur la flèche du menu déroulant.

Et cela ressemble à ceci :

Answer 2

Voici un simple " CSS uniquement "que j'ai créé et que j'utilise pour ajouter dynamiquement un astérisque rouge sur les étiquettes de requis sans perdre la validation par défaut des navigateurs.

Le code suivant fonctionne parfaitement sur tous les navigateurs et pour tous les éléments principaux du formulaire.

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  order: 1;
  text-transform: capitalize;
  margin-bottom: 0.3em;
}

input,
select,
textarea {
  padding: 0.5em;
  order: 2;
}

input:required+label::after,
select:required+label::after,
textarea:required+label::after {
  content: " *";
  color: #e32;
}

<div class="form-group">
  <input class="form-control" name="first_name" id="first_name" type="text" placeholder="First Name" required>
  <label class="small mb-1" for="first_name">First Name</label>
</div>

<br>

<div class="form-group">
  <input class="form-control" name="last_name" id="last_name" type="text" placeholder="Last Name">
  <label class="small mb-1" for="last_name">Last Name</label>
</div>

Important : Vous devez conserver l'ordre des éléments, c'est-à-dire l'élément d'entrée en premier et l'élément d'étiquette en second. Le CSS va le traiter et le transformer de manière traditionnelle, c'est-à-dire l'étiquette en premier et l'entrée en second.

Answer 3

Nous sommes en 2019 et les réponses précédentes à ce problème ne sont pas utilisées.

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

La grille CSS est la façon de faire des formulaires en 2019 car vous pouvez avoir vos étiquettes précédant vos entrées sans avoir des divs supplémentaires, des travées, des travées avec des astérisques et d'autres reliques.

Voici où nous allons avec un minimum de CSS :

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>

Il est également possible d'ajouter un texte de remplacement, ce qui est fortement recommandé. (Je réponds à cette question à mi-parcours).

Passons maintenant aux 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 placé dans une 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 comme suit 1fr auto o 1fr avec des éléments tels que <p> dans le formulaire à span 1/-1. Vous modifiez les variables dans vos media queries de manière à ce que les boîtes de saisie s'étendent sur toute la largeur sur mobile et comme indiqué ci-dessus sur ordinateur de bureau. Vous pouvez également modifier l'espacement de la grille sur mobile si vous le souhaitez en utilisant l'approche des variables CSS.

Si les cases sont valides, une coche verte devrait apparaître à la place de l'astérisque.

Le SVG en CSS est un moyen d'éviter au navigateur d'avoir à faire un aller-retour avec le serveur pour obtenir une image de l'astérisque. De cette manière, vous pouvez affiner les astérisques, les exemples ici sont à un angle inhabituel, vous pouvez éditer cela comme l'icône SVG ci-dessus est tout à fait lisible. La boîte de visualisation peut également être modifiée pour placer l'astérisque au-dessus ou au-dessous du centre.

Answer 4

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

.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 mettant la même chose sur div.required au lieu de .required input correspondra probablement davantage à ce que vous recherchez, même si elle est un peu moins élégante.

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

Je n'arrête pas de recevoir des votes positifs pour cet article. Cette réponse convenait à l'OP mais ne sera probablement pas la meilleure option dans la plupart des cas. En :after la styntaxe est beaucoup meilleur .

Answer 5

Utiliser 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>