Hey everyone hope you are all fine, today we are going to learn how to create a website with login and registration form in HTML CSS JS from scratch. Inside the website has many features such as displaying the modal, tabs to display and hide the form, and clickable links. These are features. You can learn each and everything from scratch.
In the dynamic landscape of the internet, creating a user-friendly website is crucial for engaging visitors and providing a seamless experience. One fundamental aspect of user interaction is the implementation of login and registration forms. In this article, we’ll explore the key components of designing a website with these forms using HTML, CSS, and JavaScript.
Website with Login and Registration Form in HTML CSS JS
Guys, Let’s see how to create a website with a Login and Registration Form in HTML CSS JS from scratch. I made the video tutorial on it, you can watch at to end, hope the you will learn many new tactics from the video. I hope the video is helpful and beneficial for you.
I hope you’ve watched the complete video and hope you’ve learned something new from the tutorial. I’m going to share with you the source code of the particular project below you can check it.
Website with Login & Registration Form in HTML CSS & JS
Let’s look at the codes that are used to make a website with login & registration form in HTML CSS & JS. I know source codes are important and helpful and for everyone to match the codes and solve the problems. you can check out the source code that I used in the video tutorial.
User authentication is the process of verifying the identity of a user before granting access to specific resources or features. The login and registration forms serve as the gateways for users to enter the site and access personalized content.
You May Also Like:
- How to Create An Admin Dashboard in HTML and CSS
- Travel and Tourism Website Using HTML and CSS
- Responsive Landing Page Using HTML and CSS
- Animated Website using HTML CSS and JavaScript
- How to Make a Website Using HTML and CSS
- Simple Website Using HTML and CSS with Source code
HTML (HyperText Markup Language) forms the backbone of any web page. The structure of your HTML document should include the necessary elements for creating a login and registration form. These elements typically include form tags, input fields for usernames and passwords, and buttons for submission.
<header>
<div class="container">
<nav>
<div class="logo">
<a href="#">
<img src="./imgs/logo.jpg" alt="" />
<h2>Design</h2>
</a>
</div>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button type="button" class="btn_register">Login / Register</button>
</nav>
</div>
</header>
<div class="modal">
<i class="fa fa-close"></i>
<div class="modal_hdeader">
<div class="btns">
<button type="submit" class="btn btn_login active">Login</button>
<button type="submit" class="btn btn_register">Register</button>
</div>
</div>
<div class="modal_body active">
<h2>Login</h2>
<input type="text" placeholder="User Name or Email" />
<input type="password" placeholder="Password" />
<div class="content">
<div class="rem">
<input type="checkbox" />
<label> Remember</label>
</div>
<a href="#">Forget Password</a>
</div>
<div class="modal_footer">
<button type="button" class="btn_login">Login</button>
</div>
</div>
<div class="modal_body">
<h2>Register</h2>
<input type="text" placeholder="User Name " />
<input type="text" placeholder="Your Email " />
<input type="password" placeholder="Password" />
<div class="modal_footer">
<button type="button" class="btn_register">Register</button>
</div>
</div>
</div>
<div class="blr hide"></div>
CSS (Cascading Style Sheets) is essential for styling your website and making it visually appealing. Use CSS to define the layout, color scheme, and overall aesthetics of your forms. Ensuring a clean and intuitive design can enhance the user experience and encourage users to interact with your site.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "poppins", sans-serif;
overflow-x: hidden;
}
header {
background: url("../imgs/bg.jpg") no-repeat center center/cover;
height: 100vh;
color: #fff;
}
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
nav .logo a {
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
}
nav .logo a h2 {
font-size: 2rem;
letter-spacing: 2px;
margin-left: 5px;
}
nav ul {
list-style-type: none;
display: flex;
}
nav ul li a {
color: #fff;
text-decoration: none;
margin: 0 1rem;
font-size: 1.1rem;
position: relative;
}
nav ul li a::before {
content: "";
position: absolute;
width: 0%;
height: 2px;
background-color: #fff;
bottom: -10px;
transition: all 0.3s ease-in;
}
nav ul li a:hover::before {
width: 100%;
}
nav ul li a.active::before {
width: 100%;
}
nav button {
border: 1px solid #ddd;
outline: none;
background-color: transparent;
color: #fff;
font-family: inherit;
padding: 0.6rem 1rem;
cursor: pointer;
border-radius: 5px;
font-size: 1rem;
transition: all 0.2s ease-in;
}
nav button:hover {
background-color: #fff;
color: #000;
}
nav button:active {
transform: scale(0.98);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 2rem;
box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
width: 450px;
display: none;
z-index: 2;
}
.modal.active {
display: block;
}
.modal i {
position: absolute;
right: 25px;
top: 20px;
cursor: pointer;
font-size: 1.2rem;
}
.modal h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 1rem;
}
.btns {
display: flex;
justify-content: center;
margin: 1.5rem 0;
}
.btn {
outline: none;
width: 100%;
border: none;
padding: 0.5rem 1rem;
font-family: inherit;
background-color: #ddd;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.btn:active {
transform: scale(0.98);
}
.btn.active {
background-color: slateblue;
transform: translateY(-3px);
}
.modal_body {
display: none;
}
.modal_body.active {
display: block;
}
.modal_body input {
width: 100%;
font-family: inherit;
outline: none;
padding: 0.5rem 0.8rem;
margin: 0.5rem 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.modal_body .content {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.5rem 0;
}
.modal_body .rem {
display: flex;
align-items: center;
}
.modal_body .content label {
margin-left: 10px;
}
.modal_body {
display: none;
}
.modal_body.active {
display: block;
}
.modal_footer button {
width: 100%;
outline: none;
border: none;
background-color: slateblue;
font-family: inherit;
font-size: 1rem;
padding: 0.7rem 1rem;
margin-top: 1rem;
cursor: pointer;
border-radius: 5px;
color: #fff;
}
.btn:active,
.modal_footer button:active {
transform: scale(0.98);
}
.blr {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
filter: blur(80px);
}
.blr.hide {
display: none;
}
JavaScript brings interactivity to your website. In the context of login and registration forms, JavaScript is used to validate user input, handle form submissions, and provide real-time feedback. For instance, you can use JavaScript to check if the user has entered a valid email address or if the password meets the required criteria.
"use strict";
const btnsEl = document.querySelectorAll(".btn");
const linksEl = document.querySelectorAll("ul li a");
const modalBody = document.querySelectorAll(".modal_body");
const blrEl = document.querySelector(".blr");
const btnRegister = document.querySelector(".btn_register");
const modalEl = document.querySelector(".modal");
const closeBtn = document.querySelector(".fa-close");
//===============tabs================
btnsEl.forEach((btn, indx) => {
btn.addEventListener("click", () => {
btnsEl.forEach((btnE) => btnE.classList.remove("active"));
btn.classList.add("active");
//=========Modal Body
modalBody.forEach((mov) => mov.classList.remove("active"));
modalBody[indx].classList.add("active");
});
});
btnRegister.addEventListener("click", () => {
modalEl.classList.add("active");
blrEl.style.display = "block";
});
closeBtn.addEventListener("click", () => {
modalEl.classList.remove("active");
blrEl.style.display = "none";
});
linksEl.forEach((link) => {
link.addEventListener("click", () => {
linksEl.forEach((l) => l.classList.remove("active"));
link.classList.add("active");
});
});
Creating a positive user experience is paramount. Consider implementing features like password strength indicators, real-time validation messages, and user-friendly error handling. This not only improves the overall usability of your forms but also enhances the security and reliability of the authentication process.
Security is a top priority when dealing with user authentication. Implement HTTPS to encrypt data transmission between the user’s device and your server. Additionally, employ secure password storage practices, such as hashing and salting, to protect user credentials from unauthorized access.
With the increasing use of mobile devices, ensuring your website is responsive is crucial. Use media queries in your CSS to adapt the layout and styling of your login and registration forms based on the screen size. This guarantees a consistent and user-friendly experience across various devices.
Conclusion:
Designing a website with login and registration forms involves a combination of HTML, CSS, and JavaScript to create a seamless and secure user authentication process. By focusing on user experience, security, and responsiveness, you can build a website that not only looks appealing but also ensures a positive interaction for your visitors. Whether you’re creating a personal blog, an e-commerce platform, or a community forum, implementing these best practices will contribute to the success of your website.
