index.html
<!DOCTYPE html>
<html>
<head>
    <title>Frontend to Backend Example</title>
</head>
<body>
    <h1>Frontend to Backend Example</h1>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" required><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" required><br><br>
        <button onclick="submitForm()">Submit</button>
    </form>
    <script>
        function submitForm() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;

            // Send data to the backend
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/process", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // Handle the response from the backend
                    console.log(xhr.responseText);
                }
            };
            xhr.send("name=" + name + "&email=" + email);
        }
    </script>
</body>
</html>