Standaardstijlen van HTML5-formulieren wijzigen

HTML5-formulieren worden gegenereerd met HTML5-mogelijkheden en de opmaak van het gegenereerde formulier wordt uitgevoerd met CSS. De standaardweergave van een HTML5-formulier is vergelijkbaar met de PDF-uitvoering ervan. Ontwikkelaars kunnen aangepaste CSS gebruiken om de standaardweergave van HTML5-formulieren te wijzigen.

Dit artikel bevat stapsgewijze informatie over het wijzigen van de stijl van een HTML5-formulier en het artikel Introductie tot stijlen bevat gedetailleerde informatie over diverse opmaakaspecten van HTML5-formulieren. Zorg ervoor dat u Inleiding aan stijlartikel leest alvorens stappen uit te voeren die in dit artikel worden vermeld.

De volgende twee afbeeldingen laten het verschil zien tussen de standaard en aangepaste stijlen.

picture-002-small

Uw formulieren opmaken

  1. Een profiel kiezen om aangepaste stijlen toe te voegen

    Heb toegang tot de interface CRX DE bij URL: https://<server>:<port>/crx/de en maak een profiel of kies een bestaand profiel. Zie Een nieuw profiel maken voor informatie over het maken van een profiel

  2. Een CSS-stijlpagina maken voor het opmaken van de HTML5-formulieren

    Navigeer naar de map waarin u de profielrenderer hebt gemaakt en maak een CSS-stijlbladbestand. De volgende stappen zijn

    1. Klik met de rechtermuisknop op de map en selecteer create -> create File in het menu

    Zie Inleiding tot stijlen om te weten welke CSS-klassen u voor een bepaalde component in uw HTML5-formulieren wilt maken.

  3. Stijlblad opnemen in renderer profiel

    Open de pagina Renderer van het Profiel (jsp- dossier) in CRX DE, en neem het CSS dossier in de pagina net onder de XFA cliëntbibliotheek op. Voer deze stappen uit om het CSS-bestand in profiel op te nemen.

    1. Zoek op de rendererpagina naar de volgende regel:

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

    2. Voeg het volgende onder de bovenstaande regel in om de stijlpagina op te nemen:

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

    3. Sla het bestand op.

Op deze pagina