Cara menggunakan login form html

Mungkin masih terlalu sederhana untuk anda pahami sebagai peranan sistem login autentifikasi hak akses. Oleh karena itu, pada dalam sebuah sistem dimana yang mensyaratkan user untuk login terlebih dahulu agar bisa masuk dan dapat mengakses user untuk login terlebih dahulu agar bisa mengakses data yang ada di dalamnya.

Table of Contents Show

Apa yang kita butuhkan?
Langkah langkah membuat form login HTML?
Apa yang dimaksud dengan form login?
Untuk apa kita membuat fitur login?
Langkah langkah membuat Form password?

Selain itu hal yang dibutuhkan untuk melakukan pengkodean script html adalah cukup dengan menggunakan text editor. Baik yang sangat sederhana notepad atau bahkan software text editor yang khusus dibuat untuk keperluan coding blueFish, ultraEdit, Notepad2, Komodoedit, Notepad++, Sublime text dan lain sebagainya.

Akan tetapi alangkah baiknya anda menggunakan software yang bersifat free dan software rekomendasi ini fitur-fiturnya cukup handal,yaitu mampu mengenali berbagai script bahasa pemograman

Kode merupakan script yang berisi untuk membuat form login yang terdiri dari textfield username dan password.

Digunakan untuk memasukan nama username dan password,ataupun menyuruh user untuk login terlebih dahulu sebeum masuk ke sistem utama, dimana variable digunakan untuk memberi value untuk menampilkan element.

Tentu kita tidak asing lagi dengan istilah login dalam dunia website. Halaman login sendiri dibuat untuk memberikan akses kepada user agar bisa menikmati fitur/layanan pada website tersebut yang biasanya sering kita temui pada sosial media ataupun e-commerce. Melihat banyaknya ragam desain form login dari tiap website yang menarik, apakah kalian tidak tertarik untuk mencoba membuatnya sendiri? Disini kita akan belajar bagaimana mendesain form login yang simple seperti contoh gambar di halaman cover.

Apa yang kita butuhkan?

Text Editor
Kalian bebas menggunakan text editor apapun.
Browser
Browser yang saya gunakan adalah Google Chrome.
Niat
Salah satu kunci dalam belajar adalah niat. (:

Selanjutnya, kita bisa memulai dengan meng-klik salah satu link pada index berikut :

INDEX

Source code

Membuat file HTML

Pertama-tama, kita harus membuat file html terlebih dahulu yaitu dengan cara :

Buatlah folder khusus untuk menyimpan file html
Klik kanan > New > text document
Simpanlah dengan nama login.html

Membuat judul halaman

Buka file html yang telah kita buat dengan text editor
Salin teks berikut ini :

<!DOCTYPE html>
<html>
 <head>
  <title>Login</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <style></style>
 </head>
 <body></body>
</html>

Simpan ke dalam file html yang telah kita buat
Klik kanan pada file html tersebut
Pilih Open with
Kemudian pilih browser sesuai yang kalian gunakan

Bila kita perhatikan nama tab pada tampilan browser seperti gambar di atas, nama tersebut sesuai dengan tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

0 pada file html yang kita buat.

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

1 disini memang berfungsi untuk menentukan judul dari halaman web yang kita buat dan nantinya akan muncul pada tab browser.

Kita wajib memasukkan tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

1 ke dalam tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

3 sebagaimana disebutkan dalam yang menjadi aturan dasar sebuah web.

Membuat card

Selanjutnya, kita akan membuat card atau kotak putih menyerupai kartu yang di depannya akan kita isi dengan tombol dan form

Tambahkan tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

4 di antara tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

5dan

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

Tambahkan teks berikut di antara tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

7dan

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

Jangan lupa simpan file setiap kali selesai memperbarui isi file. Apabila kita ingin melihat hasilnya, refresh browser yang kalian gunakan maka akan muncul tampilan seperti berikut :

Bila muncul tampilan di atas berarti kita telah berhasil membuat card. Kemungkinan tampilan di browser kalian bisa lebih besar atau lebih kecil dikarenakan resolusi setiap PC berbeda beda.

Sekarang mari kita bedah satu per satu maksud dari tiap baris yang baru saja kita tambahkan:

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

9 berfungsi untuk menerapkan style pada elemen html yang memiliki id bernama “card”

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

0 mengganti warna background pada elemen tersebut,

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

1 merupakan kode warna yang digunakan.

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

2 berfungsi untuk menumpulkan sudut sebesar

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

3, apabila kita menggantinya dengan 0px maka akan menghasilkan sudut lancip layaknya bangun segi empat pada umumnya.

```
body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}
```
4merupakan pengaturan untuk membuat bayangan pada elemen. Secara urut maksud dari angka angka tersebut ialah koordinat x, koordinat y, blur.
Kemudian
```
body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}
```
5 disini untuk menentukan warna bayangan tersebut, 3 angka 0 di dalamnya merupakan kode RGB untuk warna hitam dan 0.65 merupakan tingkat visibilitas bayangan tersebut.

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

6 merupakan tinggi elemen tersebut.

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

7 merupakan margin atau besar batas pada elemen tersebut. Secara urut maksud dari angka tersebut ialah batas atas, batas kanan, batas bawah, batas kiri.

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

8 disini berarti besar batas tersebut akan menyesuaikan dengan sendirinya.

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

9 merupakan panjang elemen tersebut

Mengganti warna background

Sekarang kita menentukan warna background dari halaman web untuk mempercantik tampilan.

Tambahkan teks berikut di antara tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

7dan

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

body {
       background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);
       background-repeat: no-repeat;
}

Berikut adalah hasilnya :

Teks tersebut merupakan CSS untuk mengubah warna background pada tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

5atau sama dengan mengubah background halaman web kita. Sekarang mari kita pahami makna tiap barisnya :

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

3 merupakan tag pada html, dengan kata lain kita akan menerapkan style pada tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

5 mengganti warna background.

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

6disini berfungsi untuk membuat warna gradient pada browser Google Chrome. Bila kalian menggunakan Mozilla maka ubah menjadi

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

7 sedangkan untuk Opera yaitu

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

8
Secara urut makna di dalam tanda kurung tersebut yaitu arah gradient, warna 1, warna 2.

Kita dapat menambahkan warna gradient sebanyak mungkin dengan macam warna minimal 2.

```
<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>
```
9 baris ini berfungsi menentukan apakah warna/gambar background perlu dilakukan perulangan. Misal kita menggunakan background warna hitam dan putih, maka jika dilakukan perulangan akan seperti warna Zebra.

Memberi judul form

Kini saatnya untuk memberi judul pada form yang akan kita buat, berikut adalah caranya :

Di dalam tag

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

0 tambahkan teks berikut :

<div id="card-content">
  <div id="card-title">
    <h2>LOGIN</h2>
    <div class="underline-title"></div>
  </div></div>

Bila kalian perhatikan, disini saya sengaja memberikan ruang kosong pada tag

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

1 di baris terakhir karena setelah ini kita akan menambahkan elemen baru sebelum tag tersebut.

Kemudian di dalam tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

7 tambahkan teks berikut :

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

Simpan file tersebut setelah menambahkan teks di atas kemudian lakukan refresh pada browser. Kita akan mendapatkan hasil seperti berikut :

Selanjutnya kita akan analisa teks CSS baru saja ditambahkan, agar tidak bertele tele kita akan bahas bagian yang belum dijelaskan sebelumnya.

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

3berfungsi untuk menerapkan style pada elemen html yang memiliki class bernama “underline-title”. Contoh,

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

5adalah pengaturan untuk besar batas bagian dalam sebuah elemen. Bila

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

6 berfungsi untuk mengatur batas bagian luar,

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

7 justru sebaliknya, dikarenakan kita tidak ingin elemen di dalam card terlalu dekat dengan tepi card maka kita atur batas bagian dalam agar elemen dapat berada jauh dari tepi. Secara urut maksud dari angka angka tersebut adalah batas atas-bawah, batas kanan-kiri.

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

8 berguna untuk menentukan font apa yang ingin kita gunakan.

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

9adalah jenis font yang kita gunakan dan

<form method="post" class="form"> </form>

0adalah typeface atau sejenis tipe font yang digunakan.

```
<form method="post" class="form"> </form>
```
1adalah besar jarak tiap huruf, semakin besar nilainya maka semakin renggang.

<form method="post" class="form"> </form>

2Selain berfungsi sebagai batas bagian dalam,

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

7 juga bisa digunakan untuk menentukan besar area sebuah elemen. Ibarat elemen adalah rumah dan padding adalah luas tanah rumah tersebut. Sehingga

<form method="post" class="form"> </form>

4 disini berfungsi menambah luas bagian bawah elemen.

<form method="post" class="form"> </form>

5Menambah luas bagian atas elemen

```
<form method="post" class="form"> </form>
```
6Mengatur teks agar berada di posisi tengah.

Membuat form

Sekarang kita mulai masuk ke elemen utama dari halaman login yaitu form. Pertama-tama kita akan menambahkan elemen sebelum

#card-content {
      padding: 12px 44px;
}
#card-title {
      font-family: "Raleway Thin", sans-serif;
      letter-spacing: 4px;
      padding-bottom: 23px;
      padding-top: 13px;
      text-align: center;
}
.underline-title {
      background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
      height: 2px;
      margin: -1.1rem auto 0 auto;
      width: 89px;
}

1 terakhir seperti yang saya jelaskan . Tambahkan teks berikut ini:

<form method="post" class="form"> </form>

Perlu kalian ketahui, setiap kali kita ingin membuat form maka kita wajib untuk membuat tag

<form method="post" class="form"> </form>

8 terlebih dahulu baru kemudian di dalamnya kita tambahkan

<form method="post" class="form"> </form>

9 sesuai dengan kebutuhan.

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

0disini menentukan untuk apa form tersebut dan berguna ketika kita telah menambahkan kode PHP dan SQL untuk proses validasi pada saat login,

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

1 berarti form tersebut digunakan untuk mengirimkan data pada database. Dikarenakan tujuan tutorial ini untuk desain, maka kita cukup fokus membahas HTML dan CSS. (:

Berikutnya, tambahkan teks berikut di dalam tag

<form method="post" class="form"> </form>

8 :

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

Maka kita akan mendapatkan hasil seperti berikut :

Tentu saja kita akan mendapatkan tampilan yang sangat berantakan karena disini kita baru saja menambahkan HTML, selanjutnya kita rapikan dan percantik menggunakan CSS. Salin teks berikut ke dalam tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

Sekarang coba simpan file setelah menambahkan teks tersebut dan lakukan refresh pada browser, maka kita akan mendapatkan tampilan seperti berikut

Cantik bukan?
Seperti yang kita lihat, CSS disini berperan penting dalam merapikan sekaligus mempercantik tampilan. Selanjutnya mari kita analisa style yang baru saja kita gunakan, saya hanya menjelaskan bagian yang belum kita bahas sebelumnya.

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

4 disini berguna untuk menghilangkan underline pada elemen

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

6 berguna mengatur ukuran font

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

7 mengatur warna font dan

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

8 merupakan kode hex dari warna yang digunakan.

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

9 berguna untuk menampilkan elemen supaya sebaris dengan elemen sebelumnya

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

0 berguna untuk memposisikan elemen yang memiliki style

<label for="user-email" style="padding-top:13px">&nbsp;Email</label>
  <input
   id="user-email"
   class="form-content"
   type="email"
   name="email"
   autocomplete="on"
   required />
  <div class="form-border"></div><label for="user-password" style="padding-top:22px">&nbsp;Password</label>
  <input
   id="user-password"
   class="form-content"
   type="password"
   name="password"
   required />
  <div class="form-border"></div><a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

9 berada di sebelah kiri

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

2 merupakan pengaturan untuk elemen yang memiliki style

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

3 yang sebelumnya sebaris menjadi sejajar ibarat dalam 1 kolom.

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

4berfungsi untuk menghilangkan garis pembatas pada form

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

5 menghilangkan pembatas perwarna biru ketika kita meng-klik form tersebut.

Membuat tombol login

Finally, kita telah sampai pada bagian akhir yang tak kalah penting dalam mendesain halaman login yaitu tombol login itu sendiri. Berikut adalah caranya:

Tambahkan elemen berikut setelah baris

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

6dan sebelum

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

Simpan file tersebut dan lakukan refresh pada browser, kita akan mendapatkan hasil seperti berikut :

Apabila telah muncul tampilan tersebut selanjutnya kita lakukan styling menggunakan CSS, salin teks berikut ke dalam tag

#card {
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        height: 410px;
        margin: 6rem auto 8.1rem auto;
        width: 329px;
}

#signup {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 16px;
    text-align: center;
}
#submit-btn {
    background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
    border: none;
    border-radius: 21px;
    box-shadow: 0px 1px 8px #24c64f;
    cursor: pointer;
    color: white;
    font-family: "Raleway SemiBold", sans-serif;
    height: 42.3px;
    margin: 0 auto;
    margin-top: 50px;
    transition: 0.25s;
    width: 153px;
}
#submit-btn:hover {
    box-shadow: 0px 1px 18px #24c64f;
}

Perhatikan baris

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

0 merupakan CSS selector yang berguna untuk menerapkan style ketika kita mengarahkan cursor mouse ke elemen tersebut.

Bila kita ingin membuat sedikit animasi pada CSS, maka kita perlu membuat 2 style yang berbeda. Pada contoh di atas terdapat style pada

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

1 dan adapula

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

9. Pada

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

1 kita membuat style utama pada elemen dengan id tersebut, dan pada

a {
    text-decoration: none;
}
label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}
#forgot-pass {
    color: #2dbd6e;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}
.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}
.form-border {
    background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
    height: 1px;
    width: 100%;
}
.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}

9 kita membuat style tambahan ketika cursor mouse diarahkan pada elemen dengan id tersebut. Agar perubahan yang terjadi terlihat mulus maka di dalam

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

1 kita menambahkan

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

6yang maksudnya adalah ketika kita mengarahkan cursor mouse ke elemen tersebut akan terjadi transisi dengan durasi 250ms.

Untuk memudahkan pemahaman, langsung saja simpan file setelah menyalin teks tersebut dan lakukan refresh pada browser. Coba arahkan cursor mouse kalian pada tombol Login dan perhatikan apa yang terjadi.

Source Code

Apabila masih ada error pada beberapa langkah tersebut, berikut saya berikan source code lengkap untuk mendesain Login Card.

Cara Membuat Form Login yang Menarik dengan HTML.

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .

2. Buat Kepala Halaman Form Login. ... .

3. Beri Judul Halaman Form Login. ... .

3. Sisipkan File CSS. ... .

4. Buat Badan Form Login. ... .

Buat Layout Form Login. ... .

6. Beri Judul Form Login. ... .

7. Buat Kotak Form Login..

Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi.

Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Proses Login minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.