为HTML5表单创建CSS样式 creating-css-styles-for-html-forms

基于XFA的表单模板的HTML5演绎版包含多个HTML元素。 这些元素按顺序排列。 每个元素都有明确定义的CSS类。 您可以使用这些CSS类选择和更改元素的外观。

NOTE
在CSS类中,请勿更改width、height、border-thickness、top、left、right、bottom、padding、margin以及其他位置和大小属性的值。 位置和大小属性的任何更改都会使表单的布局发生变化。

CSS类  用于元素  css-classes-nbsp-for-elements-nbsp

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

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

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

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

对于AEM Forms Designer中未命名的页面,HTML5表单中的页面将按其数量的递增顺序进行命名。 例如,对于具有两个页面的HTML5表单,这些页面将命名为Page1、Page2。

字段元素 field-element

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

小组件元素

构件元素包含用于与用户交互的用户界面元素。 它有三个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>

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

不同组件的CSS类 css-classes-for-different-components

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

Page<pageNumber>(默认)
内容区域
contentarea
用户定义的名称
子表单
子表单
用户定义的名称
排除组
排除组
用户定义的名称
Draw
draw
用户定义的名称
字段
字段
用户定义的名称
题注
题注
NA
小组件
构件
构件开发人员定义它(对于用户定义的构件,请参阅下节中的表)

不同字段的CSS类 css-classes-for-different-fields

AEM Forms Designer支持表单中各种类型的字段,如NumericField、DecimalField和Date Field。 HTML中的所有字段都包含上述CSS类。 它们还包含一些额外的类,具体取决于字段类型。

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

字段类型
子类型
构件名称
构件类型
HTMLUI标记
按钮
NA
xfaButton
buttonfieldwidget
输入类型=按钮
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
输入类型=复选框
日期字段
datefield
日期字段
datefieldwidget
输入类型=文本
日期时间字段
textfield
textField
文本字段小组件
输入类型=文本
DecimalField
numericfield
numericInput
numericfieldwidget
输入类型=文本
下拉列表
choicelist
dropDownListWidget
choicelistwidget
选择
列表框
choicelist
listBoxWidget
choicelistwidget
ol
NumericField
numericfield
numericInput
numericfieldwidget
输入类型=文本
密码字段
密码字段
defaultWidget
passwordfieldwidget
输入类型=密码
单选按钮
无线电场
XfaCheckBox
radiofieldwidget
输入类型=radio
TextField
textfield
textField
textfieldwidget
输入类型=文本
时间字段
textfield
textField
textfieldwidget
输入类型=文本

其他Draw元素的CSS类 css-classes-for-different-draw-elements

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

Draw类型
CSS类
文本
text
图像
图像
矩形
矩形
线条
折线图

设置窗体其他部分的样式 styling-other-parts-of-the-form

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

Styling Inline Errors

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

Styling Inline Warnings

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

Styling Fields with Validation Errors

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2