<form class="register-form" autocomplete="off">
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  <button type="submit">Register</button>
</form>
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.register-form input {
  margin-bottom: 16px;
  padding: 8px 12px;
}

.register-form button {
  padding: 12px;
}

const form = document.querySelector(".register-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const {
    elements: { username, password }
  } = event.currentTarget;
  console.log(username.value, password.value);
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.