-->
Home
code
html

Membuat Form Login Menggunakan HTML Dan Bootstrap

Pengantar

HTML

Html merupakan singkatan dari Hypertext Markup Language yang biasa digunakan untuk membuat sebuah halaman web,  yang kemudian dapat di akases untuk menampilkan berbagai informasi didalam sebuah browser. HTML juga dapat digunakan sebagai link dalam situs atau dalam komputer dengan menggunakan localhost atau link yang menghubungkan antar situs dalam internet.

BOOTSTRAP

Bootstrap merupakan sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan framework HTML, CSS, JS yang sangat populer dikalangan web developer. Bootstrap menyediakan kumpulan komponen class interface yang telah dirancang dengan sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan.


LANGKAH

  1. Langkah awal buka text editor dan buat file baru yang nantinya akan digunakan, yang berekstensi .html, .css dan .js (biar mudah, file-file tersebut di simpan didalam 1 folder) dan beri nama sesuai keinginan anda.
  2. ketikan/copas source code di bawah sesuai dengan ekstensi yang anda buat.
  3. jika sudah di save, jalankan program tersebut.


SOURCE CODE

HTML

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

    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

    <link rel="stylesheet" href="index.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <title>LOGIN FORM</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light navbar-form">
    <div class="container">
        <a class="navbar-brand" href="#">LOGIN FORM</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

<main class="login-form">
    <div class="cotainer">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Login To Continue</div>
                    <div class="card-body">
                        <form action="" method="">
                            <label class="sr-only" for="inlineFormInputGroupUsername2">Email</label>
                            <div class="input-group mb-2 mr-sm-2 col-md-10 ml-5">
                                <div class="input-group-prepend ">
                                <div class="input-group-text"><i class="fas fa-at"></i></div>
                                </div>
                                <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Email">
                            </div>

                            <label class="sr-only" for="pswrd">Password</label>
                            <div class="input-group mb-2 mr-sm-2 col-md-10 ml-5">
                                <div class="input-group-prepend ">
                                <div class="input-group-text"><i class="fas fa-lock pw"  onclick="show()" title="show password" ></i></div>
                                </div>
                                <input type="password" class="form-control"  id="pswrd" placeholder="Password">
                            </div>

                            <div class="form-group row">
                                <div class="col-md-6 offset-md-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="remember"> Remember Me
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    LOGIN
                                </button>
                                <a href="#" class="btn btn-link">
                                    Forgot Your Password?
                                </a>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

</main>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="index.js"></script>

</body>
</html>

CSS

body{
    margin: 0;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    background-color: #f5f8fa;
}

.navbar-form
{
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}


.login-form
{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.login-form .row
{
    margin-left:0 ;
    margin-right: 0;
}

.card-body .pw:hover{
    cursor: pointer;
    color: green;
    -webkit-transform: scale(1.08);
    transform: scale(1.18);
}

JS

function show(){
    var pswrd = document.getElementById('pswrd');
    var icon = document.querySelector('.fas');
    if (pswrd.type === "password") {
        pswrd.type = "text";
    }else{
        pswrd.type = "password";
        icon.style.color = "grey";
    }
}

NOTE

Mungkin ini yang perlu diperhatikan jika anda membuat file-file nya berbeda dengan nama file yg saya buat, pada gambar di atas , saya membuat semua file bernama index, perlu diperhatikan pada file yang berekstendi .html pada bagian "head" <link rel="stylesheet" href="index.css">  dan pada bagian <script src="index.js"></script> ganti tulisan yang berwarna biru sesuai nama yang kalian buat, agar file tersebut bisa terakses/terbaca oleh sistem.


OUTPUT


Post a Comment