在小程序的页面上添加一个表单,可以先用一个 form 组件 ... 它里面可以包装一些表单元素 .. 比如文本框,复选框这些东西 .. 先用一个简单的 slider 组件 .. 组件上添加一个 show-value 属性,这样在滑动这个 slider 的时候,会实时地显示 slider 的值 ..
表单一般会带个提交按钮 .. 点击这个按钮以后,会触发表单的 submit 事件,也就是提交事件 .. 在事件处理里面,可以得到表单里的元素上的数据 .. 可以再配置一下提交表单具体要做的事情 .. 比如把数据发送给后端服务接口去处理 ..
用一个 button 组件 .. 按钮上的文字是 提交 .. 上面加上一个 form-type ,把按钮的表单类型设置成 submit .. 它的值还可以是 reset ,表示重置 .. 这样会触发表单的 reset 事件,重置表单上的数据 ..
在表单上可以添加一个事件处理 .. 用一个 bindsubmit ,这个属性的值就是 submit 事件的处理方法 .. 名字可以是 formSubmit ..
打开页面的主逻辑文件 .. 在 Page 里面添加一个事件 .. formSubmit ... event 是它的参数,表示事件 .. 在事件的 detail 里面的 value ,就是表单元素上的值 ..
页面上这个 slider 组件显示有点问题 .. 这跟我给小程序添加的样式有关 .. 在小程序的样式里面 .. 设置一下 form 组件的样式 .. 把 width 设置成 100vw ..
再回到开发者工具 .. 用一下页面上的这个 slider .. 再提交一下 ..
控制台上会输出一个空白的对象 .. 这里我们需要给表单元素起个名字 .. 这样它的值才会包含在 事件对象,detail 下面的 value 属性 ..
在 slider 组件上面 ,添加一个 name 属性,给这个元素起个名字 .. 比如叫它 slider ..
再回到开发者工具试一下 .. 滑动选择一个值 .. 点一下 提交 按钮 .. 这次你会发现,控制台上输出的表单值对象里面,有了一个 slider ... 它的值就是我们在 slider 上选择的值 ..
label
表单元素可以配一个 label,就是标签,说明一下表单元素的作用 ... 添加一组 label .. 标签里的文字可以放在 text 组件里面 ..
我们可以用这个 label 去包装一下表单元素 ..
或者也可以在 label 上面添加一个 for 属性 .. 属性的值就是跟这个标签对应的表单元素上的 id .. 比如 slider .. 然后在这个 slider 表单元素上再添加一个 id 属性 .. 它的值应该是 slider ..