Form of student information - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Student Details Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; margin: 50px; }

    .container {
        background: white;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        margin: auto;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    input, button {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    button {
        background-color: #28a745;
        color: white;
        border: none;
        cursor: pointer;
    }

    button:hover {
        background-color: #218838;
    }
</style>

</head> <body> <div class="container"> <h2>Student Details Form</h2> <form id="studentForm"> <label for="name">Name:</label> <input type="text" id="name" required>

        <label for="age">Age:</label>
        <input type="number" id="age" required>

        <label for="email">Email:</label>
        <input type="email" id="email" required>

        <label for="course">Course:</label>
        <input type="text" id="course" required>

        <button type="submit">Submit</button>
    </form>

    <h3>Submitted Data:</h3>
    <div id="output"></div>
</div>

<script>
    document.getElementById("studentForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Prevent form from refreshing the page

        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let email = document.getElementById("email").value;
        let course = document.getElementById("course").value;

        let output = document.getElementById("output");
        output.innerHTML = `
            <p><strong>Name:</strong> ${name}</p>
            <p><strong>Age:</strong> ${age}</p>
            <p><strong>Email:</strong> ${email}</p>
            <p><strong>Course:</strong> ${course}</p>
        `;

        // Optionally, clear the form fields after submission
        document.getElementById("studentForm").reset();
    });
</script>

</body> </html>