Home » Programming » CSS » Membuat Form Login Dan SignUp Dengan CSS3 Keren
form login dan signup css3

Membuat Form Login Dan SignUp Dengan CSS3 Keren

Membuat Form Login Dan SignUp Dengan CSS3 Keren

Form login css3 keren, sebuah form login berfungsi untuk memasukkan input berupa username dan password, sedangkan sign-up/pendaftaran berfungsi untuk menginputkan data pergguna berupa username, password dan email kedalam system.




Untuk membuat keduanya tidaklah susah, kita hanya perlu menggunakan beberapa atribut html seperti input type text, type email, type password dan lainnya kedalam kerangka html.

Hal yang cukup menguras fikiran dan waktu adalah membuat sebuah desain atau template dari form tersebut.

Desain atau template ini berguna untuk mempercantik tampilan dan juga memberikan user experience atau pengalaman pengguna yang lebih baik.

Misalnya saja anda membuat sebuah form tanpa tambahan css tentu user/orang yang melihat akan langsung bosan,

berbeda lagi jika anda menghiasnya dengan css3 dan javascript, user/orang yang melihatnya mereka akan lebih menikmati dan mendapatkan suasana yang lebih baik, kenapa begitu? karena dengan menggunakan css, form dan atribut html lainnya yang anda buat bisa disusun agar rapi dan enak dilihat.

Misalnya saja untuk meratakan konten, memberikan margin maupun padding, menghias button, mengganti background dan lain sebagainya bisa dilakukan dengan css.

Dikesempatan kali ini kita akan sama-sama belajar membuat sebuah form login keren dengan css3 dan juga javascript.

form login dan signup css3

Pertama-tama sebelum kita mulai membuat formnya hal wajib yang harus anda siapkan adalah sebuah file jquery dan juga beberapa gambar.

Download jquery-3.3.1.js

Cara Membuat Form Login Dan SignUp Keren Dengan CSS3 dan Javascript

Untuk mulai membuatnya silahkan anda ikuti beberapa langkah berikut ini:

Buat Sebuah Folder dengan File Index.html dan Style.css

Silahkan anda buka file index.html menggunakan html editor seperti sublime, vs code, adobe dreamweaver, notepad++ atau lainnya kemudian ketikkan kode dibawah, sebelum anda mengetikkan kode berikut pastikan anda telah memindahkan pula file jquery-3.3.1.js kedalam folder yang sama:

<!DOCTYPE html>

<html lang="en">

<head>

                <meta charset="UTF-8">

                <title>Login CSS JavaScript</title>

    <!-- Pemanggilan CSS !-->

                <link rel="stylesheet" type="text/css" href="style.css">

    <!-- End CSS!-->

</head>

<body>

    <!-- ID Loginbox adalah sebuah wadah/kotak tengah tempat semua konten!-->

                <div id="loginbox">

        <!-- Create tab menu sebelah kiri !-->

                                <div class="menu">

                                                <!-- membuat logo di pojok kiri atas dengan  gambar !-->

            <div class="head">

                <a href="https://www.wowotek.com"><img src="wowo.png" alt=""></a>

            </div>

            <!-- End Logo!-->

                                                <img class="gbr" src="coba.png" alt="ini gambar footer pohon">

            <!-- Membuat tombol login dan signup!-->

                                                <nav class="float-tabs">

                                                                <ul class="tabs">

                <li>

                    <a href="#login" class="active">Login</a>

                </li>

                <li>

                    <a href="#register">Sign-up</a>

                </li>

            </ul>

                                                </nav>

            <!-- End tombol!-->

                                </div>

        <!-- End tab !-->




        <!-- Membuat tab form sebelah kanan!-->

                                <div class="form">

            <!-- Membuat form login dengan class form-action dan show, class tersebut berhubungan dengan javascript di bawh dan style.css, sementara id berhubungan dengan javascript nantinya !-->

                                                <div id="login" class="form-action show">

                                                                <h2>Login</h2>

                                                                <div class="align">

                <form>

                    <ul>

                        <li>

                            <input type="text" placeholder="Username" />

                        </li>

                        <li>

                            <input type="password" placeholder="Password" />

                        </li>

                        <li>

                            <input type="submit" value="Login" class="button" />

                        </li>

                    </ul>

                </form>

                </div>

                <!-- End form login dengan class form-action dan show !-->

            </div>

            <!-- End Form !-->




            <!-- Membuat form untuk signup/register dengan class form-action dan hide, berhubungan dengan javascript dan juga style.css !-->

            <div id="register" class="form-action hide">

                <h2>Sign Up</h2>

                <div class="align">

                <form>

                    <ul>

                        <li>

                            <input type="text" placeholder="Username" />

                        </li>

                        <li>

                            <input type="email" placeholder="Email" />

                        </li>

                        <li>

                            <input type="password" placeholder="Password" />

                        </li>

                        <li>

                            <input type="password" placeholder="Retype Password" />

                        </li>

                        <li>

                            <input type="submit" value="Sign Up" class="button" />

                        </li>

                    </ul>

                </form>

                </div>

            </div>

            <!-- End form register !-->

                </div>

    <!-- End Loginbox !-->




    <!-- Include jquery agar javascript bekerja!-->

                <script src="jquery-3.3.1.js"></script>

    <!-- Membuat script hide dan show form saat menu/tombol di klik/aktif!-->

    <script>

    (function( $ ) {

  // constants

  var SHOW_CLASS = 'show',

      HIDE_CLASS = 'hide',

      ACTIVE_CLASS = 'active';




  $( '.tabs' ).on( 'click', 'li a', function(e){

    e.preventDefault();

    var $tab = $( this ),

         href = $tab.attr( 'href' );




     $( '.active' ).removeClass( ACTIVE_CLASS );

     $tab.addClass( ACTIVE_CLASS );




     $( '.show' )

        .removeClass( SHOW_CLASS )

        .addClass( HIDE_CLASS )

        .hide();

   

      $(href)

        .removeClass( HIDE_CLASS )

        .addClass( SHOW_CLASS )

        .hide()

        .fadeIn( 550 );

  });

})( jQuery );

    </script>

    <!-- End script !-->

</body>

</html>

Kemudian silahkan anda save, langkah selanjutnya kita akan membuat css untuk mempercantik dan meratakan tampilannya.

Baca :  Pengenalan Dasar HTML Serta Tag HTML Untuk Pemula

Buka File Style.css

Langkah berikutnya silahkan anda buka file style.css yang tadi anda buat menggunakan html teks editor kemudian ketikkan kode dibawah ini:

body

{

    margin: 0;

    padding: 0;

    background: #efefef;

    font-size: 16px;

    color: #777;

    font-family: sans-serif;

    font-weight: 300;

}

#loginbox

{

    position: relative;

    margin: 5% auto;

    height: 400px;

    width: 700px;

    border-radius: 10px;

    background: #fff;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

}

.menu

{

    position: absolute;

    top: 0;

    left: 0;

    box-sizing: border-box;

    border-radius: 10px 0px 0px 10px;

    width: 270px;

    height: 400px;

    background: #d95563;

    background: linear-gradient(to bottom,#2096ff,#05ffa3)!important;

}

.head img{

width: 70px;

height: 30px;

margin: 3px 1px 20px 12px;

padding: 0;

}

.gbr{

    position: absolute;

    width: 270px;

    height: 180px;

    padding-top: 164px;

    background: cover;

    border-radius: 10px 0px 0px 10px;

}

.ico{

    width: 162px;

    height: 70px;

    padding-left: 135px;

}




h2{

    font-weight: 300;

    color: #1591fd;

    text-align: center;

    padding-top: 26px;

}




input[type="text"],

input[type="password"],

input[type="email"]

{

    display: block;

    box-sizing: border-box;

    margin-bottom: 2px;

    padding: 4px;

    width: 255px;

    height: 35px;

    border: none;

    outline: none;

    border-bottom: 2px solid whitesmoke;

    font-family: sans-serif;

    font-weight: 400;

    font-size: 15px;

    transition: 0.2s ease;

}

input[type="submit"]

{

    margin-top: 12px;

    width: 255px;

    height: 32px;

    background: #1591fd;

    border: none;

    border-radius: 2px;

    color: #fff;

    font-family: sans-serif;

    font-weight: 500;

    text-transform: uppercase;

    transition: 0.2s ease;

    cursor: pointer;

   

}




input[type="submit"]:hover,

input[type="submit"]:focus

{

    background: #0087fd;

    transition: 0.2s ease;

}

input[type="text"]:focus,input[type="password"]:focus,

input[type="email"]:focus

{

    border-bottom: 2px solid #0087fd;

    transition: 0.2s ease;

}

.form

{

    position: absolute;

    top: 0;

    right: 0;

    box-sizing: border-box;

    padding: 15px 0px 0px 0px;

    width: 430px;

    height: 400px;

    background-size: cover;

    background-position: center;

   

}

.align{

    padding: 0px 43px 0px 43px;

}

.float-tabs{

    float: right;

    margin: 0;

    padding: 0;

    position: relative;

}

.tabs {

  height: 46px;

  margin: 0;

  padding: 0;

  list-style-type: none;

  width: 100%;

  position: relative;

  display: block;

  margin-bottom: 20px;

}

.tabs li {

  display: block;

  margin: 0;

  padding: 0;

}

.tabs a {

  background: transparent;

  display: block;

  text-decoration: none;

  color: white;

  font-size: 16px;

  padding: 12px 15px 12px 15px;

}

.form li{

    list-style: none;

}

.tabs a.active {

  background: #fff;

  color: #2096ff;

  border-right: none;

  -webkit-transition: all 0.5s linear;

    -moz-transition: all 0.5s linear;

    transition: all 0.5s linear;

    border-radius: 5px 0px 0px 5px;

    box-shadow: 0px 0px 5px rgb(255, 255, 255, 0.6);

}

.dark-box {

  background: #5e0400;

  box-shadow: 1px 3px 3px #3d0100 inset;

  height: 40px;

  width: 50px;

}

.form-action .dark-box.bottom {

  position: absolute;

  right: 0;

  bottom: -24px;

}

.tabs + .dark-box.top {

  position: absolute;

  right: 0;

  top: 0px;

}

.show {

  display: block;

}

.hide {

  display: none;

}




.button {

    border: none;

    display: block;

    box-shadow: 0px 2px 1px #2075aa;

}

Jangan lupa anda save.

Baca :  Macam-Macam Kerusakan Pada Android dan Cara Mengatasinya

Jalankan File Index.html

langkah terakhir silahkan anda buka file index.html tadi menggunakan browser(chrome), caranya => klik kanan file index.html => open with => Chrome.

Seperti ini hasilnya:

form login dan signup css3

Untuk source code lengkapnya anda bisa download melalui link dibawah ini

Download source code


Informasi

Nama : login & signup form css3 javascript

Format : rar

Ukuran : 250KB

Harga : Gratis

Download


Nah begitulah Cara Membuat Form Login Dan SignUp Keren Dengan CSS3 dan Javascript semoga bermanfaat untuk kita semuanya,

Saya akhiri wassalamu’alaikum wr, wb.

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *