Kami menggunakan cookies
Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..
Kami menggunakan cookies
Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..
Terakhir diperbarui: Sep 23, 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!
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.
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>
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>
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>
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>
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>
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>
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>
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>
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>.
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>
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>
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 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.
Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?
Kini mereka lebih mudah ditemukan dan jadi pilihan pelanggan. Sekarang giliran Anda!
Coba Jasa SEO cmlabs!Gratis di semua peramban berbasis Chromium
Gratis di semua peramban berbasis Chromium
Sesuai dengan prinsip-prinsip yang telah ditetapkan dalam wacana pemasaran, saya ingin menanyakan perspektif Anda tentang dampak strategi pemasaran SEO dalam memfasilitasi ekspansi perusahaan dalam kaitannya dengan keberadaan virtual