Modification des styles par défaut des formulaires HTML5

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 des CSS personnalisés pour modifier l’apparence par défaut des formulaires HTML5.

This article provides step-by-step information to change style of an HTML5 form and Introduction to Styles article contains detailed information about various styling aspects of HTML5 forms. Assurez-vous de lire l’article Introduction aux styles avant d’exécuter 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.

images-002-small

Donner du style à vos formulaires

  1. Sélectionner un profil auquel ajouter des styles personnalisés

    Access the CRX DE interface at the URL: https://<server>:<port>/crx/de and create a profile or choose an existing profile. To know how to create a profile, see Creating a new Profile

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

    Naviguez jusqu’au dossier dans lequel vous avez créé le rendu du profil et créez un fichier de feuille de style CSS. Les étapes à suivre sont :

    1. Cliquez avec le bouton droit sur le dossier et sélectionnez Créer-> Créer un fichier à partir du menu

    Pour savoir quelles classes CSS il convient de créer pour un composant particulier de vos formulaires HTML5, consultez Introduction aux styles.

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

    Ouvrez la page de rendu du profil (fichier jsp) dans CRX DE et ajoutez le fichier CSS à la page juste en dessous de la bibliothèque du client 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 .

Sur cette page