In This login page design with we are provide jquery validation. login page design demo with you can hide and show the password field. You can also remove username field value. this is single login page design example.

We allows to free snippets of jquery show hide password checkbox , you can download full code of bootstrap show hide password layout. Here in this post i will give you example of show password eye bootstrap snippet and you will get simple code of html, css and jquery. In toggle password visibility jquery snippet i give you three tab with html, css and js, you can easily get code of jquery show password plugin layout.


<!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="offset-lg-4 col-lg-4 login-part p-3 rounded"> <div class="row"> <div class="col-lg-12 col-md-12 col-12 text-center"> <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/supportmale-512.png" class="w-25 border border-success rounded-circle"> </div> <div class="col-lg-12 col-md-12 col-12"> <h3 class="text-center text-white">Login</h3> </div> <div class="col-lg-12 col-md-12 col-12 form-part"> <form class="needs-validation" novalidate> <div class="form-row"> <div class="col-lg-12 col-md-12 col-12"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fa fa-user"></i></div> </div> <input type="text" id="textfield" class="form-control" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" autocomplete="off" required> <div class="invalid-tooltip"> Please choose a unique and valid username. </div> <button type="button" class="btn btn-defualt txt-btn txt-remove-btn" onclick="ClearFields();"><i class="fa fa-times-circle"></i></button> </div> </div> <div class="col-lg-12 col-md-12 col-12"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"><i class="fa fa-lock"></i></div> </div> <input type="password" class="form-control pwd" placeholder="Password" aria-describedby="validationTooltipUsernamePrepend" required> <div class="invalid-tooltip"> Please choose a unique and valid password. </div> <button class="btn btn-default txt-btn pwd-btn" type="button"><i class="fa fa-eye" aria-hidden="true"></i></button> </div> </div> <div class="col-lg-12 col-md-12 col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="Check"> <label class="form-check-label text-white" for="Check">Remember me</label> <a href="//nicesnippets.com" target="_blank" class="float-right">Register Now? </a> </div> </div> <div class="col-lg-12 col-md-12 col-12"> <button type="submit" class="btn btn-success btn-block submit-btn">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </body> </html>
*{ font-family: 'Saira Condensed', sans-serif; } body{ background-image: url("https://i1.wp.com/www.pixelmatortemplates.com/wp-content/uploads/2015/08/2.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } .login-part{ transform: translateY(40%); box-shadow: 0px 0px 50px #fff; background:linear-gradient(rgba(55,0,0,.6),rgba(0,0,0,.6)) } .login-part img,.form-part .input-group,.submit-btn{ margin:10px 0px; } .form-row .txt-btn{ border-radius:0px 5px 5px 0px; width:13%; } .input-group input{ color:#000; font-weight: bold; letter-spacing:1px; } .invalid-tooltip{ line-height:0 !important; width: 350px; } .control:invalid{ border:5px solid red !important; } .form-check{ margin-top:5px; }
function ClearFields() { document.getElementById('textfield').value =""; } $(".pwd-btn").click(function() { var $pwd = $(".pwd"); if ($pwd.attr('type') === 'password') { $pwd.attr('type', 'text'); } else { $pwd.attr('type', 'password'); } }); (function() {'use strict'; window.addEventListener('load', function() { var forms = document.getElementsByClassName('needs-validation'); var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })();

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog