A login and Signup form is one of the most common features in modern website and applications. In this tutorial, we will create a modern Login & SIgnup form using HTML, CSS, and JavaScript. This project is perfect for beginners who want to improve their fron-end development skills by building real-world UI components.
Features
- Login & Signup toggle – Switch between login and registration forms.
- Password show/hide – User can toggle visibility of passwords.
- Modern UI design – Clean, responsive, and beginner-friendly.
- Social login buttons – Facebook and Google styled buttons.
Step 1: HTML Structure
The HTML defines two main forms – one for login and one for Signup. Both forms are wrapped inside a container. The important elements include:
- Input fields for email and password
- Buttons for login and signup
- Social login option (Facebook, Google)
- A toggle link to switch between forms
Step 2: CSS Styling
The CSS provides a modern and clean look. Key points:
- A responsive container with centered alignment
- Orange theme color (rgb(255,119,0)) for primary buttons
- Custom underline effect for headings
- Facebook button with blue background
- Google button with green background
Step 3: JavaScript
The JavaScript adds two main features:
- Password toggle– Show/hide password using an eye icon.
- Form toggle – Switch between login and Signup form.
