I have this html-form:

<form id="LoginForm" class="login-form">
    <p>
        <label for="username">Gebruiker:</label><br />
        <input type="text" name="username" autofocus />
    </p>

    <p>
        <label for="password">Wachtwoord:</label><br />
        <input type="password" name="password" />
    </p>

    <p class="submit-wrapper">
        <input
            type="submit"
            value="Verstuur"
            id="SubmitLogin"
            class="submit"
        />
    </p>
</form>

And I want to submit access the data with the FormData-api like this:

const submitLogin = document.querySelector("#SubmitLogin");
submitLogin.addEventListener("click", function (event) {
    event.preventDefault();

    const form = document.querySelector("#LoginForm");
    const data = new FormData(form);
});

Then I get this error in the console:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object FormData]' is not a valid selector.
    at HTMLInputElement.<anonymous>

I have been googling and stackoverflowing for a while today. All the solutions I find, involve numbers or illegal signs in the ID. But the form-ID (LoginForm) does not contain any of these. So now I am at a loss and would appreciate any help.