• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# form开发指导
2
3form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[form API](../reference/arkui-js/js-components-container-form.md)。
4
5
6## 创建form组件
7
8在pages/index目录下的hml文件中创建一个form组件。
9```html
10<!-- xxx.hml -->
11<div class="container">
12  <form style="width: 100%; height: 20%">
13    <input type="text" style="width:80%"></input>
14  </form>
15</div>
16```
17
18```css
19/* xxx.css */
20.container {
21  width:100%;
22  height:100%;
23  flex-direction: column;
24  justify-content: center;
25  align-items: center;
26  background-color: #F1F3F5;
27}
28```
29
30![zh-cn_image_0000001211069339](figures/zh-cn_image_0000001211069339.png)
31
32
33## 实现表单缩放
34
35为form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
36```html
37<!-- xxx.hml -->
38<div class="container">
39  <form  id="formId" class="formClass" click-effect="spring-large">
40    <input type="text"></input>
41  </form>
42</div>
43```
44
45
46## 设置form样式
47
48
49通过为form添加background-color和border属性，来设置表单的背景颜色和边框。
50
51
52```css
53/* xxx.css */
54.container {
55  width: 100%;
56  height: 100%;
57  flex-direction: column;
58  align-items: center;
59  justify-content: center;
60  background-color: #F1F3F5;
61}
62.formClass{
63  width: 80%;
64  height: 100px;
65  padding: 10px;
66  border: 1px solid #cccccc;
67}
68```
69
70
71![zh-cn_image_0000001208771113](figures/zh-cn_image_0000001208771113.gif)
72
73
74## 添加响应事件
75
76为form组件添加submit和reset事件，来提交表单内容或重置表单选项。
77
78```html
79<!-- xxx.hml -->
80<div class="container">
81  <form onsubmit='onSubmit' onreset='onReset' class="form">
82    <div style="width: 100%;justify-content: center;">
83      <label>Option 1</label>
84      <input type='radio' name='radioGroup' value='radio1'></input>
85      <label>Option 2</label>
86      <input type='radio' name='radioGroup' value='radio2'></input>
87    </div>
88    <div style="width: 100%;justify-content: center; margin-top: 20px">
89      <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
90      </input>
91      <input type="reset" value="Reset" style="width:120px;"></input>
92    </div>
93  </form>
94</div>
95```
96
97```css
98/* index.css */
99.container{
100  width: 100%;
101  height: 100%;
102  flex-direction: column;
103  justify-items: center;
104  align-items: center;
105  background-color: #F1F3F5;
106}
107.form{
108  width: 100%;
109  height: 30%;
110  margin-top: 40%;
111  flex-direction: column;
112  justify-items: center;
113  align-items: center;
114}
115```
116
117```js
118// xxx.js
119import promptAction from '@ohos.promptAction';
120export default{
121  onSubmit(result) {
122    promptAction.showToast({
123      message: result.value.radioGroup
124    })
125  },
126  onReset() {
127    promptAction.showToast({
128      message: 'Reset All'
129    })
130  }
131}
132```
133
134
135![zh-cn_image_0000001234329539](figures/zh-cn_image_0000001234329539.gif)
136
137
138## 场景示例
139
140在本场景中，开发者可以选择相应选项并提交或重置数据。
141
142创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用form组件的onsubmit和onreset事件实现表单数据的提交与重置。
143
144```html
145<!-- xxx.hml -->
146<div class="container">
147   <form onsubmit="formSubmit" onreset="formReset">
148 <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
149      <span > Form </span>
150  </text>
151    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
152     <text class="txt">Select 1 or more options</text>
153      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
154        <label target="checkbox1">Option 1</label>
155        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
156        <label target="checkbox2">Option 2</label>
157        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
158       </div>
159       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
160       <text class="txt">Select 1 option</text>
161       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
162         <label target="radio1">Option 1</label>
163         <input id="radio1" type="radio" name="myradio"></input>
164         <label target="radio2">Option 2</label>
165         <input id="radio2" type="radio" name="myradio"></input>
166       </div>
167       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
168       <text class="txt">Text box</text>
169       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
170       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
171         <input type="submit">Submit</input>
172         <input type="reset">Reset</input>
173       </div>
174    </div>
175  </form>
176</div>
177```
178
179```css
180/* index.css */
181.container {
182  width: 100%;
183  height: 100%;
184  flex-direction:column;
185  align-items:center;
186  background-color:#F1F3F5;
187}
188.txt {
189  font-size:33px;
190  font-weight:bold;
191  color:darkgray;
192}
193label{
194  font-size: 20px;
195}
196```
197
198```js
199// xxx.js
200import promptAction from '@ohos.promptAction';
201export default {
202  formSubmit() {
203    promptAction.showToast({
204      message: 'Submitted.'
205    })
206  },
207  formReset() {
208    promptAction.showToast({
209      message: 'Reset.'
210    })
211  }
212}
213```
214
215![zh-cn_image_0000001234289465](figures/zh-cn_image_0000001234289465.gif)
216