PHP file not detecting form data

I am trying to parse data from an HTML form to a PHP file to see if it matches with the data in my database. It’s a login system for my website. However, the data just doesn’t get parsed correctly somehow even though I’m entering the correct credentials on the HTML page because I keep getting the ‘else’ part of my PHP code when entering them.

HTML code

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:[email protected]&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Title</title>
    <link rel="stylesheet" href="login.css">
  </head>

  <body>

    <header>
      <h1 style="color: #333; font-family: PT Serif; font-size: 30px">Title</h1>
    </header>

    <section class="container">
      <form method="post" action="index.php" id="login">

        <h1 id="h1" style="font-family: Raleway; color: #333">Login</h1>
        <div class="msg">
        </div>

        <div>
          <label for="name" style="font-family: Raleway;">Name:</label>
          <input class='input' type="text" id="name" name="userName">
        </div>

        <div>
          <label for="password" style="font-family: Raleway;">Password:</label>
          <input class='input' type="password" id="password" name="password">
        </div>

        <div>
          <label for="register" style="font-family: Raleway;"><a href="(random link)">No account yet?</a></label>
        </div>

        <input class="btn" type="submit" value="Submit">
      </form>

    </section>
  </body>
</html>

index.php

<?php
session_start();

$link = mysqli_connect('localhost','dbuser','dbpass','dbname');

if(isset($_POST['username']) && isset($_POST['password'])) {
    $userName = $_POST['userName'];
    $password = $_POST['password'];

    $sql_u = "SELECT Username FROM users WHERE Username='$userName'";
    $sql_p = "SELECT Password FROM users WHERE Password='$password'";

    $res_u = mysqli_query($link, $sql_u);
    $res_p = mysqli_query($link, $sql_p);

    if($userName == $res_u && $password == $res_p) {
        $_SESSION['userName'] = $userName;
        $_SESSION['password'] = $password;
        $_SESSION['loggedin'] = 1;
    }
    
    if($_SESSION['loggedin'] == 1) {
        header('Location: (random html file)');
    }
}

else {
    ?>
    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:[email protected]&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Title</title>
    <link rel="stylesheet" href="login.css">
  </head>

  <body>

    <header>
      <h1 style="color: #333; font-family: PT Serif; font-size: 30px">Title</h1>
    </header>

    <section class="container">
      <form method="post" id="login">

        <h1 id="h1" style="font-family: Raleway; color: #333">Login</h1>
        <div class="msg">
        </div>

        <div>
          <label for="name" style="font-family: Raleway;">Name:</label>
          <input class='input' type="text" id="name" name="userName">
        </div>

        <div>
          <label for="password" style="font-family: Raleway;">Password:</label>
          <input class='input' type="password" id="password" name="password">
        </div>

        <div>
          <label for="register" style="font-family: Raleway;"><a href="(random link)">No account yet?</a></label>
        </div>

        <input class="btn" type="submit" value="Submit">
      </form>

    </section>
  </body>
</html>
    <?php
}

Answer

The only thing I can see is a possible typo:

if(isset($_POST['username']) && isset($_POST['password'])) {

Looks like that should be:

if(isset($_POST['userName']) && isset($_POST['password'])) {

Also, you don’t need a separate query for username and password, if usernames are unique, get the row for that user in one query, but are you storing passwords in plain text? That might be a bit risky and you are at risk of an SQL injection attack as well.