PHP 개발 등록 페이지 첫 소개
등록 페이지는 모두가 잘 알고 있을 것입니다. 등록 페이지에서는 사용자가 사용자 이름, 비밀번호, 이메일, 성별 등과 같은 일부 정보를 등록 페이지에 모두 입력할 수 있습니다. 오늘은 등록 페이지 만드는 방법을 알려드리겠습니다
먼저 아래 등록 페이지 사진을 보세요
위 사진은 저희의 로그인 페이지보다 확인 비밀번호가 하나 더 있는 비교적 간단한 등록 페이지입니다. 사용자가 다른 비밀번호를 두 번 입력하여 비밀번호 오류가 발생하는 것을 방지하기 위해 다음 장에서 HTML 페이지를 만들기 시작하겠습니다
Tips: 우리가 보여드리는 등록 페이지가 가장 간단합니다. 등록 페이지는 사용자 이름과 비밀번호만 있지만 일상에서 접하는 등록 페이지에는 휴대폰 번호, 이메일 주소 등이 포함됩니다. 모두가 프로그램에 익숙해지면 누구나 다채로운 페이지를 만들 수 있다고 믿습니다
필요한 파일 만들기
| 파일 이름 | reg.html | reg.php | yanzhengma.php |
주요 기능 | 프런트 데스크 등록 page | reg.html 페이지에서 받은 데이터를 처리하여 사용자 데이터 테이블 | 인증 코드 프로그램 |
<!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>
