<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Output</title>
</head>
<body>
<h2>Collapsible Form with Output</h2>
<details>
<summary>Click to Fill the Form</summary>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</details>
<h3>Form Output:</h3>
<output id="formOutput"></output>
<script>
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent page reload
// Get form values
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let gender = document.getElementById("gender").value;
let message = document.getElementById("message").value;
// Display output
document.getElementById("formOutput").innerHTML =
`<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Gender:</strong> ${gender}</p>
<p><strong>Message:</strong> ${message}</p>`;
});
</script>
</body>
</html>
]]>
