HarmonyOS方舟开发框架(ArkUI):基于JS扩展的Form组件开发指导

sfvcvf

Form是一个表单容器，支持容器内Input组件内容的提交和重置。

1、创建Form组件
在pages/index目录下的hml文件中创建一个Form组件。
<!-- xxx.hml -->
<div class="container">
  <form>
    <input type="text" style="width:80%"></input>
  </form>
</div>
/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

2、实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考通用属性。
<!-- xxx.hml -->
<div class="container">
  <form  id="formId" class="formClass" click-effect="spring-large">
    <input type="text"></input>  
  </form>
</div>

3、设置Form样式
通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.formClass{
  width: 80%;
  padding: 10px;
  border: 1px solid #c3d3e7;
}

4、添加响应事件
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
  <form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
    <div style="flex-direction: column;justify-content: center;align-self: center;">
      <div style="justify-content: center; align-items: center;">
        <label>Option 1</label>
        <input type='radio' name='radioGroup' value='radio1'></input>
        <label>Option 2</label>
        <input type='radio' name='radioGroup' value='radio2'></input>
      </div>
      <div style="margin-top: 30px;justify-content: center; align-items: center;">
        <input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
        <input type="reset" value="Reset" style="width:100px;"></input>
      </div>
    </div>
  </form>
</div>
......

5、场景示例
在本场景中，开发者可以选择相应选项并提交或重置数据。

创建Input组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。

<!-- xxx.hml -->
<div class="container">
   <form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
      <span > Form </span>
  </text>
    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
     <text class="txt">Select 1 or more options</text>
      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
        <label target="checkbox1">Option 1</label>
        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
        <label target="checkbox2">Option 2</label>
        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Select 1 option</text>
       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
         <label target="radio1">Option 1</label>
         <input id="radio1" type="radio" name="myradio"></input>
         <label target="radio2">Option 2</label>
         <input id="radio2" type="radio" name="myradio"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Text box</text>
       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
         <input type="submit">Submit</input>
         <input type="reset">Reset</input>
       </div>
    </div>
  </form>
</div>
......

更多内容请下载附件查看

2021-11-4 18:03 上传 HarmonyOS方舟开发框架(ArkUI)：基于JS扩展的Form组件开发指导.docx

文件大小:

730.01 KB

下载次数:

0

本地下载

16RD supports Paypal , Payment is calculated at the exchange rate of the day. Unable to download please contact 18902843661 (WhatsApp OR wechat number)

关于一牛网在微软浏览器(Microsoft Edge、IE浏览器)警报通告&解决方案!（无法下载直接更换浏览器即可）

*附件为作者发布，与本站无关，如有侵权，请联系客服删除