为HTML5表单创建CSS样式

基于XFA的表单模板的HTML5再现由多个HTML元素组成。 这些元素按顺序排列。 每个元素都有定义良好的CSS类。 您可以使用这些CSS类来选择和更改元素的外观。

CSS类  for elements 

每个元素都包含定义良好的CSS类。 可以修改这些类以更改元素的外观。 除字段和绘制元素外，每个元素都有两个CSS类——类和名类。

• Type类​表示XFA字段的类型。 可以覆盖type类以修改特定类型所有元素的样式。

• Name类​与XFA字段的名称相对应。 您可以覆盖name类，以修改自定义样式并将其应用于元素。

对于在AEM Forms设计器中未命名的页面，以HTML5表单中的页面编号的顺序递增。 例如，对于包含两页的HTML5表单，页面名称为Page1, Page2。

字段元素

字段元素包含两个嵌套元素：构件和题注。

构件元素

构件元素包含用户界面元素，用于与用户交互。 它有三个CSS类：

• 构件:每个小部件都有这个类。
• name:AEM附带的所有构件都包含构件名称类。对于自定义构件，构件开发人员提供构件名称类。
• 类型:每个构件都有一个用户界面元素。此类定义用户界面元素的类型。

<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>
 
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

除了类型和名称类，字段组件还包含另一个名为​subtype​的CSS类。 子类型标识其属于哪种类型的字段，例如，NumericField、DateField、TextField。 您可以覆盖子类型类以修改所有子类型字段的样式。

不同组件的CSS类

不同字段的CSS类

AEM Forms设计器支持NumericField、DecimalField和Date Field等表单中的不同类型字段。 HTML中的所有这些字段都包含上述CSS类。 根据字段的类型，它们还包含一些额外类。

每个字段都有一个表示UI元素的关联构件。 下面列出了每个字段的类以及与每个字段关联的构件。

不同绘制元素的CSS类

您可以使用AEM Forms设计器插入静态绘图元素，如文本和图像。 对于每个绘制元素，一个单独的CSS类与该元素相关联。 下面列出了绘图元素的CSS类的列表。 每个绘图元素都有一个与之关联的绘图类。

设置表单的其他部分的样式

除了HTML表单中的UI组件外观，您还可以更改元素的样式，如内联错误、内联警告和存在验证错误的字段。

Styling Inline Errors

当字段验证导致错误时，当字段处于活动状态时，将显示内联错误。 要更改内联错误的样式，请覆盖CSS ID error-msg。

Styling Inline Warnings

当字段验证导致警告时，当字段处于活动状态时将显示内联警告。 要更改这些内联警告的样式，请覆盖CSS ID warning-msg。

Styling Fields with Validation Errors

当字段验证失败时，构件的样式会发生更改。 通过对构件组件应用CSS类​widgetError​来完成此样式更改。 要修改默认样式，请覆盖​widgetError​类。