Pada tutorial di bawah saya menggunakan framework bootstrap untuk membuatnya, karena lebih mudah, maklum ane juga tidak jago koding hanya bermaksud untuk berbagi penglaman sambil belajar dan membuat perpustakaan online siapa tau dikemudian hari perlu jadi tidak repot-repot cari di file dihardisk.
Ok tanpa banyak basa-basi silakan bagi yang ingin copy langsung kodingnya silakan, bagi yang ingin menganalisa juga boleh, atau bagi yang ingin pilih-pilih juga tidak apa-apa, dan ane minta kesediaanya untuk memberikan komentar jika ada yang kurang sempurna.
1. Vertical Form Login
Vertikal form login sangat umum digunakan dan sering dilektakan di samping kiri atau kanan web/blog, tujuannya agar pengunjung lebih mudah jika sewaktu-waktu ingin login.
Kode HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Lgon Sederhana</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical Login Form</h2>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Login</h3>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" class="btn btn-default pull-right">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</body>
</html>
Form login inline seperti yang kita lihat sering digunakan oleh web yang bersifat komunitas seperti jejaring sosial, forum, berbagi foro atau video. Jika anda ingin membuat web komunitas silakan gunakan form login inline untuk menjadi referensi anda untuk mengembangkannya.
Kode HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Inline</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NamaWebsite</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="#">HTML</a></li>
<li class="dropdown">
<a href="#" class=S"dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="form">
<div class="input-group">
<span class="input-group-addon" id="username">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="pwd">!</span>
<input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="submit" class="btn btn-info">Sign Up</button>
</form>
</div>
</div>
</nav>
<p><center>Form Login untuk web berbasis CMS</center></p>
</body>
</html>
Form login horizontal biasanya digunakan pada halaman untama website, atau login menggunakan tombol pengarah seperti tombol "Login", ketika pengunjung mengklik tombol "Login" maka akan muncul halaman khusus login horizontal, kenapa harus menggunakan halaman khusus?? karena form login inline tampilannya agak lebar, makanya setiap template yang mengguakan form login inline selalu menyediakan halaman khusus bahkan dengan sistem popup dengan bantuan javascripts.
Kode HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Horizontal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 color">
<br>
<h2>Form Login Horizontal</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary pull-right">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Silakan digunakan sebagaimana menstinya, hehehehe..! kayak isi surat aja, ane sangat berharap masukan dari agan-agan untuk penyempurnaan form login yang sangat sederhana diatas. Oh ya jika agan-agan ingin membuat menu navigasi silakan lihat aretikel disini ya..!
0 komentar: