Profile Creation from a form

Profile Generation

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