1# form
2
3>  **NOTE**
4>
5>  This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<form>** component allows the content in **input** elements to be submitted and reset.
8
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17Supported
18
19
20## Attributes
21
22The [universal attributes](js-components-common-attributes.md) are supported.
23
24
25## Styles
26
27The [universal styles](js-components-common-styles.md) are supported.
28
29
30## Events
31
32In addition to the [universal events](js-components-common-events.md), the following events are supported.
33
34| Name| Parameter| Description|
35| -------- | -------- | -------- |
36| submit | FormResult | Triggered when the **Submit** button is touched.|
37| reset | - | Triggered when the **Reset** button is clicked.|
38
39**Table 1** FormResult
40
41| Name| Type| Description|
42| -------- | -------- | -------- |
43| value | Object | Values of **name** and **value** of the input element.|
44
45
46## Methods
47
48The [universal methods](js-components-common-methods.md) are supported.
49
50
51## Example
52
53```html
54<!-- xxx.hml -->
55<form onsubmit='onSubmit' onreset='onReset'>
56  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
57    <label>Option 1</label>
58    <input type='radio' name='radioGroup' value='radio1'></input>
59    <label>Option 2</label>
60    <input type='radio' name='radioGroup' value='radio2'></input>
61  </div>
62  <text style="margin-left: 50px;margin-bottom: 50px;">Enter text</text>
63  <input type='text' name='user'></input>
64  <div style="width: 600px;height: 150px;margin-top: 50px;flex-direction: row;justify-content: space-around;">
65    <input type='submit'>Submit</input>
66    <input type='reset'>Reset</input>
67  </div>
68</form>
69```
70
71```js
72// xxx.js
73export default{
74  onSubmit(result) {
75    console.log(result.value.radioGroup) // radio1 or radio2
76    console.log(result.value.user) // text input value
77  },
78  onReset() {
79    console.log('reset all value')
80  }
81}
82```
83
84![001](figures/001.gif)
85