Dimana Anda dapat melihat hasil karya kami?

Tempat kecil membuat kombinasi, namun persilangan yang terjadi didalamnya tidak memberikan banyak kombinasi. Jadi, berhati-hatilah dalam membuat justifikasi, terutama SEO.

Panduan Membuat Login Form Website Menggunakan HTML & CSS

Terakhir diperbarui: Dec 17, 2023

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

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.

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.

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.

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

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

cmlabs

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>

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

cmlabs

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;
}

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

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

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

cmlabs

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 file “index.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.

Mitra kami yang berharga

Aliansi strategis ini memungkinkan kami untuk menawarkan kepada klien-klien kami berbagai solusi inovatif SEO dan pelayanan yang luar biasa. Pelajari Lanjut

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?

Panduan Membuat Login Form Website Menggunakan HTML & CSS

Hal-Hal yang Perlu Dipersiapkan

1. Folder Khusus untuk Menyimpan Login Form

2. Text Editor untuk Membuat File Login Form

Cara Membuat Login Form dengan HTML

1. Deklarasi Dokumen HTML

2. Buat Head Halaman Login Form

3. Berikan Judul Halaman

4. Sisipkan File CSS

5. Membuat Body Login Form

6. Membuat Layout Form

7. Membuat Heading 1

8. Membuat Kotak Login Form

9. Membuat Kolom Username dan Password

10. Membuat Tombol Form

Cara Membuat Login Form dengan CSS

cmlabs

Berlangganan Newsletter kami

Masukkan alamat email anda untuk menerima notifikasi Newsletter kami

Berlangganan Newsletter kami

Masukkan alamat email anda untuk menerima notifikasi Newsletter kami

Butuh bantuan?