I'm developing a website using PHP that allow user to log in to the system. But i don't know what is the problem when user click on the log in button, the button stay in the same page without directly go to the next page.
Can you help me identify the cause of my problem? Thank you in advance!
<html lang="en">
<head>
<form action="login.php" method="post">
<form action="order.html" method="get">
<title>bAJu VALeT </title>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
body {
background: #7f9b4e url(img/v1.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.container>header h1,
.container>header h2 {
color: black;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="container">
<header>
<center>
<h1><strong>WELCOME TO </strong> BAJUVALET </h1>
</center>
</header>
<center>
<section class="main">
<form class="form-4">
<h1>LOGIN</h1>
<p>
<form id="login" method="POST" class="form-signin" role="form">
<td>
<h2>Email:</td>
<td><input type="text" name="email">
<h2>
</td>
<td>Password:</td>
<td><input type="text" name="password"></td>
<form action="order.html" method="post">
<div <a href="order.html">
<td>
<h1><input type="submit" name="continue" value="CONTINUE">
<h1>
</td>
</div>
</form>
</form>
<label class="checkbox">
</p>
<p>
<form action="index.html">
</form>
<div class="login-links">
<a href="signup.php">
<p>
<a href="signup.php">
<h6>Don't have an account? <strong>Sign Up</strong><h6>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</p>
</form>
</form>
</section>
</center>
</div>
</body>
</html></div>
I don't know why you have multiple <form> tags laying around but based on what I can infer from your code, you're are probably looking for something like this:
<html lang="en">
<head>
<title>bAJu VALeT </title>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
body {
background: #7f9b4e url(img/v1.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.container>header h1,
.container>header h2 {
color: black;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="container">
<header>
<center>
<h1><strong>WELCOME TO</strong>BAJUVALET</h1>
</center>
</header>
<center>
<section class="main">
<h1>LOGIN</h1>
<p></p>
<form id="login" class="form-signin" role="form" method="POST" action="order.php">
<table border="1" cellpadding="">
<tr>
<td><h2>Email:</h2></td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td><h2>Password:</h2></td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" name="continue" value="CONTINUE">
</center>
</td>
</tr>
</table>
</form>
<a href="signup.php">
<h6>Don't have an account? <strong>Sign Up</strong></h6>
</a>
<p></p>
</section>
</div>
</body>
And then in order.php:
<?php
$email = $_POST["email"];
$password = $_POST["password"];
echo "Email: ".$email." Password: ".$password.".<br/>";
?>
Now, some important advices to always keep in mind:
Remember to close the tags you open, this a good practice that can save you a lot of time as your code grows;
Use proper indentation, it makes your code easier to read and thus improve productivity;
Search for the documentation of what you're are trying to learn, in this case, looking for "html form documentation" could have helped you solve the problem and understand what is going on.
Useful link:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form