Page d'enregistrement de connexion au système de connexion d'enregistrement d'utilisateur PHP
Page de connexion
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陆</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("请输入用户名");
//将光标移动到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("请输入密码");
myform.userpwd.focus();
return false;
}
if (myform.code.value=="")
{
alert("请输入验证码");
myform.code.focus();
return false;
}
}
</script>
<style type="text/css">
.code{
width:80px;
}
.titl{
font-weight:bold;
font-size:20px;
position:relative;
left:50px;
}
.bd{
background-color:#f0f0f0;
width:230px;
}
</style>
</head>
<body>
<form action="logincheck.php" method="post" onsubmit="return init();" name="myform" >
<div class="bd">
<div class="titl">用户登录</div>
<div >
<span >用户名:</span>
<span><input type="text" name="username" id="username" placeholder="请输入用户名" /></span>
</div>
<div >
<span >密　码:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" ></span>
</div>
<div>
<span >验证码:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="请输入验证码"></span>
<span><img src="pic.php" onClick="this.src='pic.php?nocache='+Math.random()" style="cursor:pointer"></span>
</div>
<div >
<span><button class="button">立即登陆</button></span>
<span><a href="register.php">注册</a></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>Explication du code :
La première version du formulaire utilise un tableau pour la mise en page, et cette version utilise une mise en page div
Les attributs du formulaire ajoutent un attribut d'espace réservé, fournissant un message d'invite pouvant décrire la valeur attendue du champ de saisie
Code de vérification ajouté, introduit à l'aide de la balise <img>, lié à un événement onclick, actualisé l'image lorsque en cliquant sur l'image, style= "cursor:pointer" est configuré pour changer la flèche de la souris en une petite forme de main lorsque la souris se déplace vers l'image du code de vérification
L'événement onsubmit est déclenché en cliquant pour vous connecter, et détermine ce qu'il y a à l'intérieur de chaque <input>. S'il n'est pas vide, déplacez le curseur sur <input>, puis renvoyez false et n'effectuez pas l'opération de soumission
Un champ caché est ajouté pour traiter la première page de la page. Jugement de couche, s'il n'existe pas, la soumission échoue et aucun jugement ultérieur n'est nécessaire
Page d'inscription
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册</title>
<script>
function init(){
if(myform.username.value=="")
{
alert("请输入用户名");
//将光标移动到文本框中
myform.username.focus();
return false;
}
if (myform.userpwd.value=="")
{
alert("请输入密码");
myform.userpwd.focus();
return false;
}
if (myform.confirm.value=="")
{
alert("请再输入一次密码");
myform.confirm.focus();
return false;
}
if (myform.code.value=="")
{
alert("请输入验证码");
myform.code.focus();
return false;
}
}
</script>
<style type="text/css">
.code{
width:80px;
}
.titl{
font-weight:bold;
font-size:20px;
position:relative;
left:50px;
}
.bd{
background-color:#f0f0f0;
width:230px;
}
</style>
</head>
<body>
<form action="regcheck.php" method="post" onsubmit="return init();" name="myform" >
<div class="bd">
<div class="titl">用户注册</div>
<div >
<span >用  户 名:</span>
<span><input type="text" name="username" id="username" placeholder="请输入用户名" /></span>
</div>
<div >
<span >密　　码:</span>
<span><input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" ></span>
</div>
<div >
<span >确认密码:</span>
<span><input type="password" name="confirm" id="confirm" placeholder="请再输入一次密码" ></span>
</div>
<div >
<span >验  证 码:</span>
<span><input type="text" name="code" class="code" id="code" placeholder="请输入验证码"></span>
<span><img src="pic.php" onClick="this.src='pic.php?nocache='+Math.random()" style="cursor:pointer"></span>
</div>
<div >
<span><button class="button">立即注册</button></span>
</div>
<span><input type = "hidden" name = "hidden" value = "hidden" /></span>
</form>
</body>
</html>Explication du code :
La première version du formulaire from utilise un tableau pour la mise en page.
Les attributs du formulaire ajoutent un attribut d'espace réservé pour fournir des informations d'invite descriptives pour la valeur attendue du champ de saisie
Code de vérification ajouté, introduit en utilisant la balise <img>, lié à un événement onclick, actualisé l'image lorsque l'image est cliquée, style="cursor :pointer" consiste à définir la flèche de la souris pour qu'elle se transforme en une petite main lorsque la souris se déplace vers le code de vérification image
L'événement onsubmit est déclenché lorsque vous cliquez pour vous connecter, et détermine si chaque <input> est vide, s'il est vide, déplacez le curseur sur <input>, puis renvoie false et n'effectue pas l'opération de soumission
Un champ caché est ajouté pour traiter la première couche de jugement sur la page, s'il n'existe pas, la soumission échoue et. aucun jugement ultérieur n'est requis
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
