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