首页创建前端表单代码和后端接收数据代码

创建前端表单代码和后端接收数据代码

时间: 2024-08-13 13:06:45 浏览: 92

创建前端表单通常使用 HTML、CSS 和 JavaScript。以下是一个简单的 HTML 表单示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单示例</title> <style> /* 你可以添加一些基本样式 */ .form-container { width: 300px; margin: auto; padding: 20px; border: 1px solid #ccc; } </style> </head> <body> <div class="form-container"> <form id="myForm" action="/submit" method="POST"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="提交"> </form> </div> <script> // JavaScript 用于验证或处理表单数据 (这取决于你的需求) </script> </body> </html> ``` 当用户点击“提交”按钮时，表单数据会通过 POST 请求发送到指定的后端 URL，比如上面的 "/submit"。后端接收数据（例如在 Node.js + Express 中）可能看起来像这样： ```javascript const express = require('express'); const app = express(); app.use(express.json()); // 使用 JSON 解析器 // 假设你有一个 POST 接口 /submit app.post('/submit', (req, res) => { const { name, email } = req.body; // 获取表单数据 if (!name || !email) { return res.status(400).json({ error: '请填写完整姓名和邮箱' }); } // 处理数据（如保存到数据库，发送邮件等） // ... res.send('数据已接收'); }); const PORT = 3000; app.listen(PORT, () => { console.log(`服务器正在监听端口 ${PORT}`); }); ```

阅读全文