Blog

Begini Caranya! Langkah Menciptakan Login Form Dengan HTML dan CSS

Banyak orang yang familiar dengan istilah login form. Login form biasanya menyertakan inputan yang harus diisi pengguna, seperti alamat email dan kata sandi. Setiap website atau situs tentunya mempunyai ciri khas tersendiri dalam tampilannya.

Untuk itu, Hosteko menyarankan penggunaan bahasa markup HTML dan CSS untuk membuat login form. Dijamin Anda akan mendapatkan tampilan yang atraktif dan atraktif. Ingin tahu kelanjutannya? Ikuti langkah-langkahnya hingga selesai.

Hal yang Perlu Dipersiapkan

Nah, sebelum memulai membuat login html, alangkah baiknya kamu harus menyiapkan kebutuhan yang diperlukan.

1. Teks editor

Teks editor adalah perangkat lunak yang memungkinkan Anda membuka, melihat, dan mengedit kode dan teks sederhana. Anda nantinya dapat membuat kode HTML dan CSS menggunakan fitur editor teks.

Anda dapat menggunakan beberapa editor teks yang direkomendasikan, termasuk Notepad++, Visual Studio Code, Sublime, dan Atom.

2. Browser

Browser berfungsi untuk menampilkan iklan yang dihasilkan dari kode login HTML yang Anda buat. Opsi browser yang tersedia adalah: Chrome, Firefox, Opera, Edge, Safari, dan lain sebagainya.

Cara Membuat Login Form HTML

Setelah Anda mempersiapkan dua alat pertempuran di atas, Anda siap untuk membuat login form HTML. Berikut langkah-langkah yang dapat Anda lakukan untuk membuat login form yang menarik.

1. Deklarasi File HTML

Buka file login HTML (login.html) dan tulis skrip ini terlebih dahulu.

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

Apa fungsinya? Doctype, atau deklarasi tipe dokumen, adalah pernyataan yang ditulis untuk memberi tahu browser Web aturan penulisan dokumen yang sedang ditampilkan. Ini harus ditempatkan di bagian atas file HTML agar formulir pendaftaran dapat ditampilkan dengan benar.

Setelah menulis doctype, Anda dapat menggunakan tag HTML yang berisi skrip formulir login HTML.

2. Buat Header 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.

Contoh: source css, js atau lainnya yang diperoleh dari sumber eksternal, informasi meta, title, dll. Namun tag <title></title> tersebut merupakan salah satu tag yang ditampilkan. Sehingga login form melalui skrip HTML terlihat seperti ini:

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

3. Tambahkan Judul Halaman Login Form

Setelah menambahkan tag head, Anda dapat menambahkan tag title, yang digunakan untuk menampilkan judul halaman web di bilah judul browser web. Selanjutnya, tambahkan skrip login HTML seperti berikut:

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

4. Tambahkan CSS untuk Mempercantik Login Form

Untuk menambahkan CSS ini, Anda dapat memanggilnya dari file lain, misalnya:

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

Namun selain cara itu, kamu juga bisa langsung menambahkan script css pada file login.html itu dengan cara menambahkan tag <style></style> di bawah tag head. Tag style nantinya akan berisi macam-macam css yang akan mempercantik halamanmu.

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

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

5. Buat Bagian Isi pada Halaman Login Form

Setelah menambahkan bagian head, selanjutnya yang perlu kita lakukan adalah tag body. Tag ini berisi elemen yang nantinya akan Anda gunakan untuk membuat tampilan form login HTML. Elemen ini mencakup teks paragraph <p>, heading <h1> hingga <h6>, menampilkan gambar <img />, membuat tabel <table>, dan banyak lagi.

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

Cukup tambahkan tag <body></body> di bawah tag <style></style> jika sudah berarti kamu sudah bisa melangkah ke step selanjutnya.

6. Layouting Login Form

Untuk membuat script login HTML yang jelas, Anda perlu membuat sebuah wadah. Tag body saja tidak cukup untuk mengatur skrip lain di dalamnya. Untuk membuat wadah, Anda dapat menggunakan tag <div></div> untuk menjadikan beberapa elemen menjadi satu.

Tag div memungkinkan Anda menambahkan style dengan mudah menggunakan CSS dan pemrosesan khusus lainnya, serta menetapkan 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>

Anda sekarang juga dapat menambahkan tag center ke skrip formulir login HTML Anda untuk memusatkan semua elemen di kedua sisi tag ini. Buat formulir pendaftaran di tengah halaman.

7. Tambahkan Konten Judul pada Login Form

Judul halaman digunakan oleh mesin pencari untuk mengevaluasi kinerja SEO. Agar login form Anda dapat dibaca oleh mesin pencari, gunakan tag heading atau <h1>. <h1>Ini judul halaman</h1>

Berikut script form login HTML selengkapnya.

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

8. Buat Kotak untuk Login Form

Setelah Anda menetapkan judul halaman, nanti Anda akan menambahkan kolom yang berisi elemen pada halaman tersebut.

Mirip dengan tag div yang digunakan untuk pengelompokan, namun “form” sering digunakan untuk elemen terkait masukan. Misalnya, masukkan nama pengguna dan kata sandi Anda. Di bawah ini adalah contoh skrip formulir login HTML.

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

Tag form ini memungkinkan Anda menambahkan beberapa atribut seperti action yang mengatur lokasi skrip yang digunakan untuk memproses data di server, dan atribut method yang menentukan metode formulir mana yang digunakan, seperti POST dan GET.

Script diatas memiliki tag hr yang digunakan untuk memisahkan elemen satu dengan elemen lainnya. Script menggunakan akhiran hr sebagai pembatas antara judul dan formulir.

9. Menambahkan Input

Selanjutnya Anda dapat menambahkan input yang akan digunakan untuk memasukkan email dan password Anda.

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

Tag masukan ini bertindak sebagai kolom informasi untuk dimasukkan oleh pengguna. Tag input memiliki atribut type yang mendefinisikan tipe input. Untuk username tipe inputnya adalah teks biasa, dan untuk password tipe inputnya adalah “password”, sehingga teks yang dimasukkan tidak ditampilkan dan diganti dengan karakter khusus.

Atribut berikutnya adalah placeholder yang digunakan sebagai referensi cepat untuk menjelaskan nilai masukan. Atribut selanjutnya adalah kelas yang mendeklarasikan CSS yang digunakan.

10. Membuat Tombol Login Form

Langkah terakhir dalam membuat formulir login HTML adalah menambahkan tombol yang ingin Anda gunakan.

Dua tombol digunakan di sini adalah tombol login dan tombol reset nilai tombol input 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, Anda dapat menggunakan tag input 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 formulir pendaftaran HTML. Selanjutnya, Anda akan mempelajari cara menambahkan gaya CSS untuk membuat formulir login yang menarik.

Membuat Login Form Menarik dengan CSS

Setelah membuat framework login HTML datar tanpa desain apa pun, orang pasti akan malas melihat tampilannya. Jadi untuk membuat login form yang menarik dan indah, kita kembali membutuhkan bahasa CSS. Berikut langkah-langkahnya.

1. Tambahkan Gambar pada Body

Langkah pertama untuk mempercantik login HTML Anda adalah menambahkan gambar latar belakang.

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

Kami akan menjelaskan cara menggunakan tag di atas.

Background image di sini berasal dari gambar bernama “background.jpg” di folder gambar proyek ini.
Background repeat yang berisini no-reapet dimaksudkan untuk menunjukkan bahwa gambar tidak terulang.
Background size berarti ukuran yang digunakan untuk menampilkan gambar. Di sini kita akan menggunakan “cover” karena merupakan latar belakang halaman.

2. Desain container

Selanjutnya, mari kita desain div container yang kita buat sebelumnya dengan menambahkan beberapa gaya seperti yang ditunjukkan di bawah ini.

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

Petunjuk penggunaan style di atas adalah sebagai berikut:

Background ini berfungsi sebagai warna background yang ditampilkan, di sini diisi dengan warna putih.
Width digunakan untuk mengatur lebar elemen. Anda dapat memasukkan persentase atau dalam px.
Height digunakan untuk menentukan tinggi suatu elemen dan seperti width dapat ditentukan dalam format persentase atau px.
Border digunakan untuk menggambar garis di sekeliling bagian luar suatu elemen, sehingga memberikan kesan bahwa elemen tersebut dikelilingi oleh garis. Dari style di atas, Anda dapat melihat bahwa batasnya setebal 1px dan berwarna solid dengan warna #d2d2d2.
Margin top digunakan untuk mengatur ruang margin di bagian atas halaman.

3. Mendesain Judul Halaman

Selanjutnya mari kita desain judul halaman menggunakan hypertext. Contoh skrip CSS tersebut.

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

Mengapa masih menggunakan class container? Jawabannya karena judulnya ada di dalam div class container.

Text align, untuk memposisikan sebuah teks. Berbagai posisi dapat digunakan seperti center, right, left, dan justify.
Padding, yang mengatur jarak antar elemen HTML dari dalam.
Color, untuk mendefiniskan warna yang digunakan dalam teks.
Font familly, properti yang digunakan untuk menentukan dan mengubah font yang digunakan dalam teks.

4. Desain Tag hr

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

Tag hr digunakan di sini untuk memisahkan judul halaman dan input login form HTML. Ada beberapa style yang digunakan seperti.

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

5. Desain Layouting Form

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

Form digunakan untuk mengelompokkan input dan tombol dalam HTML dari login form yang Anda buat. Jadi beberapa elemen style telah ditambahkan di sini.

Margin top, yang mengatur jarak margin di bagian atas halaman. Kita dapat mengatakan bahwa margin top digunakan untuk mengatur jarak antara form dan hr.
Padding, yang mengatur jarak dari dalam elemen HTML atau antara formulir dan container. Semakin besar paddingnya, semakin besar pula jarak antara keduanya.

6. 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, desain alamat email dan masukan kata sandi. Dari kode di atas Anda dapat melihat banyak style yang digunakan.

Width, untuk mengatur lebar input.
Margin top, mengatur spasi teratas antara input email dan kata sandi.
Height, yang menentukan ketinggian inputan.
Border, yang menetapkan batas elemen. Memasukkan 0 di sini akan menghapus batas dari input.
Border bottom, menetapkan margin bawah dalam hal ketebalan dan warna yang digunakan.
Font size, ukuran font yang diterapkan.
Font familly, properti untuk menentukan dan mengubah font yang digunakan dalam teks.
Background, untuk menentukan warna. Disini diisi dengan transparent berarti inputan tidak memiliki background.

7. Desain tombol

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

Ada dua tombol di sini, Reset dan Sign In, keduanya memiliki desain yang sama.

Beberapa style yang digunakan yaitu

Margin top, yang menetapkan spasi atas antara input kata sandi dan tombol.
Width, untuk mengatur lebar tombol.
Height, untuk menentukan ketinggian tombol.
Background, untuk menentukan warna tombol.
Border, untuk mengatur garis tepi dari elemen. Disini diisikan 0 berarti berfungsi untuk menghapus border dari tombol.
Color, untuk menentukan warna dari teks di dalam tombol.
Font familly, properti untuk menentukan dan merubah jenis font yang digunakan pada teks.
Font size, ukuran font yang diterapkan.
Border radius, untuk menambahkan lekukan seperti lingkaran pada tombol.

Selamat, Anda Sekarang Dapat Membuat Login Form HTML Sendiri!

Setelah mengikuti langkah-langkah yang dijelaskan di Hosteko diatas. Bagaimana menurutmu? Menyenangkan bukan membuat login HTML? Tentu menyenangkan karena Anda bisa membuat halaman sesuai keinginan dan kreativitas Anda.

Yang harus Anda lakukan sekarang adalah membuka file login.html di browser Anda dan melakukan login HTML. Ini sangat mudah kan!