×

Home

Blog Website Template Pricing About Us Contact Us My Account

Passwprd Show hide using javascript

Passwprd Show hide using javascript

Hello friends, today in this blog I will show you how to show and hide password using javascript. I’ll use HTML CSS and JavaScript to create this project. In the earlier blog, I have shared How to make drag & drop in table using jquery .You can see this project.

First I make a html file .then open my text editor .create a form with a id. setup some input form & a button .

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="script.js"></script>

<style type="text/css" media="screen">
        main{max-width: 600px; height: 550px;border-radius: 30px;box-shadow: 0px 0px 35px #868686;font-size: 19px;font-family: sans-serif;}
    </style>
</head>
<body class="bg-info text-light">
    <h3 class="text-center my-2">Javascript</h3>
    <div class="m-2">
        <main class="mx-auto bg-light text-dark p-3">
            <div class="myfeed">
                <input type="password" id="password" class="form-control" name="">
                <p class="text-success" id="passis"></p>
                <input type="checkbox" id="clibtn" onclick="clickfun()" value="Show password" class="btn btn-danger mt-2" name=""> Show Password
            </div>
        </main>
    </div>
    
    <script>
        function clickfun(){
            pass=document.getElementById("password");
            if (pass.type==="password") {
                pass.type="text";
            }else{
                pass.type="password";
            }
        }
    </script>
</body>
</html>

Video Tutorial of Working Passwprd Show hide using javascript

In this video I you have seen the demo of this project. I hope you like this tutorial and want to get source codes but don’t worry I’ve provided the codes of this project at the bottom of this page and you can easily copy-paste or download the code files.

But first, read this blog till the end to understand the codes and concepts behind print form in javascript tutorial .

You might like this:

How to create contact form using php - SRTECHBD

How to Redirect a Web Page by Javascript

```
php Time ago function
```

Passwprd Show hide using javascript [Source Codes]

To create this project [Passwprd Show hide using javascript]. First, you need to create four Files: HTML, CSS, JavaScript files. After creating these files just paste the following codes into your file. You can also download the source code files from the given download button.

Download Source Code

Tags password show in javascript

| Share | Facebook | Twitter | Whatsapp | Copy Link

SR Tech Limited is a blog where I post blogs related to HTML CSS JavaScript & PHP along with creative coding stuff and free source code files.

Releted article

How to print form using javascript

How to print form using javascript

See More ....

Add Comments

Previous Comments

Most Popular

How to create contact form using php - SRTECHBD

How to create contact form using php - SRTECHBD

How to print form using javascript

How to print form using javascript

Awesome social media icon design

Awesome social media icon design

How to make drag & drop in table using jquery

How to make drag & drop in table using jquery

How to Insert Data using Ajax PHP

How to Insert Data using Ajax PHP

php Time ago function

php Time ago function

Categories

1

1

1

1

2

4

Go to top

// Link copy to clipboard