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