verification check for login page not working

I am working on a verification for my sign in using php for a side project. Right now I have one user which is the admin and the password is just 123. If the user enter the wrong password or username, it will throw a message saying Wrong Password or Wrong Username. At the moment it doesn't do either and I am trying to figure out why. I will post the html and php down below.

Update: I have added the method = post. Not sure where to go from here.

<?php
$uname = $_POST['uname'];
$passwd = $_POST['psw'];
$error = "";
$success ="";

if(isset($_POST['submit'])){
if($uname == 'admin'){
if($passwd == '123'){
  $error = "";
  $success = "Welcome Admin";
}
else{
  $error = " Wrong Password!!";
  $success = "";
   } 
}
 else{
   $error = " Wrong Username!";
  $success = "";
    }   
  }
 ?>





 <html lang="en">

  <head>
  <title>Hangman Home Page</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device- 
 width, initial-scale=1">
 <link rel="stylesheet" type="text/css" 
 href="home.css">
 </head>

 <body>

 <div class="header">
  <div class="a">Hangman</div>

 <br>
 <br>
 <br>
<!--column start here -->
<div class="hi">
<table id="leader">
  <tr>
    <th><img src="crown.gif"></th>
  </tr>
  <tr>
    <td>Leader Board</td>
  </tr>
  <tr>
    <td>1st. John : 4 guess</td>
  </tr>
  <tr>
    <td>2nd. Smith : 6 Guesses</td>
  </tr>
  <tr>
    <td>3rd. Tom : 7 Guesses</td>
  </tr>
  <tr>
    <td>4th. Allen : 8 Guesses</td>
  </tr>
  </table>
  </div>
 <!-- form start here -->
 <br><br>
 <div class="b">Think You Can Beat #1 ?</div>

  <center><button 

 onclick=
"document.getElementById('id01').
 style.display='block'"
 style="width:auto;">Play Now!!! 
 </button></center>

 <div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">
  <div class="imgcontainer">
    <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    <img src="hang1.gif" alt="logo" class="avatar">
  </div>

  <div class="container">
    <p class="error">
      <?php echo 'error'; ?>
    </p>
    <p class="success">
      <?php echo 'success'; ?>
    </p>
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Solution

Cause you don't display either the error message or the success message. Here a code that should resolve your problem:

..............

<!-- in your form tag add attribute method="POST" -->

<!-- Your code -->
<!-- in your div class="container"> -->
<?php if($success) { ?>
    <p class="success"><?php echo $success; ?></p>
<?php } else if ($error) { ?>
<p class="error">
  <?php echo $error; ?>
</p>

<!-- Your code -->

Happy coding ;)