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

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

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

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

元素的CSS类  css-classes-nbsp-for-elements-nbsp

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

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

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

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

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

字段元素 field-element

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

构件元素

小组件元素包含用于与用户交互的用户界面元素。 它有三个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类 css-classes-for-different-components

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

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

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

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类 css-classes-for-different-draw-elements

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

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

为表单的其他部分设置样式 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
a6ebf046-2b8b-4543-bd46-42a0d77792da