Comment Supprimer des Étiquettes de Champ dans un Formulaire

December 4, 2021

Certains utilisateurs préfèrent ne pas afficher les étiquettes de champ pour faire correspondre au style du formulaire sur leur site, ou ils n’aiment tout simplement pas afficher les étiquettes sur certains champs. Ce guide vous aidera à supprimer les étiquettes de champ dans le formulaire.

A. Pour supprimer des étiquettes de formulaire entières:

1- Si vous souhaitez supprimer toutes les étiquettes de formulaire d’un seul coup, ajoutez simplement les codes CSS suivants dans votre formulaire.

.form-label-left, .form-label-right, .form-label-top { display:none; }


B. Pour supprimer certaines étiquettes de formulaire, procédez comme suit:

Obtenez l’ID de l’étiquette et ajoutez ce code après: {display:none;}

Exemple:

#label_1 {display:none;} <— Ce code masquera une seule étiquette.

#label_1, #label_2 {display:none;} <— Cela masquera deux étiquettes (vous pouvez séparer les identifiants en utilisant une virgule “,”)

Explication:

#label_1: il s’agit de l’ID d’un élément défini. Le sélecteur d’ID est utilisé pour spécifier un style pour un élément unique. L’ID est toujours défini avec un symbole dièse “#”

{display:none;}: la propriété display définit comment un certain élément HTML doit être affiché, mettre la valeur none supprimera totalement cet élément.

Comment obtenir l’identifiant de l’étiquette?

Le moyen le plus simple d’obtenir l’ID d’étiquette est d’utiliser la fonction Inspecter l’élément (Inspect element) du navigateur (comme le navigateur Chrome, Firefox, Safari). Veuillez suivre les étapes ci-dessous:

Sélectionnez l’étiquette du champ et faites un clic-droit. Cliquez sur Inspecter l’élément (Inspect element)

Image: Inspecter l'élément

b. Copiez l’ID de l’étiquette sous l’attribut id

Image: Elément - label_1

Pour l’utiliser dans la zone CSS, ajoutez simplement le symbole numérique # comme préfixe de l’ID. Exemple: #label_1. Ainsi, les codes CSS personnalisés finaux seront: #label_1 {display: none;}

Si vous souhaitez supprimer toutes les étiquettes de formulaire d’un seul coup, vous pouvez utiliser le sélecteur de classe. Exemple: .form-label-left. Les codes finaux seront: .form-label-left {display: none;}

Image: class - form label left

c. Après avoir créé vos codes CSS (par exemple #label_1, #label_2, #label_3 {display:none;} ) ajoutez-les simplement dans votre formulaire en suivant ce guide: Comment injecter des codes CSS personnalisés. N’oubliez pas d’enregistrer vos modifications en cliquant sur le bouton Enregistrer du générateur de formulaire.

Voici un exemple de résultat:

Image: Résultat - Avant et après

Exemple de formulaire: https://form.jotform.com/213362008488961

Généralement, ce guide peut également être utilisé pour supprimer d’autres éléments, pas seulement l’étiquette. Les étapes sont identiques, il suffit de faire le même processus pour récupérer les autres ID d’élément.

Si vous avez des questions ou si vous rencontrez des difficultés avec l’une des étapes ci-dessus, n’hésitez pas à les poster ci-dessous.

Ce guide vous a-t-il aidé ?
Contacter l'assistance :

Notre équipe d'assistance clientèle est disponible 24 heures sur 24 et 7 jours sur 7 et notre temps de réponse moyen est d'une à deux heures.
Notre équipe peut être contactée via :

Forum d'assistance : https://www.jotform.com/answers/

Contacter l'assistance Jotform : https://www.jotform.com/contact/

Envoyer un commentaire:

Jotform Avatar
Ce site est protégé par reCAPTCHA et la Politique de confidentialité ainsi que Les conditions d'utilisation de Google s'appliquent.

Commentaire:

Podo CommentSoyez le premier à commenter.