如今，我们经常使用复杂的框架和工具链来创建互动表单——但如果你听说，你可以创建智能、动态的表单而无需编写任何传统的JavaScript代码？
在本文中，我们将展示如何使用HMPL轻量级模板引擎，简化客户端和服务器之间的交互过程，来创建一个具有完整功能的异步提交表单。
咱们开始吧！
此处省略内容
🗄️ 项目结构（项目组织结构）注：此处的“项目结构”指的是项目的组织架构和布局。
我们将使用一个简单的文件夹结构。
📁 智能表单文件夹
├── 📁 组件
│ └── 📁 注册组件
│ └── index.html
├── 📁 src
│ ├── global.css
│ ├── global.js
│ └── index.html
├── app.js
└── 路由文件
└── post.js全屏模式，退出全屏
- 服务器：纯 HTML、CSS 和 HMPL 模板。
- 前端：使用 Node.js + Express, 获取表单数据。
没有像 React 或 Vue 这样的框架，甚至没有像 jQuery 这样的库。只有简洁的 web API 和声明式逻辑。
——
🖋️ 表单美化我们先从基本风格开始吧。
src/global.css <!-- 这是全局样式文件路径 -->
/* 身体部分 */
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
padding: 50px;
}
/* 表单部分 */
form {
background: white;
padding: 20px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
max-width: 400px;
margin: auto;
}
/* 表单示例部分 */
.form-example {
margin-bottom: 15px;
}
/* 标签部分 */
label {
display: block;
margin-bottom: 5px;
}
/* 文本输入框和密码输入框样式 */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
/* 提交按钮样式 */
input[type="submit"] {
background-color: #649606;
color: white;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
}
进入全屏 退出全屏
略
📡 搭建服务器我们将设置一个简单的Express服务器，并设置一个用来处理表单提交的POST路由。
app.js
const express = require("express");
const path = require("path");
const cors = require("cors");
const app = express();
const PORT = 8000;
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(path.join(__dirname, "src")));
const postRoutes = require("./routes/post");
app.use("/api", postRoutes);
app.get("/", (_, res) => {
res.sendFile(path.join(__dirname, "src/index.html"));
});
app.listen(PORT, () => {
console.log(`服务器现在运行在 http://localhost:${PORT}`);
});
全屏 退出全屏
routes/post.js
（通常文件名保持不变，这里直接保留英文原文。）
如果必须翻译，可以写作：
路由/POST请求.js
const express = require("express");
const router = express.Router();
router.post("/register", (req, res) => {
const { login, password } = req.body;
if (!login || !password) {
return res.status(400).send("<p style='color: red;'>缺少必要信息！</p>");
}
console.log("用户注册：", login);
res.send(`<p style='color: green;'>欢迎你，${login}！</p>`);
});
module.exports = router;
进入全屏 退出全屏
星号 星号 星号
🧠 智能表单组件（智慧表单组件）这里就是魔法生效的地方。这个表单会使用HMPL的request模块提交数据，你无需编写任何JavaScript事件监听器。
components/注册组件/index.html
<div>
<form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
<div class="form-example">
<label for="login">登录: </label>
<input type="text" name="login" id="login" required />
<br/>
<label for="password">密码: </label>
<input type="password" name="password" id="password" required />
</div>
<div class="form-example">
<input type="submit" value="注册!" />
</div>
</form>
<p>
{{#request
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/api/register"
after="submit:#form"
repeat=false
indicators=[
{
trigger: "pending",
content: "加载中..."
}
]
}}
{{/request}}
</p>
</div>全屏模式 退出全屏
这里出了什么事？
onsubmit用来阻止默认行为。{{#request}}用来捕获表单提交事件。after="submit:#form"指定了请求触发的时间点。indicators用来显示加载状态或提供反馈。
没有手动的 fetch，没有 async/await。所有都是声明式的。
此处省略内容
⚙️ 加载带有 HMPL 的组件内容<!-- 注释：HMPL 为特定术语，保持原文不变 -->
现在让我们用HMPL在页面上动态地显示这个组件。
src/index.html (这是源代码文件路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Smart Form</title>
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/json5/dist/index.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script>
import { compile } from "hmpl-js";
const templateFn = compile(`
{{#request class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/components/Register/index.html"}}{{/request}}
`);
const obj = templateFn();
document.getElementById("wrapper").append(obj.response);
</script>
</body>
</html>
进入全屏 退出全屏
如果你想把代码写得更模块化，可以把这段逻辑放到单独的
global.js文件里。
✅ 成功
你将会得到以下内容：
- 一个干净且样式化的表单
- 使用 HTML + HMPL 实现异步提交
- 验证和反馈——无需编写自定义 JS 逻辑
为什么用这种方法？
- 不需要 JavaScript 框架：无需 React，也无需 Angular。
- 声明式逻辑：你只需描述需要什么结果，而不用关心实现过程。
- 简单且可扩展：非常适合落地页、管理工具和最小化可行产品。
你可以扩展此模式的支持，例如多步骤表单、加载器、错误处理，或具有 repeat 间隔的自动保存等。
💬 最终的想法
构建交互式网页表单再也不需要臃肿的 JavaScript 或复杂的工具链了。使用 HMPL，你可以保持代码简洁、语义清晰且功能强大——非常适合喜欢简洁逻辑和干净代码的开发者。
如果你喜欢这篇文章，给HMPL点个赞！哦 ❤️
感谢大家的阅读，祝您编程愉快！
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦