为HTML5表单创建CSS样式

注意

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

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

注意

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

元素的CSS类 

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

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

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

注意

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

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

字段元素

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

构件元素

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

  • 构件:每个小组件都有这门课。
  • name:AEM附带的所有小组件都包含小组件名称类。 对于自定义小组件,小组件开发人员提供小组件名称类。
  • type:每个小组件都有一个用户界面元素。 此类定义用户界面元素的类型。
<!--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>

除了类型和名称类之外,字段组件还包含一个名为的附加CSS类 子类型. 子类型标识其是哪种类型的字段,例如NumericField、DateField、TextField。 您可以覆盖子类型类,以修改所有子类型字段的样式。

不同组件的CSS类

组件 类型 名称
页面 用户定义的名称

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

不同字段的CSS类

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

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

字段类型 子类型 小组件名称 构件类型 HTMLUI标记
按钮
NA xfaButton
buttonfieldwidget
input type=button
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
input type=checkbox
DateField
datefield
dateField
datefieldwidget
输入类型=text
DateTimeField
textfield
textField
textfieldwidget 输入类型=text
DecimalField
数字场
numericInput
数字字段小组件
输入类型=text
下拉列表
选择者
dropDownListWidget
选择小组件
选择
ListBox
选择者
listBoxWidget
选择小组件
ol
数值字段
数字场
numericInput
数字字段小组件
输入类型=text
密码字段
密码字段
defaultWidget
密码域小组件
输入类型=password
单选按钮
放射场
XfaCheckBox
辐射场小组
input type=radio
文本字段
textfield
textField
textfieldwidget
输入类型=text
TimeField
textfield
textField
textfieldwidget
输入类型=text

不同绘制元素的CSS类

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

绘制类型 CSS 类
文本 text
图像 图像
矩形 矩形
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 类。

在此页面上