• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <form> Development
2
3
4The **<form>** component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
5
6
7> **NOTE**
8>
9> This component is supported since API version 6.
10
11
12## Creating a <form> Component
13
14Create a **<form>** component in the .hml file under **pages/index**.
15
16```html
17<!-- xxx.hml -->
18<div class="container">
19  <form style="width: 100%; height: 20%">
20    <input type="text" style="width:80%"></input>
21  </form>
22</div>
23```
24
25```css
26/* xxx.css */
27.container {
28  width:100%;
29  height:100%;
30  flex-direction: column;
31  justify-content: center;
32  align-items: center;
33  background-color: #F1F3F5;
34}
35```
36
37![en-us_image_0000001267887873](figures/en-us_image_0000001267887873.png)
38
39
40## Zooming In or Out on a Form
41
42To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
43
44```html
45<!-- xxx.hml -->
46<div class="container">
47  <form  id="formId" class="formClass" click-effect="spring-large">
48    <input type="text"></input>
49  </form>
50</div>
51```
52
53
54## Setting Form Styles
55
56
57Add the **background-color** and **border** attributes.
58
59
60```css
61/* xxx.css */
62.container {
63  width: 100%;
64  height: 100%;
65  flex-direction: column;
66  align-items: center;
67  justify-content: center;
68  background-color: #F1F3F5;
69}
70.formClass{
71  width: 80%;
72  height: 100px;
73  padding: 10px;
74  border: 1px solid #cccccc;
75}
76```
77
78
79![en-us_image_0000001267607913](figures/en-us_image_0000001267607913.gif)
80
81
82## Adding Response Events
83
84To submit or reset a form, add the **submit** and **reset** events.
85
86```html
87<!-- xxx.hml -->
88<div class="container">
89  <form onsubmit='onSubmit' onreset='onReset' class="form">
90    <div style="width: 100%;justify-content: center;">
91      <label>Option 1</label>
92      <input type='radio' name='radioGroup' value='radio1'></input>
93      <label>Option 2</label>
94      <input type='radio' name='radioGroup' value='radio2'></input>
95    </div>
96    <div style="width: 100%;justify-content: center; margin-top: 20px">
97      <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
98      </input>
99      <input type="reset" value="Reset" style="width:120px;"></input>
100    </div>
101  </form>
102</div>
103```
104
105```css
106/* index.css */
107.container{
108  width: 100%;
109  height: 100%;
110  flex-direction: column;
111  justify-items: center;
112  align-items: center;
113  background-color: #F1F3F5;
114}
115.form{
116  width: 100%;
117  height: 30%;
118  margin-top: 40%;
119  flex-direction: column;
120  justify-items: center;
121  align-items: center;
122}
123```
124
125```js
126/* xxx.js */
127import prompt from '@system.prompt';
128export default{
129  onSubmit(result) {
130    prompt.showToast({
131      message: result.value.radioGroup
132    })
133  },
134  onReset() {
135    prompt.showToast({
136      message: 'Reset All'
137    })
138  }
139}
140```
141
142
143![en-us_image_0000001267767885](figures/en-us_image_0000001267767885.gif)
144
145
146## Example Scenario
147
148Select an option and submit or reset the form data.
149
150Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **&lt;form&gt;** component to submit and reset the form data.
151
152```html
153<!-- xxx.hml -->
154<div class="container">
155   <form onsubmit="formSubmit" onreset="formReset">
156 <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
157      <span > Form </span>
158  </text>
159    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
160     <text class="txt">Select 1 or more options</text>
161      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
162        <label target="checkbox1">Option 1</label>
163        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
164        <label target="checkbox2">Option 2</label>
165        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
166       </div>
167       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
168       <text class="txt">Select 1 option</text>
169       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
170         <label target="radio1">Option 1</label>
171         <input id="radio1" type="radio" name="myradio"></input>
172         <label target="radio2">Option 2</label>
173         <input id="radio2" type="radio" name="myradio"></input>
174       </div>
175       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
176       <text class="txt">Text box</text>
177       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
178       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
179         <input type="submit">Submit</input>
180         <input type="reset">Reset</input>
181       </div>
182    </div>
183  </form>
184</div>
185```
186
187```css
188/* index.css */
189.container {
190  width: 100%;
191  height: 100%;
192  flex-direction:column;
193  align-items:center;
194  background-color:#F1F3F5;
195}
196.txt {
197  font-size:33px;
198  font-weight:bold;
199  color:darkgray;
200}
201label{
202  font-size: 20px;
203}
204```
205
206```js
207/* xxx.js */
208import prompt from '@system.prompt';
209export default {
210  formSubmit() {
211    prompt.showToast({
212      message: 'Submitted.'
213    })
214  },
215  formReset() {
216    prompt.showToast({
217      message: 'Reset.'
218    })
219  }
220}
221```
222
223![en-us_image_0000001222967788](figures/en-us_image_0000001222967788.gif)
224