In this tutorial, we’ll learn how to create a login page with a password show/hide option using the eye icon. We’ll explore toggling the eye icon and showing/hiding the password, replicating the behavior seen on typical login pages.
Table of Contents
- Introduction
- Login page creation with HTML
- CSS Styling
- JavaScript to toggle the eye icon
Introduction
In this tutorial, we use HTML, CSS, and JavaScript to create a login page with a password show and hide option. Using HTML we create two login inputs through the input tag and one i tag for developing an eye icon we use JavaScript to toggle the eye icon, and CSS is used to style the HTML elements.
Login page creation with HTML
<!DOCTYPE html>
<html>
<head>
<title>My-Login-Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div>
<h1>Login</h1>
<input type="text" placeholder="Username">
<input type="password" placeholder="password">
<i class="fa fa-eye"></i>
<button>Login</button>
</div>
In this, we didn’t apply any CSS styling; we simply used HTML to create a simple login page. Below the title tag, we inserted a Font Awesome link to display the eye icon, and we used the class “fa fa-eye” to obtain the icon. You can try it out, and for the output, refer to the link below
CSS Styling
Let’s add styling with CSS to the above code to create a professional and somewhat colorful login page. We’ll have the freedom to choose our styling based on our creativity and utilization of CSS properties.
You can add CSS to HTML in three ways
- Internal
- External
- Inline
In this tutorial, we add HTML and CSS internally in the header section.
<!DOCTYPE html>
<html>
<head>
<title>My-Login-Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- CSS styling is done with in the style tag -->
<style>
.divcontainer {
background-color: #ADD8E6;
font-family: roboto;
font-style: sans-serif;
text-align: center;
height: 100vh;
}
.UserInput {
border-radius: 5px;
border: 0px;
margin: 5px;
padding: 4px;
}
.mybutton {
background-color: blue;
border: 0;
border-radius: 5px;
width: 80px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<div class="divcontainer">
<h1>Login</h1>
<input type="text" class="UserInput" placeholder="Username">
<input type="password" class="UserInput" placeholder="password" id="userInput">
<i class="fa fa-eye" class="eye" id="eyeIcon"></i>
<button type="submit" class="mybutton">Login</button>
</div>
</body>
</html>
Styling was added. Refer to the link for output.
After applying CSS, we changed the background to light blue color, curved the input boxes, and modified the Login button to blue with white text. These CSS properties allow for extensive styling options.
JavaScript to toggle the Eye Icon
In the above code, we’ve explored how to maintain an icon, but JavaScript enables us to toggle the eye icon and show/hide the password, replicating the behavior found on typical login pages.
HTML incorporates JavaScript code using script tags. It positions the code within the body, unlike CSS, which developers typically place within the style tag below the title tag.
<html>
<head>
<title>My-Login-Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.divcontainer {
background-color: #ADD8E6;
font-family: roboto;
font-style: sans-serif;
text-align: center;
height: 100vh;
}
.UserInput {
border-radius: 5px;
border: 0px;
margin: 5px;
padding: 4px;
}
.mybutton {
background-color: blue;
border: 0;
border-radius: 5px;
width: 80px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<div class="divcontainer">
<h1>Login</h1>
<input type="text" class="UserInput" placeholder="Username">
<input type="password" class="UserInput" placeholder="password" id="userInput">
<i class="fa fa-eye" class="eye" id="eyeIcon"></i>
<button type="submit" class="mybutton">Login</button>
</div>
<!-- javascript code starts here -->
<script>
let myUserInput = document.getElementById("userInput");
let myEyeIcon = document.getElementById("eyeIcon");
myEyeIcon.addEventListener('click', () => {
if (myUserInput.type === 'password') {
myUserInput.type = "text";
myEyeIcon.classList.add("fa-eye-slash");
} else{
myUserInput.type = "password";
myEyeIcon.classList.remove('fa-eye-slash');
}
});
</script>
</body>
</html>
The above code utilizes the getElementById function to fetch elements by their unique IDs. Through this function, we select the HTML user input element of the type password and the eye icon for showing/hiding the password.
addEventListener is an event listener that responds to the click event. We provided it as an argument, meaning it listens for clicks on the eye icon. Based on the condition provided, if the user input type is a password, clicking on the eye icon adds the class fa-eye-slash, which represents an eye icon with a slash. again clicking on the eye icon removes the slash, effectively hiding and unhiding the password as the eye icon is clicked.
Let’s have fun while coding by experimenting with various CSS properties, JavaScript events, and HTML tags.