为HTML5表单创建CSS样式

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

注意

在CSS类中，请不要更改宽度、高度、边框粗细、顶部、左、右、底部、内边距、边距以及其他位置和大小属性的值。 位置和大小属性的任何更改都会导致表单布局发生更改。

CSS类  （元素） 

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

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

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

注意

某些XFA元素没有名称。 要更改此类组件的样式，请修改该特定类型的所有组件。

对于在AEM Forms Designer中未命名的页面，HTML5表单中的页面会按其数量的增加顺序进行命名。 例如，对于包含两页的HTML5表单，页面名为Page1, Page2。

字段元素

字段元素包含两个嵌套元素：小组件和标题。

构件元素

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

  • 小组件:每个小组件都有这门课。
  • 名称: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类

组件 类型 名称
页面 页 用户定义的名称
或
页面<pageNumber>（默认）
内容区域 contentrea 用户定义的名称
子表单 子表单 用户定义的名称
排除组 exclgroup 用户定义的名称
Draw 绘制 用户定义的名称
字段 字段 用户定义的名称
描述 caption NA
小组件 小组件 小组件开发人员对其进行定义（有关用户定义的小组件，请参阅下节中的表格）

不同字段的CSS类

AEM Forms Designer支持表单中不同类型的字段，如数值字段、小数字段和日期字段。 HTML中的所有这些字段都包含上述CSS类。 它们还包含一些根据字段类型而定的额外类。

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

字段类型 子类型 小组件名称 构件类型 HTML UI标记
按钮
 NA xfaButton
 buttonfieldwidget
 input type=button
CheckButton
 checkboxfield
 XfaCheckBox
 checkboxfieldwidget
 输入类型=checkbox
DateField
 datefield
 dateField
 datefieldwidget
 输入类型=text
DateTimeField
 textfield
 textField
 textfieldwidget 输入类型=text
DecimalField
 numericfield
 numericInput
 numericfieldwidget
 输入类型=text
DropDown
 choicelist
 dropDownListWidget
 choicelistwidget
 选择
ListBox
 choicelist
 listBoxWidget
 choicelistwidget
 ol
NumericField
 numericfield
 numericInput
 numericfieldwidget
 输入类型=text
PasswordField
 passwordfield
 defaultWidget
 passwordfieldwidget
 输入类型=password
单选按钮
 radiofield
 XfaCheckBox
 radiofieldwidget
 input type=radio
TextField
 textfield
 textField
 textfieldwidget
 输入类型=text
TimeField
 textfield
 textField
 textfieldwidget
 输入类型=text

不同绘制元素的CSS类

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

绘制类型 CSS 类
文本 文本
图像 图像
矩形 矩形
Line 折线图

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

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

Styling Inline Errors

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

Styling Inline Warnings

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

Styling Fields with Validation Errors

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

在此页面上