Blog

Panduan Lengkap! Membuat Login From yang Menarik dengan HTML dan CSS

Banyak orang yang familiar dengan istilah login form. Login form biasanya berisikan inputan yang harus diisi oleh pengguna, seperti email dan password. Dari segi tampilan, setiap website tentunya mempunyai ciri khasnya tersendiri.

Nah, untuk itu, Hosteko akan beri kamu informasi penting mengenai langkah-langkah membuat login form menggunakan bahasa markup HTML dan CSS. Dijamin penampilan website kamu akan menarik dan atraktif. Penasaran? Yuk, ikuti langkah-langkahnya sampai akhir yaa!

Alat yang Harus Disiapkan…

Sebelum mulai membuat login HTML, sebaiknya kamu siapkan terlebih dahulu alat-alat yang diperlukan dalam pembuatan login from, yaitu sebagai berikut:

Teks Editor

Teks editor adalah perangkat lunak yang memungkinkan seseorang untuk membuka, melihat, dan mengedit kode atau teks sederhana. Dengan menggunakan teks editor, kamu nantinya dapat membuat kode HTML dan CSS. Teks editor yang bisa kamu gunakan, diantaranya seperti Notepad++, Visual Studio Code, Sublime, Atom, dan lain sebagainya.

Browser

Browser berfungsi untuk membantu kamu melihat tampilan yang dihasilkan dari kode login HTML yang sudah kamu buat. Banyak pilihan browser yang tersedia, seperti Chrome, Firefox, Opera, Edge, Safari, dan lain sebagainya.

Cara Membuat Login Form HTML

Jika kamu sudah menyiapkan dua alat yang telah disebutkan di atas, maka sekarang kamu sudah siap untuk membuat login form HTML. Berikut adalah langkah-langkah yang dapat kamu lakukan untuk membuat login form yang menarik:

Mendeklarasikan HTML File

Pertama-tama, buka file login html milik kamu, yaitu login.html, lalu tuliskan script berikut ini di bagian awal:

<!DOCTYPE html>
<html>
</html>

Untuk apa itu? Doctype atau document type declaration adalah pernyataan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan.

Nah, agar login form dapat ditampilkan dengan benar, script ini harus dituliskan di bagian awal file html HTML kamu. Setelah menulis doctype, selanjutnya kamu dapat menggunakan tag HTML yang berisi script login form HTML.

Membuat Head pada Halaman Login Form Html

Langkah selanjutnya adalah menambahkan tag <head></head>. Tag ini berisi informasi tentang halaman yang tidak ditampilkan di halaman web browser. Misalnya, source CSS dan JS yang diperoleh dari sumber eksternal, informasi meta, title, dan lain sebaginya. Kecuali, tag <title></title> yang merupakan salah satu tag yang akan ditampilkan.

Sehingga login from html kamu terlihat seperti ini:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Menambahkan Judul Halaman Login Form

Setelah menambahkan tag head, selanjutnya kamu dapat menambahkan tag title yang digunakan untuk menampilkan judul halaman web di title bar web browser. Sehingga script login html menjadi seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
</html>

Menambahkan CSS untuk Mempercantik Login Form

Untuk menambahkan CSS kamu bisa memanggilnya dari file lain, misalnya seperti ini:

<html>
  <head>
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
  </head>

Namun, kamu juga dapat menambahkan script CSS langsung ke file login.html dengan menambahkan tag <style></style> di bawah tag head. Tag style ini berisi berbagai jenis CSS untuk mempercantik halaman kamu.

<html>
  <head>
    <title>Login Page</title> 
  </head> 
  <style media="screen"> 
  </style>

Membuat Bagian Badan pada Halaman Login Form

Setelah menambahkan bagian kepala, selanjutnya kamu perlu menambahkan tag body. Tag ini berisi elemen yang nantinya akan kamu gunakan untuk membuat tampilan login form html. Elemen ini mencakup teks yang berupa <p>, heading <h1> hingga <h6>, menampilkan gambar <img />, membuat tabel <table>, dan lain sebagainya.

Untuk membuat bagaian badan, caranya cukup dengan menambahkan tag <body></body> di bawah tag <style></style>. Jika sudah, maka kamu bisa melangkah ke langkah selanjutnya.

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
  </body>
</html>

Layouting Login Form

Untuk membuat script login html yang rapi, kamu perlu membuat wadahnya. Karena tag body saja tidak cukup untuk mengatur script-script lai di dalamnya. Untuk membuat wadah tersebut, kamu dapat menggunakan tag <div></div> untuk menjadikan beberapa elemen menjadi satu.

Tag div juga mempermudah dalam menambahkan style dengan CSS dan perlakuan khusus lainnya, yang kemudian dapat diberi atribut class, id, title dan lain sebagainya.

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <center>
      <div class="container">
      </div>
    </center>
  </body>
</html>

Nah, pada script login form html tersebut kamu juga dapat menambahkan tag center untuk menengahkan semua element yang diapit oleh tag tersebut. Sebab, kita akan membuat login form yang berada di tengah halaman.

Menambahkan Konten Judul pada Login Form

Judul halaman digunakan oleh mesin pencari untuk menilai kinerja SEO. Nah, agar login form milik kamu dapat dibaca oleh mesin pencari, maka kamu perlu menggunakan tag heading atau <h1>. Berikut adalah script login form HTML selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <center>
      <div class="container">
        <h1>Login Hosteko</h1>
      </div>
    </center>
  </body>
</html>

Membuat Kotak untuk Login Form

Setelah memiliki judul halaman, maka sekarang adalah waktunya untuk menambahkan kotak yang nantinya akan memuat elemen yang berada di halaman. Mirip dengan tag div yang digunakan untuk pengelompokan, namun form lebih digunakan untuk elemen yang berkaitan dengan inputan. Misalnya, untuk inputan username dan password.

Di bawah ini adalah contoh script login form html-nya:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <center>
      <div class="container">
        <h1>Login Hosteko</h1>
          <hr/>
          <form>
          </form>
      </div>
    </center>
  </body>
</html>

Pada tag form ini, kamu bisa menambahkan beberapa atribut seperti tindakan yang diisi dengan lokasi script yang digunakan untuk memproses data pada server dan atribut method yang berfungsi untuk menentukan metode form yang digunakan, seperti POST dan GET.

Script diatas memiliki tag hr yang digunakan untuk memisahkan elemen satu dengan elemen lainnya. Pada script di atas penggunaan tag hr digunakan untuk menjadi garis pemisah antara judul dan form.

Menambahkan Inputan

Selanjutnya kamu dapat menambahkan inputan yang digunakan untuk memasukkan email dan password.

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <center>
      <div class="container">
        <h1>Login Hosteko</h1>
         <hr/>
         <form>
            <input
              type="text"
              class="inputa"
              placeholder="Masukan Username"
             />
             <input
              type="password"
              class="inputa"
              placeholder="Masukan Password"
             />
         </form>
      </div>
    </center>
  </body>
</html>

Nah, tag input ini berfungsi sebagai kolom informasi untuk diisi oleh pengguna. Tag input memiliki atribut type yang mendefinisikan tipe inputnya. Untuk username tipe inputnya adalah teks, dan untuk password tipe inputnya adalah password, sehingga teks yang dimasukkan tidak ditampilkan dan diganti oleh karakter khusus.

Atribut selanjutnya adalah placeholder yang digunakan sebagai petunjuk singkat untuk menjelaskan value dari input tadi. Atribut selanjutnya adalah class yang mendeklarasikan CSS yang digunakan.

Membuat Tombol Login Form

Langkah terakhir dalam membuat login form HTML adalah menambahkan tombol yang akan digunakann. Dua tombol digunakan di sini adalah tombol login dan juga tombol reset untuk memudahkan pengguna ketika terjadi kesalahan.

Script form login HTML selengkapnya adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <center>
      <div class="container">
        <h1>Login Hosteko</h1>
          <hr/>
          <form>
            <input
             type="text"
             class="inputa"
             placeholder="Masukan Username"
            />
            <input
             type="password"
             class="inputa"
             placeholder="Masukan Password"
            />
           <input type="submit" class="wed" />
           <input type="reset" class="wed" />
        </form>
      </div>
    </center>
  </body>
</html>

Untuk membuat tombol, kamu dapat menggunakan tag input tadi atau tag <button/>. Namun kali ini kita akan menggunakan tag input dengan memasukkan beberapa type untuk submit dan reset.

Ini adalah langkah terakhir dalam membuat login form HTML. Selanjutnya, kita akan membahas cara menambahkan style CSS untuk membuat login form yang menarik.

Membuat Login Form yang Menarik dengan CSS

Setelah membuat kerangka login HTML tanpa desain, yang pasti akan membuat orang malas melihat tampilannya. Maka, sekarang kita akan membuat form login yang menarik dan indah dengan menggunakan bahasa CSS.

Berikut adalah langkah-langkahnya:

Memberikan Gambar pada Body

Langkah pertama untuk mempercantik login html adalah dengan menambahkan gambar backgorund.

body {
    background-image: url(image/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

Berikut adalah penjelasan dari penggunaan tag di atas:

- Background image untuk mengambil gambar yang ada di folder images. Dalam project ini yang bernama background.jpg.
- Background repeat yang berisi no-reapet untuk menandakan bahwa gambar tidak akan diulang.
- Background size berarti ukuran yang digunakan untuk menampilkan gambar. Di sini menggunakan cover karena akan menjadi background halaman.

Desain Container

Selanjutnya kita akan mendesain div container yang sudah kita buat tadi dengan menambahkan beberapa style, seperti di bawah ini:

.container {
    background: white;
    width: 35 %;
    height: 350px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    margin-top: 150px;
  }

Berikut penjelasan dari penggunaan style di atas:

- Background berfungsi sebagai warna background yang akan ditampilkan. Di sini diisi dengan warna putih.
- Width digunakan untuk mengatur lebar dari suatu elemen, bisa diisi dengan bentuk presentase atau dalam px.
- Height digunakan untuk menentukan tinggi dari suatu elemen, sama dengen width bisa dalam bentuk presentase maupun px.
- Border berfungsi untuk memberikan garis pada bagian luar elemen sehingga nanti terlihat ada garis yang mengelilingi. Dari style di atas dapat dibaca bahwa border dengan ketebalan 1px jenis solid dengan warna #d2d2d2.
- Margin top berfungsi untuk mengatur jarak tepi pada bagian atas halaman.

Desain Judul halaman

Sekarang kita akan mendesain judul halaman yang tadi menggunakan hypertext. Contoh dari script CSS-nya sebagai berikut:

.container  h1 {
    text-align: center;
    padding: 5px;
    color: #6a82fb;
    font-family: Product Sans;
  }

Mengapa masih menggunakan class container? Karena judul yang sudah dibuat tadi berada di dalam div dengan class container.

- Text align berfungsi untuk memposisikan sebuah teks. Ada beberapa posisi yang bisa digunakan, seperti center, right, left, dan justify.
- Padding berfungsi untuk mengatur jarak elemen HTML dari dalam.
- Color berfungsi untuk mendefiniskan warna yang digunakan dalam teks tersebut.
- Font familly merupakan properti yang digunakan untuk menentukan dan merubah jenis font yang digunakan pada teks.

Desain tag hr

.container  hr {
    width: 50%;
    height: 4px;
    border: none;
    background: #6a82fb;
  }

Tag hr disini digunakan untuk memisahkan judul halaman dan inputan pada form login html. Ada beberapa style yang digunakan, yaitu:

- Width untuk mengatur lebar dari hr tersebut.
- Heigh untuk mengatur tinggi dari hr atau dalam case ini height bisa disebut untuk mengatur ketebalan.
- Border none karena pada elemen kali ini tidak membutuhkan border.
- Background untuk mengatur warna yang digunakan pada elemen.

Desain Layouting Form

.container  form {
    margin-top: 25px;
    padding: 10px;
  }

Form digunakan untuk mengelompokkan inputan dan tombol pada from login html yang sudah kita buat. Nah, di sini ada beberapa styling yang ditambahkan, yaitu:

- Margin top untuk mengatur jarak tepi pada bagian atas halaman. Bisa dibilang bahwa margin top di sini berfungsi untuk mengatur jarak antara form dan juga hr.
- Padding untuk mengatur jarak elemen HTML dari dalam atau mengatur jarak antara form dan juga container. Semakin besar paddingnya maka semakin besar jarak keduanya.

Desain Inputan Email dan Password

.container  .inputa {
    width: 90%;
    margin-top: 1px;
    height: 50px;
    border: 0px;
    border-bottom: 1px solid #6a82fb;
    font-size: 16px;
    font-family: OpenSans-Light;
    background: transparent;
  }

Selanjutnya kita akan mendesain inputan email dan password. Dari code di atas bisa dilihat bahwa terdapat banyak styling yang digunakan, yaitu:

- Width untuk mengatur lebar inputan.
- Margin top untuk mengatur jarak atas antara inputan email dan inputan password.
- Height untuk menentukan tinggi dari inputan.
- Border untuk mengatur garis tepi dari elemen. Disini diisi 0 yang berarti berfungsi untuk menghapus border dari inputan.
- Border bottom untuk mengatur border bagian bawah, baik untuk ketebalan dan warna yang digunakan.
- Font size adalah ukuran font yang diterapkan.
- Font familly adalah properti untuk menentukan dan merubah jenis font yang digunakan pada teks.
- Background untuk menentukan warna. Di sini diisi dengan transparent yang berarti inputan tidak memiliki background.

Desain Tombol

.container  .wed {
    margin-top: 40px;
    width: 45%;
    height: 40px;
    background: #6a82fb;
    border: none;
    color: white;
    font-family: product sans;
    font-size: 20px
    border-radius: 5px
  }

Di sini ada 2 tombol, yaitu reset dan login, namun keduanya memiliki desain yang sama. Beberapa style yang digunakan, yaitu:

- Margin top untuk mengatur jarak atas antara inputan password dengan tombol.
- Width untuk mengatur lebar tombol.
- Height untuk menentukan tinggi dari tombol.
- Background untuk menentukan warna tombol.
- Border untuk mengatur garis tepi dari elemen. Di sini diisikan 0 yang berarti berfungsi untuk menghapus border dari tombol.
- Color untuk menentukan warna dari teks di dalam tombol.
- Font familly adalah properti untuk menentukan dan merubah jenis font yang digunakan pada teks.
- Font size adalah ukuran font yang diterapkan.
- Border radius untuk menambahkan lekukan seperti lingkaran pada tombol.