1# form<a name="ZH-CN_TOPIC_0000001163812212"></a> 2 3表单容器，支持容器内input元素的内容提交和重置。 4 5> **说明：** 6>从 API Version 6 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001127284848_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001127284848_section9288143101012"></a> 13 14支持。 15 16## 属性<a name="zh-cn_topic_0000001127284848_section2907183951110"></a> 17 18支持[通用属性](js-components-common-attributes.md)。 19 20## 样式<a name="zh-cn_topic_0000001127284848_section10683162023215"></a> 21 22支持[组件通用样式](js-components-common-styles.md)。 23 24## 事件<a name="zh-cn_topic_0000001127284848_section77341431152917"></a> 25 26处支持[通用事件](js-components-common-events.md)外，还支持如下事件： 27 28<a name="zh-cn_topic_0000001127284848_table1180610218398"></a> 29<table><thead align="left"><tr id="zh-cn_topic_0000001127284848_row8806162153917"><th class="cellrowborder" valign="top" width="22.7022702270227%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127284848_p0807112143914"><a name="zh-cn_topic_0000001127284848_p0807112143914"></a><a name="zh-cn_topic_0000001127284848_p0807112143914"></a>名称</p> 30</th> 31<th class="cellrowborder" valign="top" width="16.881688168816883%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127284848_p380752110397"><a name="zh-cn_topic_0000001127284848_p380752110397"></a><a name="zh-cn_topic_0000001127284848_p380752110397"></a>参数</p> 32</th> 33<th class="cellrowborder" valign="top" width="60.41604160416041%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127284848_p118071121183910"><a name="zh-cn_topic_0000001127284848_p118071121183910"></a><a name="zh-cn_topic_0000001127284848_p118071121183910"></a>描述</p> 34</th> 35</tr> 36</thead> 37<tbody><tr id="zh-cn_topic_0000001127284848_row380713217397"><td class="cellrowborder" valign="top" width="22.7022702270227%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284848_p19132135593918"><a name="zh-cn_topic_0000001127284848_p19132135593918"></a><a name="zh-cn_topic_0000001127284848_p19132135593918"></a>submit</p> 38</td> 39<td class="cellrowborder" valign="top" width="16.881688168816883%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284848_p17807152183918"><a name="zh-cn_topic_0000001127284848_p17807152183918"></a><a name="zh-cn_topic_0000001127284848_p17807152183918"></a><a href="#zh-cn_topic_0000001127284848_table195257111418">FormResult</a></p> 40</td> 41<td class="cellrowborder" valign="top" width="60.41604160416041%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284848_p8807102116392"><a name="zh-cn_topic_0000001127284848_p8807102116392"></a><a name="zh-cn_topic_0000001127284848_p8807102116392"></a>点击提交按钮，进行表单提交时，触发该事件。</p> 42</td> 43</tr> 44<tr id="zh-cn_topic_0000001127284848_row38502504218"><td class="cellrowborder" valign="top" width="22.7022702270227%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284848_p1085019519428"><a name="zh-cn_topic_0000001127284848_p1085019519428"></a><a name="zh-cn_topic_0000001127284848_p1085019519428"></a>reset</p> 45</td> 46<td class="cellrowborder" valign="top" width="16.881688168816883%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284848_p108501958427"><a name="zh-cn_topic_0000001127284848_p108501958427"></a><a name="zh-cn_topic_0000001127284848_p108501958427"></a>-</p> 47</td> 48<td class="cellrowborder" valign="top" width="60.41604160416041%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284848_p2850758423"><a name="zh-cn_topic_0000001127284848_p2850758423"></a><a name="zh-cn_topic_0000001127284848_p2850758423"></a>点击重置按钮后，触发该事件。</p> 49</td> 50</tr> 51</tbody> 52</table> 53 54**表 1** FormResult 55 56<a name="zh-cn_topic_0000001127284848_table195257111418"></a> 57<table><thead align="left"><tr id="zh-cn_topic_0000001127284848_row55251211114111"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127284848_p2052551119411"><a name="zh-cn_topic_0000001127284848_p2052551119411"></a><a name="zh-cn_topic_0000001127284848_p2052551119411"></a>名称</p> 58</th> 59<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127284848_p2525141116412"><a name="zh-cn_topic_0000001127284848_p2525141116412"></a><a name="zh-cn_topic_0000001127284848_p2525141116412"></a>类型</p> 60</th> 61<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127284848_p55251011134114"><a name="zh-cn_topic_0000001127284848_p55251011134114"></a><a name="zh-cn_topic_0000001127284848_p55251011134114"></a>描述</p> 62</th> 63</tr> 64</thead> 65<tbody><tr id="zh-cn_topic_0000001127284848_row352501115412"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127284848_p15525191113412"><a name="zh-cn_topic_0000001127284848_p15525191113412"></a><a name="zh-cn_topic_0000001127284848_p15525191113412"></a>value</p> 66</td> 67<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127284848_p145256112413"><a name="zh-cn_topic_0000001127284848_p145256112413"></a><a name="zh-cn_topic_0000001127284848_p145256112413"></a>Object</p> 68</td> 69<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127284848_p1852512118411"><a name="zh-cn_topic_0000001127284848_p1852512118411"></a><a name="zh-cn_topic_0000001127284848_p1852512118411"></a>input元素的name和value的值。</p> 70</td> 71</tr> 72</tbody> 73</table> 74 75## 方法<a name="zh-cn_topic_0000001127284848_section2279124532420"></a> 76 77支持[通用方法](js-components-common-methods.md)。 78 79## 示例<a name="zh-cn_topic_0000001127284848_section1241545010391"></a> 80 81``` 82<!-- xxx.hml --> 83<form onsubmit='onSubmit' onreset='onReset'> 84 <label>选项一</label> 85 <input type='radio' name='radioGroup' value='radio1'></input> 86 <label>选项二</label> 87 <input type='radio' name='radioGroup' value='radio2'></input> 88 <text>输入文本</text> 89 <input type='text' name='user'></input> 90 <input type='submit'>Submit</input> 91 <input type='reset'>Reset</input> 92</form> 93``` 94 95``` 96// xxx.js 97export default{ 98 onSubmit(result) { 99 console.log(result.value.radioGroup) // radio1 or radio2 100 console.log(result.value.user) // text input value 101 }, 102 onReset() { 103 console.log('reset all value') 104 } 105} 106``` 107 108
