Creating a Signup Login Page using HTML, CSS, and JavaScript
3 mins read

Creating a Signup Login Page using HTML, CSS, and JavaScript

Creating a Signup/Login Page using HTML, CSS, and JavaScript

In this tutorial, we will learn how to create a simple and responsive signup/login page using HTML, CSS, and JavaScript. This page will allow users to either sign up for a new account or log in to an existing one. We will also include a button for users to download the source code.

HTML Structure

Let’s start by setting up the basic HTML structure for our signup/login page. Create a new HTML file and add the following code:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Signup/Login Page</title><link rel="stylesheet" href="style.css"></head><body><div class="container"><h1>Welcome</h1><form id="signupForm" class="form"><h2>Signup</h2><input type="text" id="signupUsername" placeholder="Username" required><input type="password" id="signupPassword" placeholder="Password" required><button type="submit">Signup</button></form><form id="loginForm" class="form"><h2>Login</h2><input type="text" id="loginUsername" placeholder="Username" required><input type="password" id="loginPassword" placeholder="Password" required><button type="submit">Login</button></form></div><script src="script.js"></script></body></html>

In the above code, we have created a container div that will hold the signup and login forms. Each form has an id attribute for JavaScript interaction. The forms have input fields for username and password, and a submit button.

CSS Styling

Next, let’s add some CSS styles to make our signup/login page visually appealing. Create a new CSS file called “style.css” and add the following code:

* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: Arial, sans-serif;background-color: #f2f2f2;}.container {max-width: 400px;margin: 50px auto;padding: 20px;background-color: #fff;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;margin-bottom: 20px;}h2 {font-size: 18px;margin-bottom: 10px;}.form {margin-bottom: 20px;}input[type="text"],input[type="password"] {width: 100%;padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 3px;}button {width: 100%;padding: 10px;background-color: #4CAF50;color: #fff;border: none;border-radius: 3px;cursor: pointer;}button:hover {background-color: #45a049;}

The above CSS code defines the styles for our signup/login page. We set the font family, background color, and padding for the body. The container class styles the main container div. The h1 and h2 headings are styled to have appropriate sizes and margins. The form class styles the signup and login forms. The input fields and buttons are styled to have specific widths, padding, and colors.

JavaScript Functionality

Now, let’s add some JavaScript functionality to our signup/login page. Create a new JavaScript file called “script.js” and add the following code:

const signupForm = document.getElementById('signupForm');const loginForm = document.getElementById('loginForm');signupForm.addEventListener('submit', signup);loginForm.addEventListener('submit', login);function signup(event) {event.preventDefault();const username = document.getElementById('signupUsername').value;const password = document.getElementById('signupPassword').value;// Add your signup logic here}function login(event) {event.preventDefault();const username = document.getElementById('loginUsername').value;const password = document.getElementById('loginPassword').value;// Add your login logic here}

In the above JavaScript code, we have selected the signup and login forms using their respective ids. We have also added event listeners for the form submissions. The signup and login functions prevent the default form submission behavior and retrieve the values entered in the username and password fields. You can add your own logic for signup and login operations.

Download Source Code

If you would like to download the source code for this signup/login page, you can do so by clicking the button below:

In the above code, we have added a button element with an onclick event that triggers the downloadSourceCode() function. This function creates a new link element, sets the href and download attributes to the path and name of the source code file, and programmatically clicks the link to initiate the download.

Conclusion

Congratulations! You have successfully created a signup/login page using HTML, CSS, and JavaScript. Users can now sign up for a new account or log in to an existing one. Feel free to customize the design and add additional functionality to suit your needs.

Leave a Reply

Your email address will not be published. Required fields are marked *