Home / Blog / Bootstrap / Cara Buat / Form Login / Tips dan Trik

Cara Membuat Form Login Responsive menggunakan Bootstrap

MP4U - Cara Membuat Form Login Responsive menggunakan Bootstrap - Hallo guys selamat berkunjung dan selamat membaca kembali di blog MP4U, setelah tadi membahas dan berbagi mengenai Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap, dikesempatan inipun masih membahas tentang cara pembuatan form login, lebih tepatnya kali ini akan membahas bagaimana Cara Membuat Form Login Responsive menggunakan Bootstrap, untuk ulasan selengkapnya, simak terus dibawah ini ya guys...

Cara Membuat Form Login Responsive menggunakan Bootstrap

OK Next... Pada tutorial ini kita akan membahas cara membuat form login sederhana dengan menggunakan Framework Bootstrap... Namun sebelumnya, saya harap sobat sudah pernah menggunakan bootstrap dalam pembuatan kerangka layout sebuah website... Jika sobat belum menggunakan bootstrap dan belum begitu faham silahkan pelajari terlebih dulu soal bootstrap, bisa search saja lewat google...

Dan pembahasan kita kali ini Selain Bootstrap, kita akan menggunakan CSS Pre-processors SASS/SCSS, dan pastikan sobat sudah menginstall NPM ( Node Package Manager ) dan menggunakan task runner seperti Gulp atau Grunt untuk meng-compile file SASS/SCSS menjadi file ( .css )... dan langsung saja dibawah ini adalah tahap - tahap pembuatan kerangkanya, hingga membentuk form login yang kita harapkan, seperti pada gambar diatas...

1. Membuat kerangka file HTML


Pertama : Langkah pertama yang kita lakukan yaitu membuat kerangka file HTML seperti dibawah ini :

<body>
<div class="wrap-form-contact"> 
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="form-contact">
                    <h3><span>MP4U Logo</span> Login Form</h3>
                     
                    <form>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="pwd" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox"> Remember me</label>
                            <a href="#">Forgot Password?</a>
                        </div>
                        <button type="submit" class="btn btn-default">login</button>
                    </form>
                     
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Kedua : Jika sobat mengetikan kode dengan benar, maka tampilan form sementara seperti gambar dibawah ini :

Cara Membuat Form Login Responsive menggunakan Bootstrap

2. Membuat File SCSS : Variable & Mixin


Sebelum melakukan styling untuk keseluruhan objek HTML, kita akan membuat variable dan mixin terlebih dahulu agar file SCSS kita lebih terstruktur dan mempermudah pekerjaan selanjutnya...

Pertama : Variable

Pembuatan variable dalam file SCSS bertujuan untuk mempermudah kita dalam me-manage setiap nilai yang sama dalam suatu properti css yang digunakan berulang kali... Pada latihan ini kita akan membuat variable untuk memberikan nilai pada warna yang akan kita gunakan...

$tosca:#3cb4ab;
$purple:#5b5476;
$pink:#ff3366;
$grey:#666666;

Kedua : Mixin

Selanjutnya, kita akan membuat mixin, dalam SCSS kita dapat menggunakan mixin untuk mengumpulkan beberapa properti yang dapat kita gunakan berulang kali hanya dengan mengisi nilai ( value ) nya saja tanpa mengetikan properti berulang - ulang... Seperti fungsi pada CSS3 yang sering digunakan untuk Cross browser compability... Kali ini kita akan membuat mixin untuk properti box-shadow, border-radius, dan animasi...

@mixin box-shadow($shadow) {
    box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -o-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
}
@mixin border-rad($radius) {
    border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -webkit-border-radius: $radius;
}
@mixin anim-ease($anim){
    -webkit-transition:$anim;
    -moz-transition:$anim;
    -o-transition:$anim;
    -ms-transition:$anim;
}

3. Mengatur warna background


Selanjutnya kita akan mengatur warna background menggunakan CSS3 linear gradient menggunakan warna yang sudah kita atur pada variable sebelumnya... Saat ini class yang kita atur adalah .wrap-form-contact... 

.wrap-form-contact {
    background: $tosca;
    background: -webkit-linear-gradient(-45deg, $purple, $tosca);
    background: -o-linear-gradient(-45deg, $purple, $tosca);
    background: -moz-linear-gradient(-45deg, $purple, $tosca);
    background: linear-gradient(-45deg, $purple, $tosca);
}

Untuk menggunakan warna pada latihan kali ini, kita tidak perlu memberikan nilai warna menggunakan kode heksa seperi #000 dan lainnya... Namun hanya perlu memanggil nama dari variable warna yang sudah kita buat sebelumnya seperti $tosca, $pink dan lainnya...

4. Mengatur Form


Selanjutnya kita akan melakukan styling pada class .form-contact seperti kode berikut ini :

.form-contact {
    width:400px;
    margin:50% auto;
    padding:60px 50px 60px 50px;
    background-color:rgba(white,0.25);
    @include box-shadow(0px 0px 20px rgba(black,0.15));
     
    h3 {
        margin:0px 0px 40px 0px;
        font-weight:400;
        font-size:16px;
        color:white;
         
        span {
            font-weight:600;
            font-size:26px;
            margin-right:10px;
        }
    }
}

Perintah @include kita gunakan untuk memanggil properti yang sudah kita buat sebelumnya didalam @mixin seperti box-shadow, border-radius dan animation...

5. Mengatur Input text


Setelah itu kita lanjutkan untuk mengatur styling dari input text agar pada kedua sisinya berbentuk bulat dan berubah opacity ketika dalam keadaan aktif...

.form-group {
    input[type=email], input[type=password] {
        margin-bottom:20px;
        border:none;
        color:$grey;
        @include border-rad(30px);
        @include box-shadow(none);
        @include anim-ease(all 0.3s ease);
        &:focus, &:active {
            background-color:rgba(white,0.6);
            border:none;
            @include box-shadow(none);
        }
    }
}

6. Mengatur Label dan Button


Pada bagian akhir kita akan melakukan styling untuk bagian label dan button dengan menggunakan kode dibawah ini :

.checkbox {
    label {
        color:white;
    }
    a {
        color:white;
        float:right;
    }
}
 
.btn-default {
    color:white;
    font-size:16px;
    background-color:$pink;
    padding:6px 40px;
    margin-top:30px;
    border:solid $pink 2px;
    text-transform:uppercase;
    @include border-rad(30px);
    @include box-shadow(none);
    @include anim-ease(all 0.3s ease);
    &:hover, &:focus, &:active {
        background-color:transparent;
        border:solid white 2px;
        color:white;
    }
}

Nah Itulah kiranya yang dapat admin blog MP4U bagikan / sampaikan pada kesempatan kali ini, mengenai Cara Membuat Form Login Responsive menggunakan Bootstrap, selamat mencoba aja ya guys.. dan semoga bermanfaat, terimakasih yang sudah meluangkan waktunya membaca dari awal sampai akhir...



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
    • '