Problem
<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Registration Form</h1>
    <form id="myForm">
      <input type="text" id="username" placeholder="Username" />
      <input type="password" id="password" placeholder="Password" />
      <input type="email" id="email" placeholder="Email" />
      <button type="submit" id="submitBtn">Submit</button>
    </form>

    <script>
      document
        .getElementById("myForm")
        .addEventListener("submit", function (event) {
          event.preventDefault();
          const formData = new FormData(this);
          for (const [key, value] of formData.entries()) {
            console.log(`${key}: ${value}`);
          }
        });
    </script>
  </body>
</html>
Solution

The form is missing the name attribute on the input elements, which is required for the form to be submitted correctly.

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Registration Form</h1>
    <form id="myForm">
      <input type="text" name="username" placeholder="Username" />
      <input type="password" name="password" placeholder="Password" />
      <input type="email" name="email" placeholder="Email" />
      <button type="submit" id="submitBtn">Submit</button>
    </form>

    <script>
      document
        .getElementById("myForm")
        .addEventListener("submit", function (event) {
          event.preventDefault();
          const formData = new FormData(this);
          for (const [key, value] of formData.entries()) {
            console.log(`${key}: ${value}`);
          }
        });
    </script>
  </body>
</html>