OpenHarmony实战开发-form开发指导

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

创建form组件

在pages/index目录下的hml文件中创建一个form组件。

<!-- xxx.hml -->
<div class="container">
  <form style="width: 100%; height: 20%">  
    <input type="text" style="width:80%"></input>
  </form>
</div>

/* xxx.css */
.container {
   
   
  width:100%;
  height:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

实现表单缩放

为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>

设置form样式

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

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