单选按钮

自适应表单中的单选按钮是一类输入元素,可让用户从一组相关选项中选择一个选项。它由一个小的圆形按钮表示,可以填充该按钮或将其保留为空来指示是否已选中选项。当用户选择一个单选按钮时,组中的其他单选按钮将变为取消选择状态。当存在多个互斥选项且一次只能选择一个选项时,通常会使用单选按钮。

示例

“属性”对话框

在此示例中,使用“选项”元素将单选按钮分组在一起。显示文本​元素用于为项提供标签,数据值​用于指定提交表单时发送到服务器的值。

每个单选按钮选项都有唯一的“数据值”和“显示文本”属性。如果用户选中“1-10”,则在提交表单时将对应的数据值发送到服务器。然后,服务器端脚本可以处理此数据以确定用户选择了哪些选项,并可使用此数据执行各种操作,例如更新表单中的其他字段或将表单数据提交给服务器端脚本进行进一步处理。

此外,可将每个单选按钮配置为每个选项采用不同的处理值,并可使用自适应表单规则编辑器设置此项。

用途

有若干原因要在表单中使用单选按钮,这些原因包括:

  • 有限选择:单选按钮用于提供预定义选项列表以供用户从中选择,并且一次只能选择一个选项。当选项数量有限且互斥时,这很有用。

  • 清楚呈现:单选按钮清楚且易于理解,可让用户轻松了解他们选择的内容。

  • 一致性:使用单选按钮可确保以一致的标准化方式向用户呈现选项,使他们能够更轻松地理解表单并与之交互。

  • 更易于使用:单选按钮易于使用,特别适合不熟悉技术或行动受限的用户。

版本和兼容性

作为 Cloud Service 核心组件 2.0.4 和 AEM 6.5.16.0 Forms 或更高版本核心组件 1.1.12 的一部分,自适应表单折叠面板核心组件于 2023 年 2 月发布。下表显示所有支持的版本、AEM 兼容性以及相应文档的链接:

组件版本 AEM as a Cloud Service AEM 6.5.16.0 Forms 或更高版本
v1 兼容
版本 2.0.4 和更高版本
兼容
版本 1.1.12 及更高但低于 2.0.0 的版本。

有关核心组件版本的信息,请参阅核心组件版本文档。

技术详细信息

可在 GitHub 上的技术文档中获得关于自适应表单单选按钮核心组件的最新信息。有关开发核心组件的更多信息,请参阅核心组件开发人员文档

“配置”对话框

通过“配置”对话框,可轻松地自定义您为访客提供的单选按钮体验。还可轻松地定义单选按钮选项,从而营造一种无缝的用户体验。

“基本”选项卡

  • 名称 - 可在表单和规则编辑器中通过唯一名称轻松地标识表单组件,但该名称不得包含空格或特殊字符。

  • 标题 - 通过组件的标题,可轻松地标识表单中的组件,默认情况下,标题显示在该组件的顶部。如果不添加标题,则显示该组件的名称而非标题文本。

  • 隐藏标题 - 选中此选项以隐藏该组件的标题。

    在​选项​选项卡中,您可以使用​添加​按钮添加数据值和显示文本对。添加新选项后,可以执行以下操作:

    • 数据值 - 通过此选项,可输入在选择某个选项时要提交的内容。
    • 显示文本 - 通过此选项,可输入要在自适应表单中显示的内容。
    • 删除 - 点击或单击此选项可删除单选按钮的选项。
    • 重新排列 - 点击或单击并拖动以重新排列选项的顺序。
  • 绑定引用 - 绑定引用是对存储在外部数据源中并在表单中使用的数据元素的引用。通过绑定引用,可动态地将数据绑定到表单字段,以使表单可显示来自数据源的最新数据。例如,可使用绑定引用,根据输入到表单中的客户 ID,在该表单中显示该客户的姓名和地址。还可使用绑定引用,通过输入到表单中的数据更新数据源。这样通过 AEM Forms 即可创建与外部数据源交互的表单,从而为收集和管理数据提供一种无缝的用户体验。

  • 提交的值的数据类型 - 此选项指定在选择任何选项时发送的值的数据类型。如果将​提交的值的数据类型​设置为 Number,而您在​选项​选项卡上将字符串数据添加到​数据值,则屏幕显示一条 Value type mismatch 错误消息。

  • 默认选项 - 此选项可让您添加表单加载时预先选择的默认值。如果将​提交的值的数据类型​设置为 Number,而您将字符串数据添加到​默认选项,则屏幕显示一条 Value type mismatch 错误消息。

  • 显示选项 - 此选项用于设置自适应表单中单选按钮的视觉对齐方式。支持的两个选项为:

    • 水平 - 选择此选项后,单选按钮在自适应表单中从左到右显示。
    • 垂直 - 选择此选项后,单选按钮在自适应表单中从上到下显示。
  • 隐藏组件 - 选中此选项以从表单中隐藏该组件。仍可访问该组件作其他用途,如在规则编辑器中使用它进行计算。当需要存储用户无需看到或直接更改的信息时,此项很有用。

  • 禁用组件 - 选中此选项以禁用该组件。被禁用的组件不再活跃或最终用户无法编辑它。用户可看到但无法修改字段的值。仍可访问该组件作其他用途,如在规则编辑器中使用它进行计算。

  • 只读 - 选中此选项以使组件不可编辑。用户可看到但无法修改字段的值。仍可访问该组件作其他用途,如在规则编辑器中使用它进行计算。

“验证”选项卡

“验证”选项卡

  • 必需 - 如果要在自适应表单中显示该组件,请选中此选项。选中此选项后,无法在​基本​选项卡中选择​隐藏组件​或​禁用组件

  • 错误消息 - 通过此选项,可输入如果选中了​必需​复选框并将表单字段留空,所显示的消息。

  • 脚本验证消息 - 通过此选项,可输入如果脚本验证失败,所显示的消息。

“帮助内容”选项卡

“帮助内容”选项卡

  • 简短描述 - 简短描述是一段简短的文字说明,其中提供关于特定表单字段的用途的其他信息或阐述。它帮助用户了解应将什么类型的数据输入到字段中,并可提供准则或示例以帮助确保所输入的信息有效且符合预期的标准。默认情况下,简短描述保持隐藏状态。启用​始终显示简短描述​选项以在组件下方显示它。

  • 始终显示简短描述 - 启用该选项以在组件下方显示简短描述。

  • 帮助文本 - 帮助文本是指提供给用户以帮助其正确填写表单字段的其他信息或指导。当用户单击组件旁的“帮助”图标 (i) 时显示它。帮助文本提供比表单字段的标签或占位符文本更详细的信息,旨在帮助用户了解该字段的要求或限制。它还可提供建议或示例,以使填写表单更轻松且更准确。

“辅助功能”选项卡

“辅助功能”选项卡

屏幕阅读器文本 - 屏幕阅读器文本是指专供由视障人士使用的屏幕阅读器等辅助技术读取的附加文本。此文本提供表单字段用途的音频描述,并可包括关于字段的标题、描述、名称和任何相关消息(自定义文本)的信息。屏幕阅读器文本帮助确保包括视障用户在内的所有用户均可访问表单,并使其完整地了解表单字段及其要求。

“设计”对话框

“设计”对话框用于定义和管理单选按钮组件的 CSS 样式。

“样式”选项卡

该选项卡用于定义和管理组件的 CSS 样式。自适应表单单选按钮核心组件支持 AEM 样式系统

“样式设计”对话框

  • 默认 CSS 类:可为自适应表单单选按钮核心组件提供默认 CSS 类。

  • 允许使用的样式:可通过提供名称和表示样式的 CSS 类而定义样式。例如,您可以创建一个名为“bold text”的样式,并提供 CSS 类“font-weight: bold”。可使用这些样式或将其应用于自适应表单编辑器中的自适应表单。要应用样式,请在自适应表单编辑器中选择要将样式应用于的组件,导航到“属性”对话框,然后从​样式​下拉列表中选择所需的样式。如果您需要更新或修改样式,只需返回“设计”对话框,在“样式”选项卡中更新样式,然后保存更改。

在此页面上