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

Question

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">© The App Brewery</p>
</form>