Membuat Form Login Sederhana dengan Glyphicon di Bootstrap
Sunday 29 March 2015
Edit
Pada kesempatan kali ini saya akan memberikan tutorial berikut contoh sourcode yang bisa anda download nantinya, kali ini saya kan membahas tentang cara membuat form login sederhana dengan glyphicon di bootstrap. Bagaimana caranya ayo simak tutorialnya berikut ini, pada dasarnya kita pasti ingin membuat tampilan suatu form itu dapat terlihat indah dan menarik bagi user nah untuk memenuhi hal tersebut kita harus membuatnya bukan nah cara membuatnya seperti ini.
- Pertama pastikan anda sudah mendownload Bootstrap di website resminya http://getbootstrap.com.
- Selanjutnya buat link untuk mengambil source css bootstrap.min.css
- Setelah itu masukan code html berikut di container, lihat contoh souce code berikut
<body>
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading"><span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span> Login Form Saya</h2>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
<input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Ingatkan saya
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Masuk</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
- Kemudian save dan jalankan di browser kesayangan anda maka hasilnya akan seperti gambar dibawah ini
Bagaimana.?? keren bukan.?? oke untuk yang baru memulai belajar bootstrap untuk mendukung anda belajar saya telah siapkan source codenya untuk di download, silahkan download source codenya DOWNLOAD semuanya sudah saya berikan tinggal kemauan anda saja untuk belajar, tak ada gading yang tak retak begitu juga dengan postingan yang saya buat ini masih jauh dari sempurna, semoga apa yang saya share ini bisa bermanfaat.
Happy Coding & Programming