Как отделить страницу входа, подключенную к странице создания учетной записи?

#javascript #html

Вопрос:

Мне нужно, чтобы они были разделены как отдельные страницы? У меня есть страница входа в систему и страница создания учетной записи. Страница входа в систему является отдельной, затем она также отображается на странице создания учетной записи. Есть какие-нибудь идеи? Страница создания учетной записи скрыта при появлении страниц входа, но страница входа, когда нажата кнопка создать учетную запись, разделы входа отображаются в верхней части страницы создания учетной записи.

вот ссылка на страницу на реальном сервере. http://127.0.0.1:5500/.vscode/LOGIN SIGNUP/index.html

  <head>
    <body>
     </header>
       <div class="container">
      <form class="form form--hidden" id="login"></form>           
        <h1 class="form__title">Login</h1> 
         <div class="form__message .form__message--error"></div>
         <div class="form__input-group">
           <input type="text" class="form__input" autofocus placeholder="Username or email">
           <div class="form__input-error-message"></div>
           <div class="form__input-group">
             <input type="password" class="form__input" autofocus placeholder="Password">
             <div class="form__input-error-message"></div>
         </div>
         <button class="form__button" type="submit">Continue</button>
        <p class="form__text">
         <a class="form__link"href id="forgotPassword">Forgot your password? Click here!</a>
        </p>
        <p class="form__text">
          <a  class="form__link" id="linkCreateAccount"> Dont have an account? Create One</a>
        </p>
      </form>

      <form class="form" id="createAccount">
         <h1 class="form__title">Create Account</h1> 
         <div class="form__message .form__message--error"></div>
         <div class="form__input-group">
           <input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
           <div class="form__input-error-message"></div>
         </div>
         <div class="form__input-group">
           <input type="text" class="form__input" autofocus placeholder="Email Address">
           <div class="form__input-error-message"></div>
         </div>
         <div class="form__input-group">
           <input type="password" class="form__input" autofocus placeholder="Password">
           <div class="form__input-error-message"></div>
         </div>
         <div class="form__input-group">
           <input type="password" class="form__input" autofocus placeholder="Confirm password">
           <div class="form__input-error-message"></div>
         </div>
         <button class="form__button" type="submit">Continue</button>
         <p class="form__text">
          <a class="form__link" href=" ./" id="linkLogin">Already have an account? Sign in</a>
        </p>
      </form>
    </div>
</form>
 
 <script src="./src/main.js"></script>