怎么创建css样式表,为HTML5表单创建CSS样式

为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附带的所有小组件都包含小组件名称类。对于自定义小组件，小组件开发人员提供小组件名称类。

类型:每个小组件都有一个用户界面元素。此类定义用户界面元素的类型。

caption content

widget content

widget content

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

不同组件的CSS类

组件

类型

名称

页面

页

用户定义的名称

或

页面(默认)

内容区域

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​类。