Cara Membuat Form Login Keren dengan HTML dan CSS

By Posted on

Cara Membuat Form Login Keren dengan HTML dan CSS – Apakah Anda ingin membuat halaman login yang menarik dan keren untuk situs web Anda? Dengan menggunakan HTML dan CSS, Anda dapat membuat form login yang menarik dan responsif dengan mudah. Dalam panduan ini, haikalweb akan memandu Anda langkah demi langkah untuk membuat sebuah form login keren yang akan meningkatkan tampilan situs web Anda. Mari kita mulai!

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus disiapkan untuk dapat membuat form login keren dengan html dan css:

  • Perangkat laptop,
  • Text editor code (disarankan menggunakan Visual studio code),
  • Web browser (disarankan menggunakan google chrome),
  • Niat yang sungguh-sungguh.

Cara Membuat Form Login Keren dengan HTML dan CSS

1. Buat Folder Project Form Login Keren

Pertama, buatlah sebuah folder di dalam komputer Anda dan beri nama “project_form_login_keren“. Folder ini akan berisi semua file yang kita perlukan untuk membuat form login keren.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah sub-folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan dalam desain form login. Untuk mendukung implmentasi project download gambar disini.

3. Buat Sebuah File “form_login_keren.html”

Buka text editor favorit Anda dan buatlah file baru dengan nama “form_login_keren.html“. Ini akan menjadi file utama yang akan berisi struktur HTML untuk form login Anda.

Berikut ini source code HTML yang dapat Anda implementasikan untuk membuat form login keren:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Login Keren</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <img src="img/login-icon.png" alt="Login Icon" class="login-icon">
            <h2>Login</h2>
            <form action="#" method="POST">
                <div class="input-container">
                    <input type="text" placeholder="Username" required>
                </div>
                <div class="input-container">
                    <input type="password" placeholder="Password" required>
                </div>
                <button type="submit">Login</button>
            </form>
        </div>
    </div>
</body>
</html>
 

4. Buat File “style.css”

Selanjutnya, buatlah file “style.css” di dalam folder proyek Anda. File ini akan berisi gaya CSS untuk mendesain form login Anda agar terlihat keren.

Artikel Terkait:  Cara Membuat Website Portal Berita dengan HTML dan CSS

Berikut ini source code CSS yang dapat Anda implementasikan untuk membuat form login keren:

body {
    font-family: Arial, sans-serif;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    width: 400px;
}

.login-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-icon {
    width: 100px;
    margin-bottom: 20px;
}

h2 {
    color: #333;
}

.input-container {
    margin-bottom: 20px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}
 

5. Mengubah Tampilan Form Login Keren

Dalam file “style.css“, Anda dapat mengubah warna, font, ukuran, dan gaya lainnya sesuai preferensi Anda untuk membuat form login terlihat keren dan menarik.

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file “form_login_keren.html” di browser web Anda untuk melihat tampilan form login keren yang telah Anda buat.

Penutup

Dengan mengikuti panduan ini, Anda sekarang dapat membuat form login keren dengan HTML dan CSS. Jangan ragu untuk bereksperimen dengan desain dan gaya Anda sendiri untuk menciptakan form login yang sesuai dengan kebutuhan dan selera Anda!

Related posts: