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: Nov 11, 2024
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.
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>cmlabs
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>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
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>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
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>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>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>cmlabs
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;
}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.
cmlabs
Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?
Berlangganan Newsletter kami
Masukkan alamat email anda untuk menerima notifikasi Newsletter kami
Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.
Gratis di semua peramban berbasis Chromium
Berlangganan Newsletter kami
Masukkan alamat email anda untuk menerima notifikasi Newsletter kami
Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.
Gratis di semua peramban berbasis Chromium
