## form表单 [TOC] 表单，将组件内的用户输入的 `<switch/>` `<input/>` `<checkbox/>` `<slider/>` `<radio/>` `<picker/>` 提交。 当点击 `<form/>` 表单中 formType 为 submit 的 `<button/>` 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 ### 事例一  #### wxml ``` <form confirm-type="done" bindsubmit="onConfirm"> <view class="comment-head"> <text bind:tap="toggle">取消</text> <button plain="{{true}}" formType="submit">确定</button> </view> <view class="comments-3"> <view class="comment"> <block wx:for="{{tools.filterArr(comments,3)}}" wx:key="{{index}}"> <comment content="{{item.content}}"> <text slot="after" class="num">+{{item.nums}}</text> </comment> </block> </view> </view> <view class="input-area"> <input value="{{inputValue}}" name="input" type="text" placeholder="请输入您的短评，可输入12字" bindconfirm="onConfirm"/> </view> </form> ``` >1.botton按钮要需要边框需添加`plain="{{true}}"` 绑定表单类型是提交类`formType="submit"` 2.手机键盘下方提交按钮显示完成`confirm-type="done"` 绑定提交事件onConfirm`bindsubmit="onConfirm"` 3.input框添加`name="input"`同样绑定事件`bindconfirm="onConfirm"` #### wxss ``` .comment-head{ display: flex; justify-content: space-between; align-items: center; padding: 30rpx; height: 50rpx; border-bottom:1px solid #ccc; } button{ font-size: 30rpx; font-weight: bold; background: transparent; border:none !important; margin: 0; padding:0; } .input-area{ padding: 30rpx; } .input-area input{ padding: 10rpx; background: #ccc; border-radius: 20rpx; } ``` #### js ``` data: { inputValue:"" }, ``` ``` onConfirm(e) { var value = e.detail.value; //回车提交内容与点击确定提交内容一个是对象一个是字符串，此处进行typeof类型判断，让两值直接相等 if(typeof value != "string"){ value = e.detail.value.input; } //判断短评数组存在并且输入value值不为空或空格时进行comments数组的内容添加，unshift添加在原有comments的第一项 if(this.data.comments&&(value!=" ")&&(value!="")){ this.data.comments.unshift({ content:value, nums:1 }) this.setData({ comments:this.data.comments ， inputValue:" ", }) } } ``` ### 事例二  #### wxml ``` <input type="search" confirm-type="search" bindconfirm="onConfirm" class="search" placeholder="请在此输入搜索内容"></input> <view style="display:{{isShow?'block':'none'}};" class="noMore">没有更多内容了</view> <view style="display:{{isShow?'none':'block'}};"> <block wx:for="{{movies}}" wx:key="index"> <movieItem data="{{item}}" itemId="{{item.id}}"></movieItem> </block> </view> ``` >1.confirm-type的值  2.bindconfirm点击完成按钮时触发，event.detail = {value: value} #### wxss ``` .search{ display: block; box-sizing: border-box; text-align: center; border-bottom: 1px solid gainsboro; font-size:40rpx; height: 100rpx; color: gray; } .noMore{ text-align: center; color: rgb(175, 174, 174); font-size: 30rpx; margin-top: 70rpx; } ``` #### js ``` onConfirm(e) { var value = e.detail.value; http.request({ url: "/search?q=" + value, success: res => { this.handleData(res) } }) }, ``` >提交input中内容后，获取输入的内容，并依照内容发送http请求，处理数据