基于XFA的表单模板的HTML5再现由多个HTML元素组成。 这些元素按顺序排列。 每个元素都有定义良好的CSS类。 您可以使用这些CSS类来选择和更改元素的外观。
在CSS类中,不要更改宽度、高度、边框厚度、顶部、左侧、右侧、底部、填充、边距以及其他位置和大小属性的值。 位置和大小属性的任何更改都会更改表单的布局。
每个元素都包含定义良好的CSS类。 可以修改这些类以更改元素的外观。 除字段和绘制元素外,每个元素都有两个CSS类——类和名类。
Type类表示XFA字段的类型。 可以覆盖type
类以修改特定类型所有元素的样式。
Name类与XFA字段的名称相对应。 您可以覆盖name
类,以修改自定义样式并将其应用于元素。
某些XFA元素没有名称。 要更改此类组件的样式,请修改该特定类型的所有组件。
对于在AEM Forms设计器中未命名的页面,以HTML5表单中的页面编号的顺序递增。 例如,对于包含两页的HTML5表单,页面名称为Page1, Page2。
字段元素包含两个嵌套元素:构件和题注。
构件元素
构件元素包含用户界面元素,用于与用户交互。 它有三个CSS类:
<!--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。 您可以覆盖子类型类以修改所有子类型字段的样式。
组件 | 类型 | 名称 |
页面 | 页 | 用户定义名称 或 Page<pageNumber>(默认) |
内容区域 | contentarea | 用户定义的名称 |
子表单 | 子表单 | 用户定义的名称 |
排除组 | exclgroup | 用户定义的名称 |
Draw | 绘图 | 用户定义的名称 |
字段 | 字段 | 用户定义的名称 |
描述 | caption | NA |
小组件 | 构件 | 构件开发人员定义它(有关用户定义的构件,请参阅下一节中的表) |
AEM Forms设计器支持NumericField、DecimalField和Date Field等表单中的不同类型字段。 HTML中的所有这些字段都包含上述CSS类。 根据字段的类型,它们还包含一些额外类。
每个字段都有一个表示UI元素的关联构件。 下面列出了每个字段的类以及与每个字段关联的构件。
字段类型 | 子类型 | 构件名称 | 构件类型 | HTML UI标签 |
按钮 |
NA | xfaButton |
buttonfieldwidget |
输入类型=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 |
醇 |
NumericField |
numericfield |
numericInput |
numericfieldwidget |
输入类型=text |
PasswordField |
密码字段 |
defaultWidget |
密码域构件 |
输入类型=password |
单选按钮 |
radiofield |
XfaCheckBox |
radiofieldwidget |
输入类型=radio |
TextField |
textfield |
textField |
textfieldwidget |
输入类型=text |
TimeField |
textfield |
textField |
textfieldwidget |
输入类型=text |
您可以使用AEM Forms设计器插入静态绘图元素,如文本和图像。 对于每个绘制元素,一个单独的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类。