<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" />
    </p>
    <p class="form-control">
      <label for="password">Password</label>
      <input type="password" id="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 data = {
   account: $('#account').value,
   password: $('#password').value
 }
 
 alert('data: ' + JSON.stringify(data))
})