Membuat Form Login Menggunakan Bootstrap 4

Membuat Form Login Menggunakan Bootstrap 4

loading....

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

 

Artikel Menarik Lainnya
bootstrap, bootstrap 4, tutorial bootstrap, belajar bootsrap

loading...