WOLFRAM

Wolfram 语言与系统参考资料中心
创建高级网页表单

创建高级网页表单

外观规则Autosubmitting
多页表单RepeatingElement 和 CompoundElement
动态表单
虽然 FormFunction 和 FormObject 提供一个简洁的界面便于创建简单的网页表单，该教程将讲述创建更高级网页表单的方法和选项.
外观规则
FormFunction 和 FormObject 接受选项 AppearanceRules，它可用于指定表单的各部分，例如标题以及每个字段显示的形式.

标题和描述

你可以使用带有 "Title" 和 "Description" 的 AppearanceRules 在你的表单中添加标题和子标题.
Wolfram Language code: CloudDeploy[FormFunction["city" -> "City", #city&, AppearanceRules -> <|"Title" -> "What's your city", "Description" -> "This form allows you to input your city"|>]]

SubmitLabel 和 NextLabel

你可以使用 "SubmitLabel" 改变在表单底部按钮上的文本显示.
Wolfram Language code: CloudDeploy[FormFunction["city" -> "City", #city&, AppearanceRules -> <|"SubmitLabel" -> "Go!"|>]]
同样，"NextLabel" 可用于自定义所有字段的文本，除了多页表单中的最后一个字段.

非文本值

AppearanceRules 中的大部分字段不需要字符串.
Wolfram Language code: CloudDeploy[FormFunction["animal" -> "Animal", #animal&, AppearanceRules -> <|"SubmitLabel" -> [image], "Title" -> Import["ExampleData/turtle.jpg"], "Description" -> Style["What is this animal?", Blue] |>]]

RequiredFieldIndicator

"RequiredFieldIndicator" 应用一个函数于需求字段的标签.
Wolfram Language code: CloudDeploy[FormFunction[{"required" -> "Number", "optional" -> "Number" -> 0}, Identity, AppearanceRules -> <|"RequiredFieldIndicator" -> Function[Style[#, Red]] |>]]

ItemLayout

"ItemLayout" 可用于决定在网格中元素显示的形式. 空白行和列被自动删除. 项目布局是响应式的，这意味着布局可适应浏览器窗口的宽度. 具体而言，项目布局在移动Web浏览器中可能看起来有所不同.
默认的 "Horizontal" 对应于一个 2×2 网格.
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Horizontal" |>]["x" -> "text"]]
"Inline" 对应于所有布局在同一行的元素.
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Inline" |>]["x" -> "text"]]
"Vertical" 对应于所有布局在同一列的元素.
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Vertical" |>]["x" -> "text"]]
多页表单
表单可以跨越多页；第一个参数的附加列表指明多页表单.
Wolfram Language code: CloudDeploy[FormFunction[{{"first" -> "Integer"}, {"second" -> "Integer"}}, Identity]]
除首页外所有页面可以被指定为纯函数，这样做会有依赖旧页面的新页面.
Wolfram Language code: CloudDeploy[FormFunction[{{"label" -> "String"}, {{"second", #label } -> "Integer"}&}, Identity]]
你可以使用该技术程序化创建新的字段.
Wolfram Language code: CloudDeploy[FormFunction[{{"number" -> "Integer"}, Table["x" <> ToString[i] -> "String", {i, #number}]&}, Identity]]
注意，不同页面的字段可以有同样的键. 如果发生的话，最新的值会替代旧的值.
动态表单
当其中一个字段依赖另一个且都出现在同样页面时，定义一个表单会有用. 这可以通过使用带有诸如 TemplateSlot 符号的 Wolfram 语言模板语言实现.
Wolfram Language code: CloudDeploy[FormFunction[{"state" -> "USState", "county" -> TemplateSlot["state"][EntityProperty["AdministrativeDivision", "Subdivisions"]]}, Identity]]
依赖于其他字段的字段会自动隐藏直到有足够的信息可以显示，其中有其他字段依赖它的字段会在有填入时自动提交.
Autosubmitting
可以通过 AutoSubmitting 封装强迫当字段被填入时，自动提交整个表单.
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> AutoSubmitting["Integer"], "y" -> "Integer"}, Identity]]
注意，当在输入第一个后选择第二个字段，提交整个表单会导致错误信息出现在第二个字段下.
RepeatingElement 和 CompoundElement
有时在表单中有可变数目的字段会有用. 使用 RepeatingElement 重复一个字段.
Wolfram Language code: CloudDeploy[FormFunction["field" -> RepeatingElement["String", {2, {1, 5}}]]]
使用 RepeatingElement 的第二个参数，可以使子字段依赖其索引.
Wolfram Language code: CloudDeploy[FormFunction["number of occupants" -> RepeatingElement[<|"Interpreter" -> "Integer", "Label" :> "room " <> ToString[i]|>, {{i, 2}, {1, 5}}]]]
CompoundElement 可与 RepeatingElement 一起使用创建字段表格.
Wolfram Language code: CloudDeploy[FormFunction["names" -> RepeatingElement[CompoundElement[<|"first" -> "String", "last" -> "String"|>]]]]
AppearanceRules 选项 "AddLabel" 和 "DeleteLabel" 可用于在 RepeatingElement 中自定义按钮的标签.
Wolfram Language code: CloudDeploy[FormFunction["field" -> RepeatingElement["String"], AppearanceRules -> <|"AddLabel" -> "Add", "DeleteLabel" -> "Delete"|>]]