登录注册页面代码html
Here's a simple example of a login/registration page in HTML:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="/login" method="post">
<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>
</div>
<div class="container">
<h2>Register</h2>
<form action="/register" method="post">
<label for="reg_username">Username</label>
<input type="text" id="reg_username" name="reg_username" required>
<label for="reg_password">Password</label>
<input type="password" id="reg_password" name="reg_password" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
This code provides a basic structure for a login and registration page using HTML and minimal inline CSS. You can further enhance it by adding validation, styling, and backend functionality as per your requirements.
Sure, here's the continuation of the HTML code with added fields for registration and an example of how you might structure it:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="/login" method="post">
<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>
</div>
<div class="container">
<h2>Register</h2>
<form action="/register" method="post">
<label for="reg_username">Username</label>
<input type="text" id="reg_username" name="reg_username" required>
<label for="reg_email">Email</label>
<input type="email" id="reg_email" name="reg_email" required>
<label for="reg_password">Password</label>
<input type="password" id="reg_password" name="reg_password" required>
<label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
This code adds fields for email and confirm password to the registration form, improving its usability and security. Again, remember to handle the backend validation and processing appropriately for both login and registration functionalities.
