I am a beginner at html and I was trying to learn how forms in html works, but as shown in the below code I was not able to get the form results after clicking on submit button. Can you please tell me why its not working and how to fix it?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html/css</title>
</head>
<body>
<form action="result.html" method="get">
<label for="N">Name:</label>
<input type="text" id="N" name="Name" required>
<br>
<label for="P">Phone number:</label>
<input type="number" id="P" name="phone_nos" required>
<br>
<button>submit</button>
<br>
</form>
</body>
</html>
result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="results"></div>
<a href="/">Go Back</a>
<script>
const resultsList = document.getElementById('results')
new URLSearchParams(window.location.search).forEach(
(value,name)=>{ resultsList.append('${name} : ${value}')
resultsList.append(document.createElement('br'))
})
</script>
</body>
</html>
This is what is displayed on the screen after clicking on submit button
${name} : ${value} ${name} : ${value}
Try Changing form method to POST instead of get
--> <form action="result.html" method="post">