创建前端表单代码和后端接收数据代码
时间: 2024-08-13 17:06:45 浏览: 94
创建前端表单通常使用 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}`);
});
```
阅读全文