Quelle est la meilleure façon de mettre en évidence un champ obligatoire sur un formulaire Web?

Question

Je ne trouve pas le très souvent "*" très beau - quelqu'un peut-il suggérer une méthode plus jolie ou me donner un exemple?

J'ai essayé de rendre le champ surligné en rouge comme une personne l'a suggéré mais je n'ai pas aimé le look.

Des étiquettes en gras pourraient faire l'affaire.

Mais j'aime vraiment l'idée de "Obligatoire" étant affiché en gris dans le champ jusqu'à ce que le texte soit ajouté. Est-ce que quelqu'un a du code pour ça?

Answer 1

D'une manière générale, les meilleures formes web sont les plus simples qui me demandent de penser le moins . La "norme" qui a évolué est que les champs obligatoires ont un astérisque (*) à côté d'eux. Parfois, l'astérisque est rouge pour l'aider à se démarquer un peu.

Pourquoi combattre la norme?Ne faites pas trop réfléchir vos utilisateurs. Allez avec la norme et gardez votre créativité pour des choses plus importantes.

Answer 2

ajouter style = "bordure: solide rouge clair;" à l'élément

Answer 3

Je n'ai généralement aucune objection à voir (requis) dans une police plus petite soit juste en dessous du nom du champ ou à côté du champ d'entrée.

Je pourrais également voir en utilisant un "filigrane de zone de texte" pour avoir le champ "requis" dedans jusqu'à ce qu'ils mettent l'accent sur le champ et commencent à taper.

Answer 4

Si vous allez utiliser la couleur pour mettre en évidence le champ, gardez à l'esprit que certaines personnes sont daltoniens (donc peut-être fournir un autre indicateur aussi)

Answer 5

J'ai trouvé les réponses sur LukeW.com à la le plus utile. parce qu'il n'y a pas une solution simple ici. Cela dépend du pourcentage de champs requis, du nombre de champs dans votre formulaire et de la durée de vos étiquettes. Pour la grande majorité du Web, les personnes comprennent que le gras est obligatoire et le poids normal est facultatif (si les options sont en gras). Ce n'est qu'après la validation du formulaire que je présenterai à l'utilisateur les zones de saisie requises, mais ignorées, mises en surbrillance.

Answer 6

Si vous utilisez des feuilles de style pour mettre en forme votre code HTML, vous pouvez créer un style pour .mandatory. Par exemple, définissez l'entrée obligatoire pour utiliser ce style, puis vous pouvez jouer avec plus facilement jusqu'à ce que vous ayez le bon mélange de couleur, de bordure et d'autres éléments de style pour convenir à votre conception globale.

HTML

<input id="username" type="text" class="mandatory" /> 

CSS

.mandatory { 
    color: red; 
    font-size: 12pt; 
    font-weight: bold; 
    font-style: italic; 
} 

J'utilise aussi l'astérisque comme l'OP mentionné comme une "sauvegarde".

R

Answer 7

voudrez peut-être vérifier www.PeterBlum.com - Ses roches Validation Professional Package pour la validation et la mise en forme des contrôles. Il a des tutoriels pour l'utilisation et de nombreux exemples ainsi qu'un manuel détaillé.

Answer 8

J'aime la façon dont il est fait dans le ASP.NET AJAX Control Toolkit pour le ValidatorCallout control:

alt text http://i37.tinypic.com/264j7o5.png

Answer 9

Parfois, il est vraiment justifiable de marquer les champs obligatoires et optionnels. Toutefois, avant cela, vous devez vous demander s'il est raisonnable de demander à l'utilisateur des informations non obligatoires. Ceci s'applique notamment aux formulaires d'inscription.

Dans les formes d'enregistrement et tels, il est beaucoup mieux de demander seulement les informations minimales. Après l'enregistrement, l'utilisateur peut, à volonté, remplir des informations facultatives dans des formulaires séparés.

Une fois que toute la vrille inutile a été retirée du formulaire, vous pouvez voir qu'il n'est pas nécessaire de marquer les champs comme obligatoires; soit tout est obligatoire, ou il peut être si évident pour l'utilisateur quels champs sont facultatifs, qu'il n'y aurait pas besoin de donner des indices visuels à ce sujet.