使用 HTML/CSS、PHP 和 MySQL 登录表单

在本教程中，我们将向您展示如何使用 HTML、PHP 和 MySQL 扩展创建登录表单。当用户需要提交表单以授权他们访问其帐户时，将使用此身份验证表单，例如.

创建登录表单的四个步骤：

1- 创建一个包含表单结构的 HTML 文件;
2- 创建一个 CSS 文件来定义样式;
3- 创建一个 PHP 登录文件，该文件将检查表单字段是否与数据库中表的值匹配;
4- 创建一个主页面的 PHP 文件，logout.

Step 1：

首先，我们将创建一个 HTML 页面 login.php.

login.php：

 <头>
 <元字符集=UTF-8”>
 <！-- 导入样式文件 -->
 
 
 <身体>
 

 <！-- 连接区域 -->
 
 <表单操作=verification.php” method=POST”>
 
登录
 
 <标签><湾>用户名
 

 <标签><湾>密码
 

 <输入类型=submit” id='submit' value='登录' >
 <？php
 if（isset（$_GET['error']））{
 $err = $_GET['error'];
 if（$err==1 || $err==2）
 echo 
用户或密码不正确;
 }
 ？>
 
 

 

Step 2：

该样式将为我们的登录窗口添加格式。

style.css：

body{
 background： #67BE4B;
}
#container{
 宽度：400px;
 margin：0 自动;
 margin-top：10%;
}
/* 有边框形式 */
form {
 width：100%;
 填充：30px;
 边框：1px 实心 #f1f1f1;
背景：#fff;
 box-shadow： 0 0 20px 0 rgba（0， 0， 0， 0.2）， 0 5px 5px 0 rgba（0， 0， 0， 0.24）;
}
#container h1{
 宽度： 38%;
 边距：0 自动;
 填充底部：10px;
}

/* 全角输入 */
input[type=text]， input[type=password] {
 width： 100%;
 填充：12px 20px;
边距：8px 0;
 显示：内联块;
 border： 1px solid #ccc;
 box-sizing： border-box;
}

/* 为所有按钮设置样式 */
input[type=submit] {
 background-color： #53af57;
 颜色：白色;
 填充：14px 20px;
边距：8px 0;
 边框：无;
 cursor： 指针;
 宽度：100%;
}
input[type=submit]：悬停 {
 background-color： 白色;
颜色： #53af57;
 边框：1px 实心 #53af57;
}

Preview：

Step 3：

然后要验证表单，我们需要一个文件来检查表单的字段，但在此之前，不要忘记在数据库中创建user”表：


verification.php：

<？php
session_start（）;
if（isset（$_POST['用户名']） &&isset（$_POST['password']））
{
 // 数据库连接
 $db_username = 'root';
 $db_password = 'mot_de_passe_bdd';
 $db_name = 'nom_bdd';
 $db_host = '本地主机';
 $db = mysqli_connect（$db_host， $db_username， $db_password，$db_name）
 or die（'无法连接到数据库'）;
 
 // 我们应用 mysqli_real_escape_string 和 htmlspecialchars
 // 两个函数来消除任何 SQL 注入攻击和 XSS
 $username = mysqli_real_escape_string（$db，htmlspecialchars（$_POST['username']））;
 $password = mysqli_real_escape_string（$db，htmlspecialchars（$_POST['password']））;
 
 if（$username ！== ” &&$password ！== ”）
 {
 $requete = SELECT count（*） FROM user where 
 nom_utilisateur = '”.$username.”' and mot_de_passe = '.$password.”.'";
 $exec_query = mysqli_query（$db，$requete）;
 $reponse = mysqli_fetch_array（$exec_request）;
 $count = $reponse['count（*）'];
 if（$count！=0） // 正确的用户名和密码
 {
 $_SESSION['username'] = $username;
 header（'位置： principale.php'）;
 }
 else
 {
 header（'Location： login.php？error=1'）; // 不正确的用户或密码
 }
 }
 else
 {
 header（'Location： login.php？error=2'）; // 空白用户或密码
 }
}
else
{
 header（'位置： login.php'）;
}
mysqli_close（$db）;紧密连接
？>

Step 4：

最后一步，服务器检查提供的信息是否正确，如果正确，它会在用户名中创建一个会话并重定向到页面 principale.php.

principale.php：

 <头>
 <元字符集=UTF-8”>
 <！-- 导入样式文件 -->
 
 
 
 

 <！-- 测试用户是否已登录 -->
 <？php
 session_start（）;
 if（$_SESSION['用户名'] ！== ”）{
 $user = $_SESSION['用户名'];
 // 显示一条消息
回显Hello $user， you are connected ”;
 }
 ？>
 
 

 

奖金：

你会问一个问题：我如何注销？这很简单，您可以添加一个注销按钮以及一小段 php 代码来破坏当前会话。

 

 <头>
 <元字符集=UTF-8”>
 <！-- 导入样式文件 -->
 
 
 
 

 
 <跨度>注销
 
 <！-- 测试用户是否已登录 -->
 <？php
 session_start（）;
 if（isset（$_GET['disconnect']））
 { 
 if（$_GET['disconnect']==true）
 { 
 session_unset（）;
 标头（location:login.php”）;
 }
 }
 else if（$_SESSION['用户名'] ！== ”）{
 $user = $_SESSION['用户名'];
 // 显示消息
 echo 
你好$user，你已连接;
 }
 ？>