<html> <head> <style> body { /*ie needs this*/ margin:0px; padding:0px; /*set global font settings*/ font-size:10px; font-family:Tahoma,Verdana,Arial; } a:hover { color:#fff; } #user_registration { border:1px solid #cccccc; margin:auto auto; margin-top:100px; width:400px; } #user_registration label { display: block; /* block float the labels to left column, set a width */ float: left; width: 70px; margin: 0px 10px 0px 5px; text-align: right; line-height:1em; font-weight:bold; } #user_registration input { width:250px; } #user_registration p { clear:both; } #submit { border:1px solid #cccccc; width:100px !important; margin:10px; } h1 { text-align:center; } #passwordStrength { height:10px; display:block; float:left; } .strength0 { width:250px; background:#cccccc; } .strength1 { width:50px; background:#ff0000; } .strength2 { width:100px; background:#ff5f5f; } .strength3 { width:150px; background:#56e500; } .strength4 { background:#4dcd00; width:200px; } .strength5 { background:#399800; width:250px; } </style> </style> <script> function passwordStrength(password) { var desc = new Array(); desc[0] = "Çok Zayıf"; desc[1] = "Zayıf"; desc[2] = "İdare Eder"; desc[3] = "Orta"; desc[4] = "Güçlü"; desc[5] = "Çok Güçlü"; var score = 0; //if password bigger than 6 give 1 point if (password.length > 6) score++; //if password has both lower and uppercase characters give 1 point if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++; //if password has at least one number give 1 point if (password.match(/d+/)) score++; //if password has at least one special caracther give 1 point if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++; //if password bigger than 12 give another 1 point if (password.length > 12) score++; document.getElementById("passwordDescription").innerHTML = desc[score]; document.getElementById("passwordStrength").className = "strength" + score; } </script> </head> <body> <form method="post" action="" id="user_registration" name="user_registration"> <p><h1>Kayıt Formu</h1></p> <p> <label for="user">Kullanıcı Adı</label><input type="text" name="user" id="user"/> </p> <p> <label for="pass">Şifre</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/> </p> <p> <label for="passwordStrength">Şifre Zorluğu</label> <div id="passwordDescription">Şifre Girilmedi</div> <div id="passwordStrength" class="strength0"></div> </p> <p> <input type="submit" name="submit" id="submit" value="Kayıt Ol"> </p> </form> </body> </html>