Membuat login Show Hide Password dengan PHP , Jquery dan HTML

Cara Membuat Show Hide Password Plus download Source codenya

Baik pada kesempatan ini saya akan berbagi tutorial bagaimana caranya membuat form login mengunakan PHP, HTML, Jquery dan CSS . Show Hide password berfungsi untuk menapilkan password pengguna hal ini sangat berguna jika si user menggunakan password yang unik dan hal ini dapat menghindarkan dari kesalaha.
Oke langsung saja File yang di perlukan Yaitu Jquery Wajib, w3.css  dan style css sebagai pemanis form dan index.php sebagai Form Untuk login untuk lebih jelasnya dapat dilihat di gambar dibawah ini  Anda juga dapat mendownload full source kode di Bagian paling bawah artikel:

  1. Pertama Buat sebuah file beri nama index.php
<!DOCTYPE html>
<html>
<head>
    <title>Memperlihatkan dan Menyembunyikan Password  By www.zlearn.id</title>  
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="w3.css">
</head>
<body>
    <h1>Memperlihatkan dan Menyembunyikan Password <br/> By <strong>www.zlearn.id</strong></h1>  

    <div class="kotak">
        <form>
        <center><h3 style="color:white;">Silahkan Login</h3></center>
        <br>
        <br>
      
            <input class="form-text" type="Text"  placeholder="Username">
            <br/>
            <br/>
            <input class="form-password" type="password" placeholder="password">
            <br/>
            <br/>
            <input type="checkbox" class="form-checkbox"> Tampilkan password
            <br/>
            <br/>          
            <input class="w3-btn w3-red" type="submit" value="Login">
        </form>
    </div>

</body>
<script type="text/javascript">
    $(document).ready(function(){      
        $('.form-checkbox').click(function(){
            if($(this).is(':checked')){
                $('.form-password').attr('type','text');
            }else{
                $('.form-password').attr('type','password');
            }
        });
    });
</script>
</html>


2. Kemudian Buat File style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

body{
    font-family: 'Open Sans', sans-serif;

}

h1{
    font-weight: 400;
    text-align: center;
    color: #2D3E50;
}

.kotak{
    background: #1BA5BC;
    width: 700px;
    padding:60px 40px;
    color: #fff;
    margin:10px auto;
    box-shadow: 2px 2px 4px 0 white;
}

.form-password{
    width: 93%;
    padding: 10px 15px;
    font-size: 14pt;
    border: none;
    color: #2D3E50;
}


.form-text{
    width: 93%;
    padding: 10px 15px;
    font-size: 14pt;
    border: none;
    color: #2D3E50;
}
.form-submit{
    padding: 10px 15px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: 12pt;   
}



3.Siapkan File Jquery.js dapat di download di bootraps.com dan w3. css di w3school.com

4. Tada berikut gambar dari form login yang telah kita buat:
Show Hide Password By Zlearn.id


Anda Dapat Mendowload Full Source Code nya Dowwnloads

Semoga dapat bermanfaat Tutorial mengenai Show and Hide Password dan Download Source Kode Nya.  

Baca Juga


 

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...