Kami menggunakan cookies

Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..

Panduan SEO komprehensif dengan wawasan dan keahlian mendalam.

Panduan Membuat Login Form Website Menggunakan HTML & CSS

Terakhir diperbarui: Sep 23, 2024

Panduan Membuat Login Form Website Menggunakan HTML & CSS
Gambar sampul: Ilustrasi login form yang merupakan elemen krusial dalam pengelolaan website bisnis. Simak bagaimana cara membuatnya dengan HTML dan CSS di panduan ini.

Disclaimer: Panduan SEO cmlabs ini berisi informasi lengkap tentang SEO, seperti pengantar dan panduan umum. Anda mungkin saja mengunjungi laman SEO Terms di cmlabs.co melalui pihak ketiga atau tautan website asing. Kami tidak bertanggung jawab atas keakuratan atau keandalan informasi apa pun yang ditawarkan oleh situs web pihak ketiga.

Dalam membuat suatu website, login form merupakan elemen yang krusial, sebab form ini mampu membantu pengguna untuk masuk ke dalam website.

Panduan ini akan membahas cara membuat login form sederhana menggunakan HTML dan CSS.

Simak pembahasannya berikut ini!

Hal-Hal yang Perlu Dipersiapkan

pembuatan login form
Gambar 1: Ilustrasi Menyusun Program Login Form

Sebelum memulai pembuatan login form menggunakan HTML dan CSS, ada beberapa hal yang perlu dipersiapkan terlebih dahulu.

Berikut ini adalah beberapa hal yang perlu Anda persiapkan sebelum membuat form login menggunakan HTML dan CSS.

1. Folder Khusus untuk Menyimpan Login Form

Pertama-tama, Anda harus menyiapkan sebuah folder khusus yang akan digunakan untuk menyimpan login form.

Untuk menghubungkan file HTML dan CSS, keduanya harus berada dalam folder yang sama. Jadi, janganlah memisahkan folder untuk file HTML dan CSS.

Sebagai tambahkan, Anda tidak disarankan untuk menggunakan spasi untuk memberi nama folder, sebab penggunaan spasi berpotensi membuat program Anda mengalami error.

Daripada menggunakan spasi, Anda dapat menggunakan beberapa karakter pengganti, seperti (_), (-), dan simbol-simbol lainnya.

2. Text Editor untuk Membuat File Login Form

Yang kedua, Anda perlu menyiapkan tools berupa text editor untuk menyusun program login form menggunakan HTML dan CSS.

Bukalah text editor, kemudian buatlah file HTML dan CSS, yang masing-masing diberi nama “index.html”, dan “style.css”. 

Anda dapat menggunakan text editor apapun, termasuk Notepad ++, Atom, VsCode, atau yang lainnya.

Cara Membuat Login Form dengan HTML

Setelah menyiapkan segala hal yang diperlukan untuk membuat login form, kini tiba saatnya Anda mengetahui cara membuat form login dengan HTML.

Langsung saja, cek penjelasannya berikut ini.

1. Deklarasi Dokumen HTML

Supaya login form dapat ditampilkan dengan baik, Anda harus mendeklarasikan dokumen HTML-nya terlebih dahulu.

Hal ini bertujuan untuk memberitahu browser bahwa format file dari login form yang dibuat adalah berbentuk dokumen HTML.

Untuk mendeklarasikannya, Anda dapat mengikuti source code berikut ini:

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

2. Buat Head Halaman Login Form

Di dalam tag <html>, Anda dapat memasukkan <head> untuk membuat heading halaman form login.

Tag <head> sendiri merupakan atribut yang mengandung berbagai informasi teknis terkait dokumen HTML tersebut, seperti metadata, sumber file eksternal, dan lain-lain.

Untuk menjalankan langkah ini, ikuti source code berikut:

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

3. Berikan Judul Halaman

Langkah selanjutnya, buatlah judul untuk menamai halaman form login Anda. Untuk membuat judul, Anda dapat menggunakan tag <title>.

Anda dapat mengikuti source code berikut ini:

<!DOCTYPE HTML>
<html>
    <head>
    <title>Masukkan Judul Halaman di Sini</title>
    </head>
</html>

4. Sisipkan File CSS

Langkah membuat login form yang selanjutnya adalah menyisipkan file CSS. Hal ini bertujuan untuk menghubungkan file CSS dengan HTML, supaya login form dapat ditampilkan dengan baik nantinya.

Untuk melakukan hal ini, Anda dapat menggunakan atribut link rel, seperti yang dicontohkan oleh source code berikut ini:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
</html>

5. Membuat Body Login Form

Untuk membuat body atau bagian tubuh login form menggunakan HTML, Anda membutuhkan tag <body>.

Penggunaan tag yang satu ini dapat Anda ketahui dalam contoh source code berikut:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
    </body>
</html>

6. Membuat Layout Form

Membuat isi form menggunakan tag <body> saja tidak cukup. Anda tetap memerlukan atribut lain untuk membuat form lebih sempurna, yakni atribut container.

Atribut ini pun tidak bisa berdiri sendiri. Untuk menggunakan container, Anda perlu menyisipkannya ke dalam elemen div class.

Untuk mengimplementasikan atribut ini, Anda dapat mengikuti kode program di bawah ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Masukkan Judul Halaman di Sini</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
        </div>     
    </body>
</html>

7. Membuat Heading 1

Dengan adanya H1, login form Anda akan terlihat lebih menonjol. Pembuatan H1 juga bertujuan supaya judul form Anda dapat dikenali oleh mesin pencari.

Selain itu, teks heading ini juga bermanfaat supaya mesin pencari dapat menilai performa SEO dari situs Anda.

Untuk membuat heading 1, Anda dapat mengikuti kode program berikut ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Masukkan Judul Halaman di Sini</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
        </div>     
    </body>
</html>

8. Membuat Kotak Login Form

Ketika Anda sudah menemukan judul yang tepat untuk form login, kini tiba saatnya Anda masuk ke program inti, yakni membuat kotak form login.

Kali ini, Anda akan menggunakan tag <form>Tag yang satu ini memiliki fungsi yang mirip dengan tag <div>, yakni untuk mengelompokkan suatu elemen.

Perhatikan kode program di bawah ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Masukkan Judul Halaman di Sini</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
            </form>
        </div>     
    </body>
</html>

9. Membuat Kolom Username dan Password

Seperti yang Anda ketahui, setiap login form pasti memiliki kolom username dan password. Untuk membuat dua elemen ini, Anda dapat menggunakan tag <label>, <br>, dan <input type>. 

  • <label> berfungsi untuk memberi keterangan teks pada sebuah form
  • <br> berfungsi sebagai penanda baris baru
  • <input type> memungkinkan pengguna untuk memasukkan informasi yang diperlukan

Contoh penggunaan tiga elemen ini dapat Anda ketahui pada kode program berikut ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Masukkan Judul Halaman di Sini</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
            </form>
        </div>     
    </body>
</html>

10. Membuat Tombol Form

Form login belum sempurna apabila belum memiliki button atau tombol. Untuk membuat tombol form, Anda membutuhkan atribut <button>

Cara mengimplementasikannya pun cukup mudah, Anda dapat mengikuti kode program berikut ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Masukkan Judul Halaman di Sini</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
                <button>Login</button>
            </form>
        </div>     
    </body>
</html>

Cara Membuat Login Form dengan CSS

Pada dasarnya, CSS berfungsi untuk menambahkan nilai visual bagi suatu website. Begitupun dengan form login, CSS mampu memberikan warna dan gaya tersendiri untuk form login Anda.

Berikut ini contoh kode program CSS yang dapat Anda coba pada form login Anda.

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}
body{
    height: 100vh;
    background-image: url(https://masukkanurlgambardotcom);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 30px;
    width: 350px;


    background-color: rgba(0,0,0,.7);
    box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.container h1{
    text-align: center;
    color: #fafafa;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-bottom: 4px solid #2979ff;
}
.container label{
    text-align: left;
    color: #90caf9;
}
.container form input{
    width: calc(100% - 20px);
    padding: 8px 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #2979ff;
    color: #fff;
    font-size: 20px;
}
.container form button{
    width: 100%;
    padding: 5px 0;
    border: none;
    background-color:#2979ff;
    font-size: 18px;
    color: #fafafa;
}

Setelah pemrograman HTML dan CSS sudah selesai dilakukan, simpan file tersebut supaya konfigurasi yang telah Anda kerjakan tidak hilang. 

Setelah menyimpan file tersebut, Anda dapat langsung melihat hasilnya dengan membuka fileindex.html” pada browser Anda.

Demikianlah panduan yang berisi tentang cara membuat login form menggunakan HTML dan CSS. 

Apabila Anda telah mengonfigurasi website untuk kebutuhan bisnis, jangan lupa gunakan jasa SEO untuk memaksimalkan strategi bisnis yang telah disusun.

Jasa SEO tak hanya mampu mengevaluasi konten-konten yang dibuat, akan tetapi juga mampu melakukan audit terhadap keseluruhan isi website Anda, untuk mendefinisikan strategi yang lebih baik.

cmlabs

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?

Floating SEO Services ID

Kini mereka lebih mudah ditemukan dan jadi pilihan pelanggan. Sekarang giliran Anda!

Coba Jasa SEO cmlabs!
*S&K berlaku

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Butuh bantuan?

Ceritakan tentang kebutuhan SEO Anda, tim marketing kami akan membantu menemukan solusi terbaik.

Berikut daftar tim kami secara resmi dan diakui, hati-hati terhadap penipuan oknum tidak bertanggung jawab yang mengatasnamakan PT CMLABS INDONESIA DIGITAL (cmlabs). Baca lebih lanjut
Marketing Teams

Agita

Marketing

Tanya Saya
Marketing Teams

Destri

Bizdev

Tanya Saya
Marketing Teams

Thalia

Bizdev Global

Tanya Saya
Marketing Teams

Irsa

Marketing

Tanya Saya
Marketing Teams

Yuliana

Business & Partnership

Tanya Saya
Marketing Teams

Dwiyan

Partnership

Tanya Saya
Marketing Teams

Rifqi

Product & Dev

Tanya Saya
Marketing Teams

Rochman

Product & Dev

Tanya Saya
Marketing Teams

Said

Career & Internship

Tanya Saya

Saat ini tidak ada notifikasi...