Sebagai website bisnis yang terpercaya, memiliki login form HTML adalah suatu kewajiban. Fungsinya tidak hanya sebatas untuk mengakses pelayanan, tetapi juga berfungsi melindungi data pengguna.
Tanpa adanya login form, bisa-bisa data pengguna diretas. Tentunya itu menimbulkan kecemasan sendiri bagi mereka. Beruntungnya, sekarang kamu bisa membuat login form sendiri dengan HTML.
Tak usah diambil pusing, di bawah ini sudah ada contoh coding-nya. Yuk, gulir ke bawah untuk melihatnya!
Apa itu Login Form HTML?
Login form adalah formulir yang digunakan pengguna untuk mengakses fitur dalam website. Ini berbeda dengan form registrasi yang dipakai mendaftar pertama kali.
Login form dibuat sebagai fitur autentikasi. Ketika kamu menekan tombol Login atau Masuk, data akan diproses di server. Data tersebut akan diverifikasi dengan data yang sudah ada di database.
Jika data yang ditemukan sama, proses login pun akan berhasil. Maka bisa dikatakan bahwa login form sama seperti pembatas digital. Hanya pengguna terdaftar yang dapat menerobos pembatas tersebut.
Fungsi Login Form HTML
Dibuatnya login form pada sebuah web tentu bukan tanpa alasan. Ada beberapa alasan mengapa sebaiknya website kamu menggunakannya juga, Sob. Fungsinya menyangkut keamanan serta kenyamanan pengguna, seperti:
1. Melindungi Data Pengguna
Login form melindungi data-data sensitif pengguna, seperti data diri, riwayat transaksi, hingga demografi. Dimulai dari website yang aman, pengunjung akan lebih percaya menggunakan produk atau jasa yang kamu tawarkan.
2. Membatasi Akses ke Fitur Tertentu
Login form akan membatasi akses pengguna. Misalnya kamu menawarkan konten premium, maka login form yang nantinya membatasi akses ke konten eksklusif tersebut.
Jadi hanya pengguna yang sudah terdaftar saja yang bisa menikmati konten tersebut.
3. Mengumpulkan Data Pengguna secara Efisien
Selain itu, login form HTML biasa digunakan untuk mengumpulkan data pengguna secara efisien. Data-data tersebut dapat diolah supaya kamu selaku pemilik bisnis dapat memberikan konten berdasarkan kebutuhan pengguna.
Aktivitas pengguna juga bisa diteliti dari data yang didapat dari form. Dengan begitu kamu bisa terus meningkatkan kualitas bisnis.
Cara Membuat Form Login HTML
Tadi sepintas tentang login form yang perlu kamu tahu. Bagi yang tak sabar membuatnya, kamu bisa langsung mengikuti contoh coding HTML yang ada. Langkahnya dipecah-pecah biar lebih mudah dipahami:
1. Buat Kepala Code
Cukup gunakan coding sederhana untuk memberikan title coding yang dibuat. Pastikan selalu menggunakan tag <html> di awal dan di akhir barisan. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Login Form HTML</title>
</head>
<html>2. Hubungkan dengan CSS
Integrasikan dengan CSS agar form bisa dikustomisasi nantinya. CSS adalah bahasa pemrograman yang fungsinya menyajikan hasil coding dengan visual. Tetapi jika ingin membuat login form sederhana, kamu bisa melewati langkah ini.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>
3. Susun Form Login
Ada dua kolom input yang wajib diperhatikan saat membuat form login HTML. Satu untuk username, dan satunya kata sandi.
Untuk username dibuat dengan tipe text, sedangkan kata sandi dengan tipe password agar dapat disembunyikan.
<!DOCTYPE html>
<html>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Masukkan username..." required />
</p>
<p>
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="kata_sandi" placeholder="Masukkan kata sandi..." required />
</p>
</fieldset>
</form>
</body>
</html>
4. Aktifkan Fitur Ingat Saya
Dengan fitur ini, pengguna tidak perlu login setiap kali mengakses website. Pasalnya data sebelumnya telah tersimpan di server. Biar login form HTML kamu keren, jangan lupa sertakan fitur ini, Sob:
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<p>
<label>
<input type="checkbox" name="ingat_saya" value="remember" /> Ingat saya
</label>
</p>
</fieldset>
</form>
</body>
</html>
5. Tambahkan HTML Button Submit
Terakhir, tambahkan button untuk mengirim data-data yang telah dimasukkan. Membuat button bisa menggunakan tag <button> atau <input type>. Yang terpenting perintah yang digunakan adalah submit, seperti berikut:
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Cara Desain Form Login HTML Keren
Selanjutnya desain login form kamu biar semakin luar biasa. Kamu membutuhkan CSS supaya bisa mengganti warna, ukuran, dan bentuk login form. Sama seperti sebelumnya, langkah-langkahnya akan dipecah biar lebih mudah dipahami:
1. Menambahkan Background
Background bebas diganti dengan gambar atau warna favorit. Tujuannya agar tidak monoton saja, sekaligus menambah kesan website profesional.
Cara menambahkan background bisa dilakukan dengan coding sederhana, seperti berikut:
body{
background: linear-gradient(135deg, #6699ff, #3366ff);
background-size: cover;
}Ukuran background harus diubah menjadi cover. Ini memastikan agar gambar memenuhi belakang form.
2. Membuat Kotak Login Form HTML
Biar tampilan login semakin menawan, coba kemas form di dalam sebuah kotak. Dengan kotak ini membantu memisahkan form dari background.
Berikut contoh coding dengan kotak yang sudutnya melengkung. Kalau tidak ingin dibuat melengkung, hapus perintah border-radius.
.container {
background: linear-gradient(135deg, #cce6ff, #99ccff);
width: 380px;
border-radius: 25px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
padding: 25px 40px;
}Warna yang dimasukkan harus sudah dalam format RGBA. Gunakan tools eksternal untuk menemukan kode yang diinginkan.
3. Membuat Tombol Form Login
Jangan ketinggalan, buat button login dengan warna yang lebih terang. Tujuannya biar pengguna tidak bingung tombol yang harus diklik. Sebagai contoh, coding login HTML ini menggunakan button kuning.
.container form button {
font-size: 18px;
width: 90%;
background: linear-gradient(135deg, #0044cc, #003399);
}Sampai di sini, form sudah bisa digunakan. Masih banyak coding lain yang bikin form lebih interaktif. Kamu bisa mencari tahu lebih dalam sesuai kebutuhan.
Tancap Performa Website dengan Hosting Terbaik
Jangan biarkan login form HTML tidak responsif karena hosting yang kurang optimal. Tancap performa website dengan hosting murah terbaik dari Jagoan Hosting. Nantinya kamu juga mendapat optimasi web gratis dari tim expert.
Hosting terbaik ini akan meningkatkan stabilitas dan mencegah website terkena downtime. Ditambah lagi, tim support kami siap membantu 24/7 untuk menjawab segala kebutuhanmu.
Sudah jelas, menggunakan hosting yang tepat sama pentingnya dengan adanya fitur login form HTML. Jangan ragu kalau masih bingung, yuk konsultasi gratis via WhatsApp bersama tim support Jagoan Hosting sekarang!
FAQ
Apa itu form dalam HTML?
Form adalah tag HTML yang dipakai membuat formulir di web. Tag ini dipakai ketika ingin mengumpulkan data pengguna. Contohnya bisa dilihat pada halaman registrasi dan login.
Apa tag HTML yang digunakan untuk membuat formulir?
Tag utama yang digunakan adalah <form>. Tag ini diikuti dengan atribut action supaya data dapat dikirim.
Bagaimana cara membuat formulir dalam HTML?
Formulir HTML dibuat menggunakan kombinasi tag, di antaranya <button>, <form>, dan <input>. Cara ini memungkinkan pengguna mengirim datanya ke server website.
