req.body.fname notworking in express it shows result as undefined

code

I am not sure why the below does not work .I tried to add app.use(express.json()); in index.js but still not working. Any idea on how to solve this? when I console.log it shows undefined I am trying to console log the data that is submitted in the html

var express = require('express');
    var bodyParser = require('body-parser');
    var request = require('request');
    const { path } = require('express/lib/application');
    var app = express();
    
    app.use(bodyParser.urlencoded({ extended: true }))
    
    app.use(express.static('public'))
    
    
    
    app.get('/', function (req, res) {
    
    
      res.sendFile(__dirname + "/Signup.html")
    
    
    })
    
    app.post('/Signup.html', function (req, res) {
      var fname = req.body.fname
      var lname = req.body.lastname
      var email = req.body.email
      console.log(fname, lname, email)
    })
    
    app.listen(3000, function () {
    
      console.log("Running in 3000 ")
    
    })

HTML this is the html code

<form action="/Signup.html" method="post" >
    <img class="mb-4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST1ViA_OmDA31rfd8ooDSmjLUeuh-HujXTwA&usqp=CAU" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

    <div class="form-floating top">
      <input type="text" name="fname" id="fname" class="form-control top" placeholder="First Name" required>
       <label for="floatingInput">First Name</label>
    </div>
    <div class="form-floating middle">
      <input type="text" class="form-control middle" name="lastname" placeholder="Last Name">
      <label for="floatingPassword">Last Name</label>
    </div>
    <div class="form-floating bottom">
        <input type="email" class="form-control bottom" name="email" placeholder="email">
        <label for="floatingPassword">Email</label>
      </div>

    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign Me Up</button>
    <p class="mt-5 mb-3 text-muted">&copy; The App Brewery</p>
  </form>