Form elements in a mess when i switching between it

Question

The elements of the registration form are as on the mockup, as soon as I click on the switcher to switch to the login form, the elements of the form are in a complete mess, and even when I switch back to the registration form, the elements do not become as they were, what can it be?

Answer 1

JS code should be display = "flex" instead of "block". Also, you need to give class="registration_form" to your login_form.

function showRegistrationForm() {
  document.getElementById("registration_form").style.display = "flex";
  document.getElementById("login_form").style.display = "none";
}

// Функція для показу форми входу
function showLoginForm() {
  document.getElementById("registration_form").style.display = "none";
  document.getElementById("login_form").style.display = "flex";
}