Cara menggunakan register login form bootstrap

Question

Share artikel kali ini yaitu Login Form dengan Bootstrap , Register Form Dengan Bootstrap Serta Forget Password , Yang dihubungkan dengan menggukan Tab , Terkadang dalam membuat aplikasi kita membutuhkan theme yang bisa kita gunakan, tidak jarang aplikasi itu membutuhkan sistem login, sistem register, Nah Berikut ini contoh Login Form dengan Bootstrap , Register Form Dengan Bootstrap Serta Forget Password .

Contoh Login Form dengan Bootstrap

Register Form Bootstrap

Forget Password Bootstra

Download

Form login dengan menggunakan bootstrap? Kenapa harus mebuat form login dengan menggunakan bootstrap? Mungkin itu pertanyaan yang akan di tanyakan kalau membaca artikel ini. Sebenarnya penggunaan bootstrap membantu untuk mempermudah kita dalam membuat interface web yang responsif, tampilan menarik dan mobile friendly.

Menurut keterangan di atas jadi bukan form login saja yang dapat dibuat dengan menggunakan bootstrap tapi kita juga dapat membuat web dengan bootstrap. Penggunaan bootstrap dalam membuat website atau sktip skirp lain nya seperti sekarang saya membuat form login html dengan menggunakan bootstrap hanya bisa digunakan untuk membuat interface saja tidak dapat digunakan untuk membuat skrip login nya. Jika ingin menambahkan skrip login kamu dapat menggunakan bahasa pemograman php atau asp.

Baca Juga : Tutorial Codeigniter 3 Bagian #7 : Session Untuk halaman login & halaman admin

Beginilah Source code Form Login Bootstrap

<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #17a2b8;
  height: 100vh;
}
#login .container #login-row #login-column #login-box {
  margin-top: 120px;
  max-width: 600px;
  height: 320px;
  border: 1px solid #9C9C9C;
  background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
  padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
  margin-top: -85px;
}
</style>
</head>

<body>
    <div id="login">
        <h3 class="text-center text-white pt-5">RumahCode.org Login form</h3>
        <div class="container">
            <div id="login-row" class="row justify-content-center align-items-center">
                <div id="login-column" class="col-md-6">
                    <div id="login-box" class="col-md-12">
                        <form id="login-form" class="form" action="login2.php" method="post">
                            <h3 class="text-center text-info">Login</h3>
                            <div class="form-group">
                                <label for="username" class="text-info">Username:</label><br>
                                <input type="text" name="username" id="username" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="password" class="text-info">Password:</label><br>
                                <input type="password" name="password" id="password" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
                                <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Baca Juga : Cara mengetahui perbedaan metode Post dan get

Nah untuk itulah skrip untuk form login dengan menggunakan bootstrap 4.

Baca Juga : Source Code halaman admin menggunakan session pada codeigniter 4