Pengenalan pertama kepada halaman pendaftaran pembangunan PHP

Saya percaya semua orang biasa dengan halaman pendaftaran Halaman pendaftaran membolehkan pengguna mengisi beberapa maklumat, seperti nama pengguna, kata laluan, e-mel, jantina, dll., semuanya di halaman pendaftaran kami. Hari ini kami akan mengajar anda cara membuat halaman pendaftaran

Pertama lihat gambar halaman pendaftaran di bawah

Gambar di atas agak mudah halaman pendaftaran kami, terdapat satu lagi kata laluan pengesahan daripada halaman log masuk yang kami buat sebelum ini. Ini adalah untuk mengelakkan pengguna daripada memasukkan kata laluan yang berbeza dua kali, mengakibatkan ralat kata laluan Kami akan mula membuat halaman HTML kami dalam bab seterusnya

Petua: Halaman pendaftaran yang kami tunjukkan kepada anda adalah halaman pendaftaran yang paling mudah, namun, halaman pendaftaran yang kami temui dalam kehidupan seharian kami nombor telefon bimbit, alamat e-mel, dsb. Ya, setelah semua orang sudah biasa dengan program ini, saya percaya anda boleh mencipta halaman berwarna-warni

Buat fail yang kami perlukan

Nama failreg.html reg .phpyanzhengma.php

文件名

reg.html

reg.php

yanzhengma.php

主要功能

前臺(tái)注冊(cè)頁(yè)面

處理接收reg.html頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù)，將數(shù)據(jù)保存到user數(shù)據(jù)表中

驗(yàn)證碼程序

< /td>< tr>

Fungsi utama Halaman pendaftaranProses data yang diterima daripada halaman reg.html dan simpan data ke jadual data penggunaProgram kod pengesahan< /tbody>

Meneruskan pembelajaran

fail baharu

<!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("你輸入的兩次密碼不一致，請(qǐng)重新輸入！"); $('#pwd').focus(); return false; } if($('#yzm').val() == ''){ alert("你的驗(yàn)證碼不能為空"); $('#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>用戶注冊(cè)</h2> <p>用戶名：<input type="text" name="name" id="name"></p> <p>密　　碼: <input type="password" name="pwd" id="pwd"></p> <p>確認(rèn)密碼: <input type="password" name="pwdconfirm" id="pwdconfirm"></p> <p>驗(yàn) 證碼：<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="注冊(cè)" >立即注冊(cè)</button></p> </div> </div> </form> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik