DocumentationAEM 6.4Guide de Forms

Modifiier les styles par défaut des formulaires HTML5 changing-default-styles-of-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • User
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Les formulaires HTML5 sont rendu utilisant des fonctionnalités HTML5 et le style du formulaire rendu est fait utilisant CSS. L’apparence par défaut des formulaires HTML5 est similaire à son rendu PDF. Les développeurs peuvent utiliser une page CSS personnalisée pour modifier l’aspect par défaut des formulaires HTML5.

Cet article contient des informations détaillées sur la modification du style d’un formulaire HTML5 et l’article Introduction aux styles contient des informations détaillées sur divers aspects de style de formulaires HTML5. Assurez-vous d’avoir lu l’article Introduction aux styles avant d’effectuer les étapes mentionnées dans cet article.

Les deux images qui suivent montrent la différence entre les styles par défaut et les styles personnalisés.

pictures-002-small

Donner du style à vos formulaires style-your-forms

  1. Sélection d’un profil pour ajouter des styles personnalisés

    Accédez à l’interface de CRX DE à lʼadresse suivante :https://<server>:<port>/crx/de et créez un profil ou sélectionnez un profil existant. Pour savoir comment créer un profil, consultez la section Créer un profil.

  2. Création d’une feuille de style CSS pour le style des formulaires HTML5

    Accédez au dossier dans lequel vous avez créé le rendu de profil et créez un fichier de feuille de style CSS. Les étapes à suivre sont les suivantes :

    1. Cliquez avec le bouton droit sur le dossier et sélectionnez create -> créer un fichier depuis le menu

    Pour savoir quelles classes CSS créer pour un composant particulier de vos formulaires HTML5, voir Présentation des styles.

  3. Inclure la feuille de style dans le rendu de profil

    Ouvrez la page Rendu du profil (fichier jsp) dans CRX DE et insérez le fichier CSS dans la page juste en dessous de la bibliothèque cliente XFA. Effectuez les étapes suivantes pour inclure le fichier CSS dans le profil.

    1. Recherchez la ligne suivante dans la page du rendu :

      <cq:includeClientLib categories="xfaforms.profile" />

    2. Insérez les éléments suivants sous la ligne ci-dessus pour inclure la feuille de style :

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>

    3. Enregistrez le fichier.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da