Styles intégrés des composants de formulaire adaptatif

Rechercher
AEM 6.2 Forms Guide d'utilisation

Sur cette page

S’applique à : AEM 6.2 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Vous pouvez définir l’aspect général et le style du formulaire adaptatif en spécifiant un fichier CSS ou une bibliothèque client. En outre, vous pouvez appliquer des styles CSS intégrés à différents composants de formulaire adaptatif et prévisualiser les modifications apportées à la volée.

À l’aide de l’image suivante d’un composant de texte, voyons d’abord les différentes parties d’un composant de formulaire adaptatif sur lesquelles vous pouvez appliquer des styles.

Parties d’un composant de formulaire adaptatif

Les différentes parties d’un composant de formulaire adaptatif mentionnées dans l’image ci-dessus sont les suivantes :

A. Libellé : légende du composant.
B. Champ : zone englobant toutes les parties du composant
C. Widget : zone dans laquelle l’utilisateur spécifie ou sélectionne une valeur pour le champ
D. Aide : brève description, description longue et indicateur d’aide du composant

Remarque :

Vous pouvez uniquement définir l’aspect du libellé. Pour modifier le texte du libellé, utilisez la propriété Titre de la zone de texte en mode d’édition. Pour plus d’informations, voir Barre d’outils de la page. 

Application des propriétés de style CSS intégré

Pour ajouter des styles intégrés à un composant :

  1. Ouvrez votre formulaire dans l’éditeur de formulaire, puis choisissez le mode Style. Pour choisir le mode Style, dans la barre d’outils de la page, appuyez sur >Style.

  2. Sélectionnez le composant et appuyez sur le bouton Modifier . Les propriétés de style s’ouvrent dans la barre latérale. 

  3. Cliquez sur un onglet de la barre latérale pour spécifier les propriétés CSS. Vous pouvez définir des propriétés telles que les suivantes :

    • Dimensions et position (paramètre d’affichage, remplissage, hauteur, largeur, marge, position, index z, flottant, clair, débordement)
    • Texte (famille de polices, épaisseur, couleur, taille, hauteur de ligne et alignement)
    • Arrière-plan (image et gradient, couleur d’arrière-plan)
    • Bordure (largeur, style, couleur, rayon)
    • Effets (ombre, opacité)
    • Avancé (permet de saisir un CSS personnalisé pour le composant)

     

  4. De même, vous pouvez appliquer des styles au widget, à la légende et à l’aide.

  5. Appuyez sur Terminé pour confirmer les modifications ou sur Annuler pour annuler les modifications.

Exemple : styles intégrés

Les images suivantes illustrent une zone de texte avant et après l’application des styles intégrés.

Composant de zone de texte avant l’application des propriétés de style intégré

Notez la modification du style de la zone de texte comme illustré ci-dessous après l’application des propriétés CSS suivantes.

Onglet

Propriété CSS

Valeur

Effet

Champ

bordure

Largeur de la bordure = 2px

Couleur de la bordure = noir uni

Crée une bordure large noire 2px autour du champ

Widget

couleur d’arrière-plan

#6495ED

Modifie la couleur d’arrière-plan en CornflowerBlue (#6495ED)

Remarque : vous pouvez spécifier un nom de couleur ou son code hexadécimal dans le champ Valeur.

Libellé

Dimensions et position > largeur

100px

Définit la largeur sur 100 px pour le libellé

Aide - Point d’interrogation

couleur

vert

Modifie la couleur de l’indicateur d’aide en vert

Aide - Description longue

alignement de texte

centre

Aligne la description longue pour faciliter le centrage
Composant de zone de texte après l’application des propriétés de style intégré