表单

ui.Field 为其函数构建的控件添加标签:标签为辅助技术命名该控件,点击 标签会聚焦该控件,或点击复选框、开关或单选按钮。Description 和 Error 在控件下方添加文本,辅助技术会连同控件一起朗读它们;错误还会将控件的值 标记为无效,文本输入框会用主题的 Danger 颜色绘制边框。错误为空时控件 保持有效:

var invalid string
if app.email != "" && !strings.Contains(app.email, "@") {
	invalid = "Enter an email address."
}
ui.Field(c, "Email", func() {
	ui.TextInput(c, &app.email)
}).Description("For receipts.").Error(invalid)

所谓控件,是该函数构建的第一个可获得焦点的元素,或它们的组合,例如 单选组。

表单

字段的标签默认位于控件上方,如同网页上的样式。在 ui.Form 中,各字段 的标签自成一列,位于控件旁边,如同 macOS 的表单:右对齐,宽度与最宽的 标签一致,并与控件文本的首行齐平;对于不含文本的控件(如开关)则垂直 居中。

ui.Form(c, func() {
	ui.Field(c, "Name", func() { ui.TextInput(c, &app.name) })
	ui.Field(c, "Plan", func() { ui.Select(c, &app.plan, plans) })
	ui.Field(c, "Sound", func() { ui.Switch(c, &app.sound) })
})

字段组

ui.Fieldset 把若干字段归入一个图例(legend)之下,图例为该组命名; 这些字段的标签与表单中其他字段的标签对齐,Disabled 可以一次性禁用 它们全部:

ui.Form(c, func() {
	ui.Field(c, "Name", func() { ui.TextInput(c, &app.name) })
	ui.Fieldset(c, "Notifications", func() {
		ui.Field(c, "Email", func() { ui.Checkbox(c, &app.mail, "Weekly summary") })
		ui.Field(c, "Sound", func() { ui.Switch(c, &app.sound) })
	}).Disabled(!app.signedIn)
})

拥有自身名称的控件(如带文本的复选框)会保留其名称,而字段的标签则为 围绕它们的分组命名。

无障碍

辅助技术通过字段标签朗读控件,并在其后朗读描述和错误信息;存在错误时 值被标记为无效;字段组是一个由其图例命名的分组。