Cara Membuat Desain Form Login HTML dengan CSS

-

 Cara Membuat Desain Form Login HTML dengan CSS





Bagi teman-teman yang saat ini sedang belajar web desain, tutorial kali ini mengenai cara membuat desain form login di html dengan CSS mungkin akan membantu sebagai referensi desain form login pada aplikasi web yang akan kalian buat.

Desain form yang di buat murni menggunakan CSS (Cascading Style Sheets), kalo tidak ingin ribet ya pakai aja framework CSS seperti bootstrap.


Membuat Desain Form Login HTML dengan CSS

Form login pada umumnya hanya terdapat dua field yaitu username dan password kemudian ada 2 tombol login/submit dan reset.

Kita akan membuat setiap elemen html tersebut, lalu kemudian tinggalkan kita definisikan perintah CSS nya.

1. Buat file login.html
Buatlah file baru dengan nama login.html di teks editor dengan isi kode seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Desain Form Login HTML Dengan CSS - www.kelasprogrammer.com</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <div id="container">
        <form>
            <img id="logo" src="gambar/logo.png">
            <label for="fname">Username:</label>
            <input type="text" name="Username" placeholder="Masukan Username">
            <label for="lname">Password:</label>
            <input type="password" name="Password" placeholder="Masukan Password">
            <input type="submit" value="Login">
            <input type="reset" value="Reset">
          </form>
     </div>
</body>
</html>




Jika membuka file login.html di browser maka hasilnya seperti beikut ini:




Belum ada style-nya sama sekali karena memang kita belum membuatnya, mari kita lanjut pada langkah kedua.

2. Membuat File style.css
Dalam direktori yang sama buat file baru dengan nama style.css seperti berikut:


body{
    font-family: sans-serif;
    background:  #ccfff2;
}

#logo{
   width: 100%;
   margin:auto;
   padding:auto;
   padding-bottom: 20px;
}

#container{
   width: 360px;
   background: white;
   margin:180px auto;
   padding: 30px 20px;
   border-radius: 6px;
}
input[type=text],
input[type=password]{
   font-size: 15px;
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   box-sizing: border-box;
   border: 2px solid #ccc;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   outline: none;
   background-size: 30px;
   background-position: 5px 5px;
   background-repeat: no-repeat;
   padding-left: 40px;
   border-radius: 5px;
}
input[type=text]{
   background-image: url('gambar/user.png');
}
input[type=password]{
   background-image: url('gambar/password.png');
}
       
input[type=text]:focus,
input[type=password]:focus {
   border: 2px solid #555;
}

input[type=submit],
input[type=reset]{
   font-size: 15px;
   background: #009973;
   color: white;
   border: white 3px solid;
   border-radius: 5px;
   padding: 12px 20px;
   cursor:pointer;
   margin-top: 10px;
}

input[type=submit]:hover,
input[type=reset]:hover{
   opacity:0.9;
}

input[type=reset]{
   background:  #999999;
}


Struktur perintah CSS terdiri dari:

1. Selector
Selector adalah elemen html yang akan di buat style-nya

Contoh : body, #logo, #container, input[type=text],input[type=password] dan lainnya merupakan selector

logo dan container menggunakan tanda # karena menggunakan atribut ID. Kita juga bisa mengganti dengan atribut class dan menggunakan tanda . (titik).


2. Declaration
Declaration adalah bagian perintah CSS dalam blok {} yang mana perintah-perintah tersebut yang akan mendefinisikan style elemen yang digunakan.

Declaration terdiri dari properti dan nilai (value).

Sebagai contoh perhatikan pada selector body

Dimana terdapat properti font-family yang memiliki nilai sans-serif. Ini berarti seluruh elemen yang berada dalam tag <body> akan menggunakan jenis huruf sans-serif.

Contoh berikutnya pada selector #container terdapat properti width dengan nilai 360px. Ini artinya elemen container nantinya akan memiliki lebar 360px. Begitu juga dengan perintah-perintah lainnya.

Agar teman-teman paham bagaimana cara membuat style menggunakan css kalian harus memahami penggunaan properti-properti ini untuk membuat style CSS-nya.


3. Buat Direktori Gambar dan masukan contoh gambar
Buat folder gambar kemudian masukan contoh-contoh gambar ke dalam foder tersebut.


gambar di sini sebagai gambar logo website kita dan icon pada field username dan password. Saya mencontohkan dengan menggunakan logo blog saya ‘Kamar Ahannn’.


Tentu saja kalian bisa menggunakan gambar logo dan icon yang lain.


4. Hasil Akhir
Hasil akhirnya akan seperti pada gambar berikut:




Segitu aja ya ges pembahasan mengenai Cara membuat desain form login di html dengan menggunakan css. Semoga bisa membantu:)

Tengkyu









Komentar

Posting Komentar

Postingan populer dari blog ini

Part 10 : Perulangan While Pada PHP

-
Gambar
  🌕 Perulangan While Pada PHP          While adalah perintah pada PHP dan bahasa pemrograman lainnya untuk membuat sebuah perulangan yang tidak diketahui berapa kali perulangan tersebut dilakukan.  Untuk contoh penulisan dan struktur cara penggunaan perulangan while pada PHP dapat dilihat pada contoh di bawah ini while( Kondisi ){   Statement. } Dapat dilihat pada contoh penulisan while diatas setelah menuliskan while kemudian di dalam tanda kurung berisi kondisi nilai yang harus terpenuhi agar while dijalankan. Kemudian di dalam tanda kurung kurawal berisi statement yang di jalankan dalam bentuk perulangan apabila kondisi terpenuhi. Statement ini maksudnya adalah perintah syntax yang akan dijalankan dalam bentuk perulangan apabila kondisi terpenuhi. <?php  $x = 1; while ($x <= 10) { echo "Angka $x <br/>"; $x++; }  ?> Perhatikan contoh diatas, perintah while digunakan untuk melakukan perulangan. variabel x mem...
Read more »

Part 11 : Perulangan For Pada PHP

-
Gambar
  🌕 Perulangan For Pada PHP          Perulangan For digunakan untuk membuat sebuah perulangan pada pemrograman termasuk dalam bahasa pemrograman PHP. Tujuan hampir sama dengan while, hanya saja perulangan while memiliki jumlah batas yang tidak diketahui, sedangkan perulangan for memiliki batas berapa kali perulanga di ulangi dan bats dari perulangannya sudah ditentukan pada kondisi perulangan for. Untuk pemahaman yang lebih jelasnya bisa dilihat contoh perulangan for berikut: <?php  for ($i=1; $i <= 10 ; $i++) {     echo $i;   //Membuat perulangan menampilkan angka 1 sampai 10 } ?> Pada contoh perulangan for diatas kita mennetukan variabel i sama dengan 1, kemudian variabel i lebih kecl sama dengan 10, artinya bilangan 1 sampai 10, kemudian menampilkan isi dari variabel dalam bentuk perulangan for dengan menampilannya di dalam perulangan for. Untuk penulisan perulangan for kondisi perulangan diletakkan di dalam tanda...
Read more »

Part 5 : Tipe Data Pada PHP

-
Gambar
  🌕 Tipe Data Pada PHP     Sama seperti bahasa pemrograman lainnya yang memiliki tipe data, sama halnya dengan bahasa pemrograman PHP.      Berikut ini ada beberapa tipe data pada PHP:          1. String          2. Integer          3 . Float          4. Boolean          5. Array          6. Object          7. NULL             Dari tipe data PHP diatas hampir semua tipe data tersebut sering digunakan dalam membangun sebuah aplikasi. Kali ini kita akan jelaskan satu persatu. 🌕 Tipe Data String Pada PHP          Tipe DataString adalah tipe data yang berbentuk teks. Cara penulisan nya di letakkan di tengah dengan diapit tanda petik " ".          Contohnya: 🌕 Tipe Data Integer pada PHP    ...
Read more »