Show / Hide Password HTML CSS JavaScript with Source Code

JxB1990 · Wednesday at 10:42 PM

In this comprehensive guide, I will provide you with source codes that demonstrate how to create a show password input field. The source code is composed of HTML, CSS, and JavaScript, making it easy to integrate into your web projects.

What is the Purpose of a Show/Hide Password Feature?

The Show/Hide Password feature is a common functionality in application forms, such as Login and Registration Forms. Password fields are typically masked, meaning the characters entered are replaced with dots or asterisks for security reasons. This feature allows users to toggle the visibility of their entered password, displaying it as plain text, similar to regular input fields. This can be particularly helpful in ensuring that users have typed their passwords correctly, reducing the likelihood of login errors due to mistyped characters.

HTML

The following script is an HTML code that contains the elements of a simple login form. The source code filename is known as index.html

.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<title

>

Login Form with Password Show Hide </

title

>
<link

href

=

"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"

rel

=

"stylesheet"

>
<link

rel

=

"stylesheet"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity=

"sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

/

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
</

head

>
<body

>
<div

class

=

"form-container"

>
<form

>
<h3

>

Login </

h3

>
<label

for

=

"username"

>

Username</

label

>
<input

type

=

"text"

name

=

"username"

id

=

"username"

placeholder

=

"Enter email or phone"

>
<label

for

=

"password"

>

Password</

label

>
<div

class

=

"pass"

>
<input

type

=

"password"

class

=

"pass"

name

=

"password"

placeholder

=

"Enter assword"

id

=

"password"

>
<i

id

=

"show-hide"

class

=

"fa-solid fa-eye-slash"

></

i

>
</

div

>
<button

type

=

"submit"

>

Log In</

button

>
<hr

>
<div

class

=

"social-container"

>
<h3

>

Login using </

h3

>
<div

class

=

"social"

>
<div

><a

class

=

"go"

href

=

"#"

><i

class

=

"fab fa-google"

></

i

>

Google </

a

></

div

>
<div

><a

class

=

"fb"

href

=

"#"

><i

class

=

"fab fa-facebook"

></

i

>

Facebook</

a

></

div

>
</

div

>
</

div

>
</

form

>
</

div

>
</

body

>
<script

src

=

"script.js"

></

script

>
</

html

>

CSS

Here's the CSS (Cascading Stylesheet) file script for the login form. This file script contains the code for the design of the elements in the form. The script is known as style.css

and is loaded in the index file.

*

{
padding

:

0

;
margin

:

0

;
box-sizing

:

border-box

;
font-family

:

'Poppins'

,

sans-serif

;
}
body {
background-color

:

#a499f6

;
}
.form-container

{
width

:

100%

;
display

:

flex;
padding

:

50px

20px

;
justify-items:

center

;
}
form {
display

:

block

;
margin

:

auto

;
width

:

400px

;
background-color

:

rgba

(

255

,

255

,

255

,

0.13

)

;
border-radius

:

10px

;
backdrop-filter:

blur(

10px

)

;
border

:

2px

solid

rgba

(

255

,

255

,

255

,

0.1

)

;
box-shadow

:

0

0

40px

rgba

(

8

,

7

,

16

,

0.6

)

;
padding

:

50px

35px

;
}
form h3 {
font-size

:

25px

;
text-align

:

center

;
color

:

#fff

;
text-shadow

:

2px

2px

10px

black

;
}
label {
display

:

block

;
margin-top

:

2rem

;
font-size

:

1rem

;
}
input {
outline

:

none

;
border

:

none

;
width

:

100%

;
background-color

:

#f4f3f367

;
border-radius

:

4px

;
padding

:

15px

10px

;
margin-top

:

8px

;
font-weight

:

100

;
}
input::

placeholder {
color

:

rgb

(

87

,

79

,

79

)

;
}
.pass

{
position

:

relative

;
}
.pass

i {
position

:

absolute

;
top

:

50%

;
transform

:

translateY(

-50%

)

;
cursor

:

pointer

;
right

:

20px

;
}
#show-hide

{
font-size

:

1rem

;
}
button

{
margin-top

:

30px

;
width

:

100%

;
background-color

:

#ffffff

;
padding

:

15px

0

;
font-size

:

18px

;
border-radius

:

5px

;
cursor

:

pointer

;
border

:

none

;
transition

:

all 0.1s

;
}
button

:

hover

{
transform

:

translate

(

-0.25rem

,

-0.25rem

)

;
box-shadow

:

0.25rem

0.25rem

#2a2a2c

;
}
hr {
margin-top

:

20px

;
height

:

1px

;
background-color

:

#ffffff7f

;
border

:

none

;
outline

:

navajowhite

;
}
.social-container

h3 {
margin-top

:

20px

;
margin-bottom

:

20px

;
}
.social

{
display

:

flex;
justify-content

:

center

;
width

:

100%

;
}
.social

div {
width

:

150px

;
border-radius

:

5px

;
padding

:

10px

5px

;
background-color

:

rgba

(

255

,

255

,

255

,

0.27

)

;
text-align

:

center

;
margin

:

0

14px

;
cursor

:

pointer

;
}
.social

div:

hover

{
background-color

:

rgba

(

248

,

247

,

247

,

0.511

)

;
}
.social

a {
text-decoration

:

none

;
}
.go

{
color

:

#e60000

;
}
.fb

{
color

:

blue

;
}
.social

i {
margin-right

:

4px

;
}
@media

screen and (

max-width

:

462px

)

{
form {
width

:

100%

;
}
}

JavaScript

Lastly, here's the JS file script containing the code that makes the password field masked and unmasked. The file is known as script.js

and is also loaded in the index file.

const

showHide =

document.getElementById

(

'show-hide'

)

;
let passwordInput =

document.getElementById

(

'password'

)

;
showHide.addEventListener

(

'click'

,

function

(

)

{
showHide.classList

.toggle

(

'show'

)

;
if

(

showHide.classList

.contains

(

'show'

)

)

{
showHide.classList

.remove

(

'fa-eye-slash'

)

;
showHide.classList

.add

(

'fa-eye'

)

;
passwordInput.setAttribute

(

'type'

,

'text'

)

;
}
else

{
showHide.classList

.add

(

'fa-eye-slash'

)

;
showHide.classList

.remove

(

'fa-eye'

)

;
passwordInput.setAttribute

(

'type'

,

'password'

)

;
}
}

)

;

In the provided JavaScript code snippet:

showHide

gets the element with the id 'show-hide'.
passwordInput

gets the element with the id 'password'.
The purpose of the click event listener for showHide

is to trigger the password field to unmask or mask the entered characters.

Snapshots

Here are some images of the output of the provided source code.

Masked/Hidden Password

Unmasked/Hidden Password

There you have it! I hope this Show/Hide Password Source Code using HTML, CSS, and JavaScript.

Explore more on this website for more Tutorials, Free Source Codes, and Articles covering various programming languages.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download

You must upgrade your account or reply in the thread to view the hidden content.

Show / Hide Password HTML CSS JavaScript with Source Code

More options

JxB1990

452,496

334,779

334,787