form（鸿蒙3.0要来)JS UI常用容器组件Form）

稳了，鸿蒙3.0要来了！[机智]

近期有博主@旺仔百事通 爆料，鸿蒙3.0或许会在7月发布，同时博主@厂长是关同学也给出了相同答案，表示5月应该是鸿蒙3.0的Beta版内测阶段，7月正式版上架，带来更加便捷的交互能力和协同能力。

另有信息爆料，华为Mate 50将首发搭载鸿蒙（HarmonyOS）3.0。

好消息说完了，接下来我们就言归正传，来看看华为鸿蒙应用开发的JavaScript UI框架中常用的容器组件Form（表单）的基本用法。

在「华为鸿蒙应用开发 6」JavaScript UI组件概述及常用组件List和「华为鸿蒙应用开发 7」JavaScript UI组件的属性、事件和方法两个章节中我们已经接触到了List和Dialog两个容器组件。下面我们就来具体了解下组件Dialog。

一 创建表单

你可以创建一个新项目（可参考「华为鸿蒙应用开发 2」第一个华为鸿蒙（HarmonyOS）应用程序），也可以打开前面创建的项目。这里我们就以「华为鸿蒙应用开发 6」JavaScript UI组件概述及常用组件List 中创建的Components项目为例。

启动DevEco Studio，打开Components项目，进入编辑界面

在右键单击pages，选择新建 > JS page

将JS page name命名为formpage，点击完成。

修改formpage.hml，写入如下代码

<div class="container"> <form onsubmit="onSubmit" onreset="onReset"> <text class="title">输入文本</text> <input type="text" class="input" name="user" id="user"></input> <div class="buttongroup"> <input type="submit">提交</input> <input type="reset">重置</input> </div> </form> </div>

修改formpage.css，写入如下代码

.container { flex-direction: column; justify-content: center; align-items: center } .title { margin-left: 50px; margin-bottom: 50px; } .buttongroup { width: 600px; height: 150px; margin-top: 50px; flex-direction: row; justify-content: space-around; }

修改formpage.js，写入代码如下

import prompt from '@system.prompt'; export default { onSubmit(result) { prompt.showToast({ message: result.value.user }); }, onReset() { prompt.showToast({ message: '你点击了重置按钮' }) } }

修改index.hml，添加一个按钮

<div class="container"> …… <dialog id="dialog" style="margin-bottom: 50%;"> …… </dialog> <button class="button" type="capsule" value="显示表单" @click="showForm"></button> </div>

修改index.css，给按钮添加下边距的样式

…… .button { width: 200px; height: 80px; font-size: 40px; margin-bottom: 5px; } ……

修改index.js，响应“显示表单”按钮点击事件跳转到fompage

import router from '@system.router'; export default { showDialog() { this.$element('dialog').show(); }, hideDialog() { this.$element('dialog').close(); }, showForm() { // 显示表单页面 router.push({ uri: 'pages/formpage/formpage' }) } }

因为在预览器Previewer中单行文本框input无法接收键盘文字输入，影响显示效果，这时我们就要将程序运行在模拟器，或者搭载了鸿蒙操作系统的手机上。为了方便起见，我们就在模拟器中运行本程序。

先在工具栏的设备列表中选择huawei_phone，然后点击工具栏上面的“运行”按钮，或者使用快捷键shift + F10

最后，敲黑板：多看，多思考，多动手！代码一定要亲自动手敲出来！[呲牙][比心]