html登录页面代码
Here's a simple example of an HTML login page code:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
width: 300px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin: 5px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="/login" method="POST">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
</body>
</html>
This code creates a simple login form with fields for username and password. When the form is submitted, it sends a POST request to the /login endpoint. You'll need server-side code (like Node.js with Express, Flask, Django, etc.) to handle the form submission and process the login credentials.
Certainly! To complement the HTML login page, you'd typically need server-side code to handle the form submission and process the login credentials. Below, I'll provide a simple example using Node.js with Express:
First, make sure you have Node.js and npm (Node Package Manager) installed on your system.
Initialize a new Node.js project:
bashmkdir loginApp
cd loginApp
npm init -y
Install Express:
bashnpm install express
Create a file named server.js with the following content:
javascriptconst express = require('express');
const bodyParser = require('body-parser');
const app = express();
// Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Serve static files (like CSS, images, etc.)
app.use(express.static('public'));
// Routes
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/login', (req, res) => {
const { username, password } = req.body;
// In a real application, you would check the username and password against a database
// For this example, let's just check if the username is 'admin' and password is 'password'
if (username === 'admin' && password === 'password') {
res.send('Login Successful');
} else {
res.send('Invalid username or password');
}
});
// Start server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Create a folder named public in your project directory, and move the HTML file (index.html) into this folder.
Ensure your directory structure looks like this:
arduinologinApp/
├── public/
│ └── index.html
└── server.js
Now, when you run node server.js in your terminal and visit http://localhost:3000 in your browser, you should see your login page. When you submit the form with the username 'admin' and password 'password', it should display "Login Successful". Otherwise, it will display "Invalid username or password".
This is a very basic example. In a real-world scenario, you'd want to use stronger authentication mechanisms and store user credentials securely. Additionally, you might want to use frameworks like Passport.js for authentication middleware and connect to a database to store user information securely.
