文档AEM 6.4Forms 指南

更改HTML5表单的默认样式 changing-default-styles-of-html-forms

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

创建对象：

  • User
CAUTION
AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

HTML5表单使用HTML5功能进行渲染，并且渲染的表单的样式是使用CSS完成的。 HTML5表单的默认外观与其PDF呈现版本类似。 开发人员可以使用自定义CSS更改HTML5表单的默认外观。

本文提供了用于更改HTML5表单样式的分步信息，以及 样式简介 文章包含有关HTML5表单各种样式方面的详细信息。 在执行本文中所述的步骤之前，请确保已阅读样式文章简介。

以下两幅图像显示了默认样式与自定义样式之间的差异。

图片–002小

设置表单样式 style-your-forms

  1. 选择用于添加自定义样式的配置文件

    在URL中访问CRX DE界面： https://<server>:<port>/crx/de 创建用户档案或选择现有用户档案。 要了解如何创建用户档案，请参阅 创建新用户档案

  2. 创建CSS样式表以为HTML5表单设置样式

    导航到在其中创建配置文件渲染器并创建CSS样式表文件的文件夹。 要遵循的步骤包括

    1. 右键单击文件夹并选择 创建 -> 创建文件 菜单

    要了解要为HTML5表单中的特定组件创建的CSS类，请参阅 样式简介.

  3. 在“配置文件渲染器”中包含样式表

    在CRX DE中打开“配置文件渲染器”页面（jsp文件），并将CSS文件包含在XFA客户端库正下方的页面中。 执行这些步骤以将CSS文件包含在配置文件中。

    1. 在渲染器页面中搜索以下行：

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

    2. 在上面的行下方插入以下内容以包含样式表：

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

    3. 保存文件。

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