/snippet
JavaScript HTML CSS web

Login/Signup Form.

A toggleable login and signup form with smooth transitions. Uses classList.toggle() to switch between views no libraries needed.

// how to use

Click the link at the bottom of each form to toggle between login and signup. Wire up the buttons to your own backend or auth service.

// credits

A classic beginner UI pattern for learning form layouts and DOM toggling with plain JavaScript.

<div class="container">
  <div class="form-box" id="login">
    <h2>Login</h2>
    <input type="text" placeholder="Username" />
    <input type="password" placeholder="Password" />
    <button>Log In</button>
    <p>No account? <a onclick="toggle()">Sign up</a></p>
  </div>
  <div class="form-box hidden" id="signup">
    <h2>Sign Up</h2>
    <input type="text" placeholder="Username" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Create Account</button>
    <p>Have an account? <a onclick="toggle()">Log in</a></p>
  </div>
</div>

<style>
  .hidden { display: none; }
  .form-box { display: flex; flex-direction: column; gap: 0.75rem; }
  input, button { padding: 0.6rem 1rem; border-radius: 6px; border: 1px solid #ccc; }
  a { cursor: pointer; color: blue; }
</style>

<script>
  function toggle() {
    document.getElementById("login").classList.toggle("hidden");
    document.getElementById("signup").classList.toggle("hidden");
  }
</script>
dog/cat apifrosted profile