Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Form</title>
</head>
<body>
<div id="form-page">
<h2>Profile Form</h2>
<form id="profileForm">
<input type="text" id="name" placeholder="Name" required><br>
<input type="email" id="email" placeholder="Email" required><br>
<input type="text" id="address" placeholder="Address" required><br>
<input type="text" id="contact" placeholder="Contact" required><br>
<button type="submit">Submit</button>
</form>
</div>
<div id="profile-page" style="display:none;">
<h2>Profile</h2>
<p id="profile"></p>
<button onclick="location.reload()">Go Back</button>
</div>
<script>
document.getElementById("profileForm").addEventListener("submit", (e) => {
e.preventDefault();
const profile = `
Name: ${document.getElementById("name").value}<br>
Email: ${document.getElementById("email").value}<br>
Address: ${document.getElementById("address").value}<br>
Contact: ${document.getElementById("contact").value}
`;
document.getElementById("profile").innerHTML = profile;
document.getElementById("form-page").style.display = "none";
document.getElementById("profile-page").style.display = "block";
});
</script>
</body>
</html>
Click to view the output