Ajout d'un texte « nécessaire » à un formulaire HTML via CSS

Question

J'ai un <form> qui ressemble à ceci:

<form> 
    <input type="text" name="name" id="name" /><span class="required"></span> 
</form> 

Ce que je veux faire est de montrer un texte, comme * ou Required dans l'élément <span>, au lieu de « codage dur » le texte pour chaque endroit que je besoin du texte de sorte que la forme ressemble à ceci:

[input box] Required 

Je googlé et trouvé que cela pourrait se faire par un style CSS en utilisant content tels que:

.required:before 
{ 
    content: "aaaa" 
} 

Mais, dois-je utiliser cette technique (est-elle dans tous les principaux navigateurs par exemple) ou est-il un moyen plus préféré de faire ce genre de chose?

Merci

MISE À JOUR Ps. Je ne veux pas utiliser JavaScript pour cela, juste CSS simple.

Answer 1

Je suis d'accord que l'ajout de contenu en utilisant CSS n'est pas correct dans la plupart des cas. Cependant, en soulignant visuellement un champ requis, je trouve totalement correct de faire de cette façon.

content n'est pas suffisamment supporté (IE ne le supporte pas du tout IIRC).

Ce que peut faire est que l'intervalle "requis" contient une image de fond contenant le texte "requis" ou un astérisque. L'utilisation de texte graphique a quelques inconvénients, mais aucune solution basée sur jQuery ne le ferait non plus.

Answer 2

Je pense que vous devriez regarder JavaScript. L'ajout de contenu à des balises avec des classes/ID spécifiques est une chose pour laquelle JavaScript est utilisé. Il existe de nombreuses bibliothèques pour accélérer le développement: jQuery, Prototype, Dojo et MooTools.

Answer 3

Vous pouvez utiliser jQuery pour cette chose.

jQuery est une bibliothèque javascript:

écrire en tête ce code

$(document).ready(function(){ 
    $(span[class=required]).innerText='<sometext>'; 
}); 

mais u doit télécharger ce plugin. mais vous pouvez également utiliser javascript

Answer 4

Vous ne devriez certainement pas utiliser CSS pour cela! Dieu non! : p

Comme mentionné ci-dessus, utilisez javascript - mais si vous voulez éviter cela, vous devez utiliser le script côté serveur - Alors, apprenez un peu de PHP.

Answer 5

Vérifiez ceci: Content

ASLO vérifier cette compatibilité

Ne pas utiliser

Je pense que nous ne devrions pas utiliser la déclaration de contenu du tout. Il ajoute du contenu à la page, et CSS est destiné à ajouter une présentation à la page, et non le contenu. Par conséquent, je pense que vous devriez utiliser JavaScript si vous voulez générer dynamiquement du contenu. CSS est le mauvais outil pour ce travail.

Answer 6

Comme d'autres l'ont noté, CSS peut le faire mais il n'est pas entièrement supporté et ce n'est pas non plus la bonne façon d'aborder ce problème. S'il est absolument crucial que le texte "requis" apparaisse, vous devez l'ajouter dans le code HTML. Javascript est une solution appropriée dans une certaine mesure, mais seulement si vous ne pouvez pas éditer le code source. Alors que le contenu peut être généré à l'aide de JS, il ne va évidemment apparaître qu'aux personnes avec JavaScript activé, et cela ajoute à la complexité de la maintenance. Lorsqu'une personne lokos à la page dans cinq ans pour faire un changement de code, ils vont d'abord se demander d'où vient le texte "requis".

Une autre option qui serait serait assez rapide et assez soignée est de donner la durée d'une image d'arrière-plan d'un astérisque et comprennent une clé au-dessus de la forme:

* required field 

Answer 7

Vous devriez vraiment ajouter ce texte dans la HTML Les autres solutions ne sont pas accessibles - les utilisateurs non voyants (par exemple) ne seraient pas conscients que le champ est requis.