Dans cet article, nous découvrirons le modèle de connexion PHP. Dès que nous parlons d’une application Web, nous avons besoin d’une page de connexion pour y accéder. C'est l'une des conditions de base pour avoir la page de connexion. La page de connexion est l'une des pages obligatoires dont l'accès est restreint dans n'importe quelle application Web. La plupart de la page de connexion ne contient que les deux champs. Habituellement, le nom d’utilisateur est considéré comme le premier champ et le second sera celui du mot de passe. Il n’y a pas d’opinion fixe sur le modèle de page de connexion. Nous pouvons utiliser n'importe quel modèle de page de connexion selon nos besoins commerciaux.
PUBLICITÉ Cours populaire dans cette catégorie DEVELOPPEUR PHP - Spécialisation | Série de 8 cours | 3 tests simulésCommencez votre cours de développement de logiciels libres
Développement Web, langages de programmation, tests de logiciels et autres
Syntaxe :
En ce qui concerne la syntaxe de la page de connexion, il n'y a pas de règle empirique à suivre lorsque vous travaillez sur la conception de la page de connexion. Dans cet article, nous verrons quelques exemples de modèle de connexion. Si nous demandons à 5 personnes de proposer un modèle de page de connexion ou un design, elles pourraient en proposer 5 différents car il n'existe aucune norme industrielle en ce qui concerne son apparence. Ainsi, dans les sections à venir, nous verrons la vue progressive du modèle de page de connexion et comment nous pouvons également créer cette page.
Toute page de connexion en PHP n'est pas possible en utilisant uniquement PHP. Un modèle de connexion PHP combine les différentes autres technologies comme JavaScript, HTML, CSS, base de données MySql, etc. Voyons maintenant le rôle de chaque entité une par une.
HTML : HTML est l'un des éléments de base de toute page Web de l'application. Les informations requises sur la page de connexion seront écrites dans ce HTML uniquement.
Code :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body style="margin-left: 20%; margin: 5%;"> <form method="post" action="" name="login_form"> <div class="form-element"> <label>Username</label> <input type="text" name="username" id="username" required /> </div> <br> <div class="form-element"> <label>Password</label> <input type="password" name="password" id="password" required /> </div> <br> <button type="submit" name="Login" value="Login">Login</button> </form> </body> </html>
Sortie :
Nous pouvons constater que l'apparence et l'interface utilisateur de cette page ne sont pas suffisamment professionnelles pour que nous puissions avancer.
Tout ce qui précède est suffisant pour concevoir une page de connexion. Mais si nous voulons traiter avec la connexion complète, nous devons également disposer du PHP et d'une base de données (MYSQL ou autre).
Maintenant, il est temps de voir différents exemples de pages de connexion. Nous avançons avec le même code HTML mentionné ci-dessus. Nous verrons différents modèles utilisant le code ci-dessus ou apportant quelques modifications au code ci-dessus.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{margin-left: 30%; margin-top: 5%; max-width: 350px;}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
color: blue;
font-size: larger;
border: 1px solid red;
padding: 7px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
background: red;
margin-left: 110px;
padding: 11px;
color: #fff;
}
label{font-weight: 900;}
</style>
</html>Sortie :
Dans ce modèle de page de connexion, nous verrons le plus interactif par rapport au précédent. Nous utiliserons du CSS plus avancé.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h4>Welcome to the Website!</h4>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{
margin-left: 30%;
margin-top: 5%;
max-width: 350px;
background: #c0c078;
}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
font-size: larger;
border: 1px dotted #3406ed;
padding: 10px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
margin-left: 132px;
padding: 7px;
color: red;
}
label{font-weight: 900;}
h4{text-align: center; text-decoration: underline;}
</style>
</html>Sortie :
Dans cet exemple, nous verrons la présentation différente des deux pages de connexion ci-dessus.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<h2>Welcome </h2>
<input type="text" name="username" id="username" placeholder="Username" required />
<input type="password" name="password" id="password" placeholder="Password" required />
<input type="submit" id="submit" value="Let me in" />
</div>
</form>
</body>
<style>
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height:100%;
background: #465151;
}
h2{
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
letter-spacing: 1px;
text-align: center;
}
input {
width: 100%;
line-height: 4;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
#submit{
background-color: #4a77d4;
padding: 25px 14px;
font-size: 15px;
line-height: normal
}
form#login_form {
width: 30%;
margin-left: 30%;
margin-top:100px;
}
::placeholder {
color:#fff;
font-size: 18px;
padding-left: 20px;
}
</style>
</html>Sortie :
La page de connexion PHP est l'une des choses requises en cette ère de révolution numérique. Puisqu'il n'existe aucune norme pour créer un modèle de page de connexion, nous pouvons donc aller de l'avant avec n'importe quel modèle selon nos besoins commerciaux. Il est toujours conseillé d'utiliser la validation côté client avant de publier toute demande de page de connexion sur le serveur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment ouvrir le fichier php
Comment supprimer les premiers éléments d'un tableau en php
Que faire si la désérialisation php échoue
Comment connecter PHP à la base de données mssql
Comment connecter PHP à la base de données mssql
Comment télécharger du HTML
Comment résoudre les caractères tronqués en PHP
Comment ouvrir des fichiers php sur un téléphone mobile
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
