Panduan Membuat Form Login Dengan Bootstrap 5

ahlikode.com - di postingan sebelumnya saya sudah membuat tutorial Membuat Login PHP . pada kali, saya juga akan membuat artikel tutorial cara membuat Template form login dengan bootstrap 5

Form login adalah gerbang utama untuk bisa masuk atau mengakses ke aplikasi atau website dengan cara memasukan username dan password. 

Bootstrap 5 adalah framework khusus front end yang dapat membantu devoloper dengan mudah. 



Membuat Template Login Dengan Bootstrap 

Dalam membuat form login biasanya anda membutuhkan komponen bootstrap antara lain Card, Input dan button. Anda bisa melihat syntax pada kode dibawah ini:

<!doctype html>
    <html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

        <title>Form Login</title>
    </head>
    <body>
        <div class="container">
        <div class="row justify-content-center py-5">
            <div class="col-md-5">
            <div class="card">
                <div class="card-header  mb-0"><h5 class="text-center">Login</h5></div>
                <div class="card-body">
                <form>
                <div class="mb-3">
                    <label for="Username" class="form-label">Username</label>
                    <input type="Username" class="form-control" id="Username" aria-describedby="emailHelp">
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Remember me</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                </div>
            </div>
            </div>
        </div>
        </div>
    </body>
    </html>


Syntax bootstrap 5 diatas sangatlah sederhana sekali. namun desain tersebut dapat dibilang cukup bagus.  anda bisa mengcopy lalu mempastekan kode tersebut ke teks editor anda. kemudian, silahkan anda buka melalui browser dan akan muncul gambar di bawah ini:

Form Login

Baiklah, sampai jumpa diartikel selanjutnya....

Comments

Popular posts from this blog

Cara Membuat Sidebar Dengan Bootstrap 4

Cara Membuat Newsletter Di blog Dengan Formspree