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

.form {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 32px;
}
const registerForm = document.querySelector(".form");

registerForm.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const login = form.elements.login.value;
  const password = form.elements.password.value;
  
  if (login === "" || password === "") {
    return console.log("Please fill in all the fields!");
  }

  console.log(`Login: ${login}, Password: ${password}`);
  form.reset();
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.