<div class="container">
  <form class="form" id="form">
    <h1 class="title">Login</h1>
    <p class="form-control">
      <label for="account">Account</label>
      <input type="text" id="account" name="account"/>
    </p>
    <p class="form-control">
      <label for="password">Password</label>
      <input type="password" id="password" name="password"/>
    </p>
    <div class="form-footer">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

.container {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  margin: 0;
}
.form {
  padding: 3rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem #aaa;
}
.form-control {
  display: flex;
  gap: 4px;
  label {
    display: block;
    min-width: 8rem;
  }
}
.form-footer {
  display: flex;
  justify-content: flex-end;
}

const $ = (selector) => document.querySelector(selector);

$("#form").addEventListener("submit", (e) => {
  e.preventDefault();

  const formdata = new FormData(e.target);
  const data = Object.fromEntries(formdata.entries());

  alert("data: " + JSON.stringify(data));
});