用html写一个登录注册界面并连接mysql
时间: 2023-12-18 09:03:20 浏览: 43
这是一个基本的HTML登录注册界面模板,使用PHP脚本连接MySQL数据库验证用户登录信息:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
form {
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 20px;
width: 300px;
margin: auto;
margin-top: 50px;
box-shadow: 0 0 10px #cccccc;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
background-color: #ff0000;
float: right;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<form action="login.php" method="POST">
<div class="imgcontainer">
<img src="avatar.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
```
在上面的代码中有一个 `action="login.php"` 的属性,这是提交表单时需要执行的PHP脚本,下面是一个简单的PHP脚本,用于连接MySQL数据库并验证用户登录信息:
```php
<?php
// 与数据库建立连接
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检查连接是否成功
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// 获取表单提交的数据
$uname = $_POST['uname'];
$psw = $_POST['psw'];
// 查询数据库中是否有匹配的用户名和密码
$sql = "SELECT * FROM users WHERE username='$uname' AND password='$psw'";
$result = mysqli_query($conn, $sql);
// 如果查询成功且有匹配的数据,则登录成功
if (mysqli_num_rows($result) > 0) {
echo "Login success";
} else {
echo "Login failed";
}
mysqli_close($conn);
?>
```
在上面的脚本中,我们首先连接MySQL数据库,然后获取表单提交的数据,接着使用查询语句查询数据库中是否有匹配的用户名和密码,最后根据查询结果输出登录成功或失败的信息。
请注意,以上代码仅供参考,实际应用中可能需要更多的安全检查和错误处理。