Nodejs中关于jade的 input(type="checkbox") 如何使用

当然可以！让我们来详细解释一下如何在 Node.js 中使用 Jade（现在称为 Pug）来创建一个带有复选框的表单，并解释为什么你在示例代码中看到的行为。

示例代码

假设你有一个简单的 HTML 表单，其中包含一个复选框：

form(action="/submit" method="POST")
  label
    input(name="city", type="checkbox") Beijing

解释

1. form 元素:

   • action="/submit" 指定了表单提交的目标 URL。
   • method="POST" 指定了 HTTP 方法为 POST。

2. label 元素:

   • label 元素用于将文本 “Beijing” 与复选框关联起来。当用户点击文本时，复选框也会被选中或取消选中。

3. input 元素:

   • name="city" 指定了输入字段的名称，这样在表单提交时可以通过 req.body.city 访问到该值。
   • type="checkbox" 指定了这是一个复选框。
   • Beijing 是复选框旁边显示的标签文本。

为什么 Beijing 不显示？

实际上，Beijing 应该会显示在复选框旁边。如果你没有看到它，可能是因为你的模板引擎配置有问题或者你的浏览器缓存了旧版本的页面。

调试步骤

1. 检查模板引擎配置：

   • 确保你已经正确安装并配置了 Pug 模板引擎。
   • 确认你的服务器端代码正确地渲染了 Pug 模板。

2. 清除浏览器缓存：

   • 有时候浏览器会缓存旧版本的页面。尝试清除缓存或使用无痕模式打开页面。

示例服务器端代码

以下是一个简单的 Express 应用程序，用于渲染上面的 Pug 模板：

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index', { title: 'My Form' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

确保你的 Pug 文件（例如 index.pug）位于 views 目录下。

总结

通过以上代码和配置，你应该能够在表单中看到 “Beijing” 文本正确地显示在复选框旁边。如果仍然有问题，请检查你的环境配置和浏览器设置。希望这能帮助你解决问题！