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