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...

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 :

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...

BlogCaraOchaNetwork