Back to Snippets

Signup/Login Snippet.

This snippet creates a simple login and signup form toggle using HTML, CSS, and JavaScript. It switches between forms with smooth transitions and updates the display without reloading the page.
How to Use?
Include the HTML for both forms in a container, and use the provided JavaScript to handle the toggle behavior. No external libraries or frameworks are needed.
Credits
Built using basic DOM manipulation techniques and form styling commonly used in interactive web UIs. 

<div class="container">
    <div class="form-container" id="login-form">
      <h1>Login</h1>
      <form>
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
        <button type="submit">Login</button>
      </form>
      <p>Don't have an account? <a href="#" id="signup-link">Sign up</a></p>
    </div>

    <div class="form-container" id="signup-form" style="display: none;">
      <h1>Sign Up</h1>
      <form>
        <label for="new-username">Username</label>
        <input type="text" id="new-username" name="new-username" required>
        <label for="new-email">Email</label>
        <input type="email" id="new-email" name="new-email" required>
        <label for="new-password">Password</label>
        <input type="password" id="new-password" name="new-password" required>
        <button type="submit">Sign Up</button>
      </form>
      <p>Already have an account? <a href="#" id="login-link">Login</a></p>
    </div>
</div>