"login sample"
Bootstrap 3.3.0 Snippet by Mateo97

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="es"> <head> <title>Inicio de sesión</title> <meta charset="utf-8"/> <link rel="stylesheet" href="css/estilo.css"/> <script src="js/mensaje.js"></script> </head> <body> <section> <div class="contenedor"> <header> <div class="ti"> <h3>Inicio de sesión</h3> </div> </header> <form action="#" method="POST" id="miform"> <div class="wallpaper"> <img src="http://www.gadiersistemas.com/img/avatar.png" alt="imagen-usuario" title="Usuario" /> </div> <div class="ti"> <label>Nombre de usuario:</label><br><br> <input type="text" name="usuario" id="usuario" class="fail" placeholder="Nombre de usuario"/> </div> <div class="ti"> <label>Contraseña:</label><br><br> <input type="password" name="contra" id="contra" class="fail" placeholder="Ingrese contraseña" /> </div> <div class="ti"> <input type="submit" name="ingresar" id="ingresar" value="Ingresar" onclick="iniciar();" /> </div> </form> </div> <div class="ti"> <a href="#"><h3>¿Olvidaste tu contraseña?</h3></a> </div> </section> </body> </html>
*{ padding:0px; margin:0px; } body{ background:radial-gradient(circle,#fff 5%,#ccc 200%)no-repeat fixed center; } section{ width:30%; height:auto; margin:6% auto; } .contenedor{ background:#fff; width:85%; margin:0 auto; padding:4px; height:auto; box-shadow:inset 0 5px 5px rgba(0,0,0,.075),0 0 10px #555; } header{ width:100%; height:auto; background:#337ab7; color:#fff; } .ti{ padding:8px; } .ti label{ font-size:20px; } header .ti h3{ font-size:20px; font-weight:bold; } #usuario,#contra{ width:100%; border-radius:3px; border:1px solid #ccc; transition:400ms; height:32px; font-size:16px; text-align:center; } #ingresar{ padding:8px; border:0px; border-radius:3px; background:#337ab7; color:#fff; width:40%; font-size:16px; transition:400ms; } .wallpaper{ width:75%; margin:auto; } .wallpaper img{ margin:4% 30%; border-radius:50%; width:40%; } #ingresar:hover{ opacity:0.8; cursor:pointer; } .error{ border: 1px solid red!important; } .ti a{ text-align:center; text-decoration:none; color:#000; } .ti a h3{ border-bottom:1px solid #ccc!important; width:85%; margin:0 auto; padding:2px; } .ti a:hover{ color:#333; }
function iniciar(){ nombre1=document.getElementById("usuario"); nombre2=document.getElementById("contra"); nombre1.addEventListener("input", validacion, false); nombre2.addEventListener("input", validacion, false); validacion(); } function validacion(){ if(nombre1.value==''){ nombre1.setCustomValidity('Ingrese nombre de usuario'); nombre1.style.background='#FFDDDD'; }else{ nombre1.setCustomValidity(''); nombre1.style.background='#FFFFFF'; } if(nombre2.value==''){ nombre2.setCustomValidity('Ingrese la contraseña'); nombre2.style.background='#FFDDDD'; }else{ nombre2.setCustomValidity(''); nombre2.style.background='#FFFFFF'; } }

Related: See More

Vue Now UI Kit PRO
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: