1# form 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12表单容器，支持容器内input元素的内容提交和重置。 13 14 15## 权限列表 16 17无 18 19 20## 子组件 21 22支持。 23 24 25## 属性 26 27支持[通用属性](js-components-common-attributes.md)。 28 29 30## 样式 31 32支持[组件通用样式](js-components-common-styles.md)。 33 34 35## 事件 36 37除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 38 39| 名称 | 参数 | 描述 | 40| -------- | -------- | -------- | 41| submit | FormResult | 点击提交按钮，进行表单提交时，触发该事件。 | 42| reset | - | 点击重置按钮后，触发该事件。 | 43 44**表1** FormResult 45 46| 名称 | 类型 | 描述 | 47| -------- | -------- | -------- | 48| value | Object | input元素的name和value的值。 | 49 50 51## 方法 52 53支持[通用方法](js-components-common-methods.md)。 54 55 56## 示例 57 58```html 59<!-- xxx.hml --> 60<form onsubmit='onSubmit' onreset='onReset'> 61 <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> 62 <label>选项一</label> 63 <input type='radio' name='radioGroup' value='radio1'></input> 64 <label>选项二</label> 65 <input type='radio' name='radioGroup' value='radio2'></input> 66 </div> 67 <text style="margin-left: 50px;margin-bottom: 50px;">输入文本</text> 68 <input type='text' name='user'></input> 69 <div style="width: 600px;height: 150px;margin-top: 50px;flex-direction: row;justify-content: space-around;"> 70 <input type='submit'>Submit</input> 71 <input type='reset'>Reset</input> 72 </div> 73</form> 74``` 75 76```js 77// xxx.js 78export default{ 79 onSubmit(result) { 80 console.log(result.value.radioGroup) // radio1 or radio2 81 console.log(result.value.user) // text input value 82 }, 83 onReset() { 84 console.log('reset all value') 85 } 86} 87``` 88 89 90
