[英]Creating Registration / Login System on same page
您好,我正在使用 PHP 和 MySQl 在同一頁面上創建登錄/注冊系統我在發布方法和操作時遇到問題,因為它在同一頁面上。 有人知道我如何解決這個問題。 下面是我的登錄和注冊/注冊系統代碼,該頁面使用 JavaScript 與 slider 分隔,我的問題是我無法使用 Post 方法和操作將表單保存在我的數據庫中
<html>
<!--WEB-APP Login / Register Page Title-->
<title>Envision: Login/Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External styling CSS / Font-Family Style / Swiper CSS-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
<!--Custom Styling CSS-->
<link rel="stylesheet" type="text/css" href="CSS/Access.css">
<!--Font Awesome Script -->
<script src="https://kit.fontawesome.com/26011c24ac.js" crossorigin="anonymous"></script>
<!--Custom js script-->
<script defer src="js/Custom_JS/log_slider.js"></script>
<script defer src="js/Custom_JS/selector.js"></script>
</html>
<body>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--Back Button to Landing Page-->
<div class="back">
<button onClick="location.href='Main.php'" class="back-btn">
<i class="fas fa-arrow-alt-circle-left" style="font-size: 36px;">
<div class="back_text">
Back
</div>
</i>
</button>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--CONTAINER CONTAINS LOGIN / SIGN-UP SECTIONS-->
<div class="container">
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" action="php/check_login.php" method="post">
<form id="login" class="login_input">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SLIDER TO TOGGLE BTW LOGIN SECTION AND SIGN-UP SECTION-->
<div class="slider_form">
<div class="slider">
<div class="slide_text user_signup">
<h2>
Don't have an account ?
</h2>
<p>
Sign-Up and get instant access to Envision skill & personal competency project management web-application
</p>
</div>
<div class="slide_text user_login">
<h2>
Already have an Account ?
</h2>
<p>
Login and get access to your projects !
</p>
</div>
<div class="slide_btn">
<span class="user_signup">Sign-up</span>
<span class="user_login">Login</span>
</div>
</div>
<!--SLIDER ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
</div>
</body> ``
您在登錄表單中的action
屬性放錯了位置,並且在注冊中丟失了。 它應該在form
標簽中。
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" >
<form id="login" class="login_input" action="php/check_login.php" method="post">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
同樣假設您的注冊腳本是php/signup.php
注冊表單將是
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" action="php/signup.php" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
在上面的示例中,處理注冊和登錄的腳本將在兩個單獨的腳本check_login.php
和signup.php
上完成。 請使用負責管理注冊和登錄的腳本的實際位置更改action
屬性
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.