<form action="/login" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">登录</button>
</form>
接下来,我们可以用CSS来美化这个表单。
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
最后,使用JavaScript处理表单提交,这只是一个简单的示例。
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
console.log(`用户名: ${username}, 密码: ${password}`);
});
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 这里应该添加实际的验证逻辑
if (username === 'admin' && password === '123456') {
res.send('登录成功');
} else {
res.status(401).send('登录失败');
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});