Fungsi Form Login
Form login berfungsi untuk mengakses akun member yang sudah terdaftar di aplikasi web kita. Oleh karena itu betapa pentingnya form login di dalam aplikasi web.Baca juga : Membuat crud login dengan codeigniter, bootstrap dan mysql
Bootstrap Login Form
Di
dalam tutorial kali ini, kita bahas bagaimana cara membuat form login
dengan menggunakan bootstrap dengan menambahkan sedikit kode CSS,
langsung saja bagaimana cara membuat form login dengan bootstrap :
<!doctype html><html lang=”en”><head><meta charset=”utf-8”><meta http-equiv=”X-U-A-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1”><title>Login Form Bootstrap</title><!-- The above 3 meta tags *must*come first in the head; any other head content must come *after* these tags --><!-- Bootstrap --><link href=”css/bootstrap.min.css” rel=”stylesheet”><style>.panel-heading{padding: 5px 15px;}.panel-footer{padding: 5px 15px;}.panel-footer{padding: 5px 15px;color: #A0A0A0;}.profile-img{width: 96px;height: 96px;margin: 0 auto 10px;display: block;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;}</style><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respon.js doesn't work if you view the page via file: --><!-- [if It IE 9]><script src=”https://oss.maxcdn.com/html5shiv.min.js/html5shiv/3.7.3/html5shiv.min.js”></script><script src=”https://oss.maxcdn.com/html5shiv.min.js/respon/1.4.2/respon.js”></script><![endif]--></head><body><div class=”container” style=”margin-top: 40px;”><div class=”row”><div class=”col-sm6 col-md-4 col-md-offeset-4”><div class=”panel panel-default”><div class=”panel-heading”><strong>Login Form Bootstrap</strong></div><div class=”panel-body”><form role=”form” action=”#” method=”POST”><fieldset><div class="row"><div class="center-block"><img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""></div><div class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 "><div class="form-group"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input class="form-control" placeholder="Username" name="login name" type="text" autofocus></div></div><div class="form-group"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input class="form-control" placeholder="Your Password" name="password" type="password" autofocus></div></div><div class="form-group"><input type="submit" class="btn btn-lg btn-primary btn-block" value="Sign in"></div></div></div></div></fieldset></form></div></div></div></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) →<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed →<script src="js/bootstrap.min.js"></script></body></html>
Bootstrap : Login Form
Reviewed by Admin
on
9:26 AM
Rating:
Reviewed by Admin
on
9:26 AM
Rating:
No comments: