More

    Tutorial Membuat Show Hide Password dengan JQuery

    Tutorial Membuat Show Hide Password dengan JQuery – Pada artikel kali ini saya akan membagikan tutorial jquery tentang membuat show hide password. Mungkin ada yang belum tahu apa itu show/hide password? Show hide password adalah fitur untuk memunculkan karakter yang di ketik pada form password. kan biasanya pada form password password, karakter yang tampil berupa bintang atau titik-titik yang tebal. jadi di sini kita akan mencoba membuat show hide karakter nya. di mana pada saat di klik pada show password maka karakter yang di ketik pada form password akan di tampilkan.

    Oke kita langsung saja.

    Tutorial Membuat Show Hide Password dengan JQuery

    membuat show hide password

     

    Yang kita butuhkan di tutorial ini adalah :

    • file html/php
    • jquery.js
    • style.css

    Dimana pada file html/php tersebut kita akan membuat formnya sedang untuk style.css kita akan menambahkan script agar tampilan form passwordnya lebih menarik. Dan hal yang paling kita butuhkan disini adalah library JQuery. Untuk mendownload library jquery silahkan klik link berikut ini. Download JQuery

    Lalu buatlah file php dengan nama index.html. Lalu masukkan kode dibawah ini pada file index.html tersebut.

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Show Hide Form Password Dengan JQuery | www.tutorialpedia.net</title>	
    	<script type="text/javascript" src="jquery.js"></script>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<h1>Show Hide Form Password Dengan JQuery <br/> www.tutorialpedia.net</h1>	
    
    	<div class="kotak">
    		<form>
    			<input class="form-password" type="password">
    			<br/>
    			<br/>
    			<input type="checkbox" class="form-checkbox"> Show password
    			<br/>
    			<br/>			
    			<input class="form-submit" 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>

    fungsi jquery yang kita buat untuk bisa menampilkan dan menyembunyikan form password. di sini yang harus kita lakukan pertama kali adalah dengan cara mendeteksi checkbox. apakah checkbox dalam keadaan aktif(di content) atau dalam kondisi non aktif. cara mengeceknya mudah teman-teman. pertama kita berikan event klik dulu pada checkbox.

    $('.form-checkbox').click(function(){

    Lalu, kita check dahulu apakah checkbox tersebut dalam keadaan aktif atau tidak.

    if($(this).is(':checked')){
    	$('.form-password').attr('type','text');
    }else{
    	$('.form-password').attr('type','password');
    }

    Untuk mengecek checkbox aktif dengan

    if($(this).is(':checked')){

    Lalu tambahkan kode berikut pada file style.css untuk mempercantik tampilan anda.

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
    
    body{
    	font-family: 'Open Sans', sans-serif;
    	background: #f2f5f7;
    }
    
    h1{
    	font-weight: 400;
    	text-align: center;
    	color: #2D3E50;
    }
    
    .kotak{
    	background: #1BBC9D;
    	width: 500px;
    	padding:60px 40px;
    	color: #fff;
    	margin:10px auto;
    	box-shadow: 2px 2px 4px 0 #ccc;
    }
    
    .form-password{
    	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;	
    }

    Sekarang coba jalankan file index.html

    Free $100
    Deal

    Daftar menggunakan link di pojok kanan atas, minimal top up $25 usd. Maka dalam waktu 30 hari setelah registrasi anda akan mendapatkan credit $100 gratis dari vultr untuk mencoba layanan mereka.

    More Less
    Doesn't expire

    Recent Articles

    cara setting pppoe client

    Cara Setting PPPoE Client di TP Link WR840n dengan Mudah

    0
    Cara Setting PPPoE Client - Pada artikel sebelumnya saya sudah memberikan tutorial bagaimana Cara Setting PPPoE Server di Mikrotik. Pada tutorial berikutnya, kita akan mengaplikasikan pppoe kepada...

    Apa itu Staking Crypto dan Bagaimana Cara Melakukan Staking

    0
    Apa itu Staking Crypto - Akhir-akhir ini staking crypto banyak sekali menjadi pembicaraan buah bibir di kalangan investor crypto. Mungkin masih banyak dari para investor...

    Cara Setting PPPoE Server di Mikrotik

    0
    Cara Setting PPPoE Server - Pada tutorial sebelumnya kita telah belajar tentang bagaimana Cara Setting Hotspot Voucher di Mikrotik. Kali ini, saya akan melanjutkan sesi tutorial...
    Cara Setting Hotspot

    Cara Setting Hotspot Voucher di Mikrotik

    0
    Cara Setting Hotspot Voucher - Pada tutorial sebelumnya, kita sudah membahas apa itu mikrotik dan bagaimana cara melakukan konfigurasi dasar agar mikrotik kita bisa terhubung dengan internet. Router...
    konfigurasi dasar mikrotik

    Konfigurasi Dasar Mikrotik

    0
    Konfigurasi Dasar Mikrotik - Pada artikel sebelumnya, kita telah mengetahui Apa itu Mikrotik dan Fungsinya. Untuk kesempatan kali ini, kita akan mencoba melakukan konfigurasi dasar pada...

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!