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