我们通过表单组件来收集各种类型的用户输入,由一个表单容器form和它里面的一系列表单组件组成。
form是存放用户输入的容器,不可嵌套,它管理的所有表单组件都应该作为子孙组件放在它里面。
一个页面可以有多个form容器,每个form都应该分配一个本页内唯一的表单名,然后就可以通过$f.表单名
来取得各自的表单数据,比如$f.x
是获取名为x
的表单数据。$f
跟$v
一样是页面变量,所以翻页时表单数据会被清空。
我们可以通过表达式给表单一个初始数据,然后表单组件就可以编辑初始数据里对应字段的数据了。通常我们会把一个数据库表里的整个x
里的内容作为表单初始数据,经过用户编辑后用$db.update(id, { x: $f.表单名 })
保存回数据库。
当表单加载完成后会触发挂载事件,我们可以利用它来调整表单数据,比如给数组字段一个空数组。
点击属性面板下方的”更多属性”可以看到整个表单数据,还可以在浏览器开发者工具控制台上输入$f
来查看当前页的所有表单数据。
表单组件用来收集用户填写的信息,可以是基本表单控件,比如最常用的input,也可以是各种表单插件。
输入类型有:text(默认)、number、file、checkbox、radio、color、range、password、date、time、datetime-local、week、email、tel、url、search、hidden
略
可以使用简单文本子组件为选项列表,也可以使用数组表达式来动态渲染选项列表,还可以用二维数组分别指定选项值和显示文本。
对应字段值的true或false
表单组件通常放在表单容器内,用来管理表单字段,此时必须填写字段名。字段名可以是简单文本,也可以是带有小数点的路径,还可以是个数组(整数数据项会被作为数组下标),甚至是复杂表达式。
表单组件也可以跟表单容器无关,此时不用填写字段名,开发者必须自行管理用户输入的值$val
, 通常是通过change
事件把$val
存放到某个变量中或直接保存数据库。