Première introduction à la page d'inscription au développement PHP

Je pense que tout le monde connaît la page d'inscription. La page d'inscription permet aux utilisateurs de remplir certaines informations, telles que le nom d'utilisateur, le mot de passe, l'adresse e-mail, le sexe, etc., le tout sur notre page d'inscription. Aujourd'hui, nous allons vous apprendre à créer une page d'inscription

Regardez d'abord l'image de la page d'inscription ci-dessous

L'image ci-dessus est relativement simple Sur notre page d'enregistrement, il y a un mot de passe de confirmation de plus que la page de connexion que nous avons créée auparavant. Ceci afin d'éviter que l'utilisateur ne saisisse un mot de passe différent deux fois, ce qui entraînerait une erreur de mot de passe. Nous commencerons à créer notre page HTML dans le chapitre suivant.

Conseils : La page d'inscription que nous vous montrons est la page d'inscription la plus simple. Elle ne comporte qu'un nom d'utilisateur et un mot de passe. Cependant, les pages d'inscription que nous rencontrons dans notre vie quotidienne incluent. numéros de téléphone portable, adresses e-mail, etc. Oui, une fois que tout le monde est familiarisé avec le programme, je pense que vous pouvez créer des pages colorées

Créer les fichiers dont nous avons besoin

< tr>< /tbody>

Nom du fichier

reg.html

reg. .php

yanzhengma.php

文件名

reg.html

reg.php

yanzhengma.php

主要功能

前台注册页面

处理接收reg.html页面传过来的数据，将数据保存到user数据表中

验证码程序

< /td>

<🎜 >Fonctions principales<🎜>

<🎜> <🎜><🎜><🎜>Page d'inscription<🎜>

Traitez les données reçues de la page reg.html et enregistrez les données dans la table de données utilisateur

<🎜><🎜><🎜><🎜>Programme de code de vérification<🎜>

<🎜><🎜><🎜>section suivante

nouveau fichier

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>登陆界面</title>

 <script type="text/javascript">
 function checkinput()
 {

 if($('#name').val() == ''){
 alert("你的用户名不能为空");
 $('#name').focus();
 return false;
 }

 if($('#pwd').val() == ''){
 alert("你的密码不能为空");
 $('#pwd').focus();
 return false;
 }

 if($('#pwd').val() != $('#pwdconfirm').val()){
 alert("你输入的两次密码不一致，请重新输入！");
 $('#pwd').focus();
 return false;
 }
 if($('#yzm').val() == ''){
 alert("你的验证码不能为空");
 $('#yzm').focus();
 return false;
 }
 }
 </script>
 <style type="text/css">

 body{background-color: rgba(223, 255, 231, 0.28)
 }
 .container{
 border-radius: 25px;
 box-shadow: 0 0 20px #222;
 width: 380px;
 height: 400px;
 margin: 0 auto;
 margin-top: 200px;
 background-color: rgba(152, 242, 242, 0.23);
 }
 input{
 width: 180px;
 height: 25px;
 }

 button{
 background-color: rgba(230, 228, 236, 0.93);
 border: none;
 color: #110c0f;
 padding: 10px 70px;
 text-align: center;
 display: inline-block;
 font-size: 16px;
 cursor: pointer;
 margin-top: 30px;
 margin-left: 50px;
 }
 div.right {
 position: relative;
 left: 40px;
 top: 20px;

 }
 </style>


</head>
<body>
<form action="" method="post" onsubmit=" return checkinput();" >
 <div class="container">
 <div class="right">
 <h2>用户注册</h2>

 <p>用 户 名：<input type="text" name="name" id="name"></p>
 <p>密　　码: <input type="password" name="pwd" id="pwd"></p>
 <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p>
 <p>验 证 码：<input type="text" name="yzm" id="yzm">
 <img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"></p>
 <p><button type="submit" value="注册" >立即注册</button></p>
 </div>
 </div>
 </form>
</body>
</html>

soumettre Réinitialiser le code

Opération automatique

Plein écran