form

表单（form），用于提交组件内用户输入的</strong>、<strong><switch></switch></strong>、<strong><input/></strong>、<strong><checkbox-group></checkbox-group></strong>、<strong><slider></slider></strong>、<strong><radio-group></radio-group></strong>、<strong><picker></picker></strong>等组件。<br />当单击<strong>form</strong>表单中<strong>form-type</strong>为<strong>submit</strong>的<strong>button</strong>组件时，会将表单组件中的<strong>value</strong>值进行提交，需要在表单组件中加上<strong>name</strong>来作为<strong>key</strong>。</p> <table> <thead> <tr> <th><strong>属性名</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>onSubmit</td> <td>EventHandle</td> <td>-</td> <td>携带<strong>form</strong>中的数据触发<strong>submit</strong>事件。<br /><strong>event.detail = {value : {‘name’: ‘dao14’}, buttonTarget: {‘dataset’: ‘buttonDataset’} }</strong></td> </tr> <tr> <td>onReset</td> <td>EventHandle</td> <td>-</td> <td>表单重置时会触发<strong>reset</strong>事件。</td> </tr> </tbody> </table> <p><a name="PtxqT"></a></p> <h3 id="fhzjsq"><a name="fhzjsq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图示</h3><p><a rel="nofollow" href="http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/67509/AntCloud_zh/1557223392057/form.png"><img src="https://cdn.nlark.com/yuque/0/2021/png/1412131/1619321157304-b96ec670-f8ec-4aa1-8b9b-8d500fe0aa29.png#clientId=u06dbbe00-56bb-4&from=paste&height=1136&id=ufae350e3&margin=%5Bobject%20Object%5D&originHeight=1136&originWidth=814&originalType=url&status=done&style=none&taskId=u4644687f-9c0d-462d-89b6-fb7e081352d&width=814" alt=""></a> <a name="AwRhz"></a></p> <h3 id="9is4tg"><a name="9is4tg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>代码示例</h3><pre><code class="lang-javascript"><form onSubmit="formSubmit" onReset="formReset"> <view class="section section_gap"> <view class="section__title">switch</view> <switch name="switch"/> </view> <view class="section section_gap"> <view class="section__title">slider</view> <slider name="slider" show-value ></slider> </view> <view class="section"> <view class="section__title">input</view> <input name="input" placeholder="please input here" /> </view> <view class="section section_gap"> <view class="section__title">radio</view> <radio-group name="radio-group"> <label><radio value="radio1"/>radio1</label> <label><radio value="radio2"/>radio2</label> </radio-group> </view> <view class="section section_gap"> <view class="section__title">checkbox</view> <checkbox-group name="checkbox"> <label><checkbox value="checkbox1"/>checkbox1</label> <label><checkbox value="checkbox2"/>checkbox2</label> </checkbox-group> </view> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset">Reset</button> </view> </form> </code></pre> <pre><code class="lang-javascript">Page({ formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：', e.detail.value) }, formReset: function() { console.log('form发生了reset事件') } }) </code></pre>