html5登录页面代码
Here's a simple HTML5 login page code example:
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: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="login.php" method="post">
<h2>Login</h2>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</body>
</html>
This HTML code creates a simple login page with fields for a username and a password, along with a submit button. The form action attribute specifies the URL where the form data will be sent for processing, typically a server-side script like PHP, Python, or Node.js for authentication. Make sure to replace "login.php" with the appropriate server-side script URL for your backend authentication logic.
Certainly! To enhance the functionality of the login page, you would typically integrate it with server-side scripting to handle the authentication process. Below is a continuation of the previous example, adding a PHP script for basic authentication:
php<?php
// login.php
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve username and password from the form
$username = $_POST['username'];
$password = $_POST['password'];
// Your authentication logic goes here (this is a basic example)
// You would typically query a database to verify credentials
$valid_username = 'example_user';
$valid_password = 'example_password';
// Check if username and password match
if ($username === $valid_username && $password === $valid_password) {
// Authentication successful, redirect to a dashboard or home page
header('Location: dashboard.php');
exit;
} else {
// Authentication failed, display an error message
echo '<script>alert("Invalid username or password");</script>';
}
}
?>
In this PHP script (login.php), we receive the username and password submitted through the login form. Then, we compare these credentials with a hardcoded set of valid credentials for demonstration purposes. In a real-world scenario, you'd usually query a database to verify the credentials.
If the credentials match, we can redirect the user to a dashboard or home page (dashboard.php in this case). If the credentials do not match, we display an error message using JavaScript.
Ensure you have a dashboard.php page that users are redirected to upon successful login. This page can serve as the authenticated user's dashboard or landing page.
You should also make sure to handle security aspects like password encryption, preventing SQL injection, and implementing session management for user authentication and authorization.
