Project HTML CSS Form Login

Project HTML CSS: Membuat Login Form

Form login adalah salah satu komponen penting dalam pengembangan web. Hampir setiap website yang memerlukan autentikasi pengguna pasti memiliki form login. Jika Anda seorang pengembang web pemula, membuat form login sederhana menggunakan HTML dan CSS adalah langkah awal yang bagus untuk memahami dasar-dasar pengembangan web.

Dalam artikel ini, kita akan membahas cara membuat Login Form Sederhana menggunakan HTML dan CSS. Project ini cocok untuk pemula yang ingin mempelajari cara membuat antarmuka pengguna yang menarik dan responsif.

Apa Itu Login Form?

Login form adalah formulir yang digunakan oleh pengguna untuk memasukkan kredensial mereka (seperti email dan password) agar dapat mengakses suatu sistem atau aplikasi. Form ini biasanya terdiri dari beberapa elemen seperti:

Input Email: Untuk memasukkan alamat email pengguna.
Input Password: Untuk memasukkan kata sandi pengguna.
Tombol Login: Untuk mengirim data login ke server.
Opsi Tambahan: Seperti “Lupa Password?” atau “Daftar Akun Baru”.

Tools yang Dibutuhkan

Untuk membuat login form ini, Anda memerlukan:

Text Editor: Seperti Visual Studio Code, Sublime Text, atau Notepad++.
Browser: Seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge untuk melihat hasilnya.
Gambar Logo: Seperti logo Google dan Apple untuk tombol login dengan akun eksternal.

Langkah-Langkah Membuat Form Login dengan HTML dan CSS

1. Persiapan Proyek

Sebelum memulai, pastikan Anda telah menyiapkan folder proyek dan file yang diperlukan:

Buat folder baru dengan nama login-form.
Di dalam folder tersebut, buat dua file: index.html dan style.css.
Siapkan folder Images yang berisi logo Google dan Apple untuk tombol login.

2. Struktur HTML

File index.html akan berisi struktur dasar form login. Berikut adalah kode HTML yang diperlukan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Form Login dengan HTML dan CSS</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login_form">
    <form action="#">
      <h3>Login dengan</h3>
      <div class="login_option">
        <!-- Tombol Google -->
        <div class="option">
          <a href="#">
            <img src="logos/google.png" alt="Google" />
            <span>Google</span>
          </a>
        </div>
        <!-- Tombol Apple -->
        <div class="option">
          <a href="#">
            <img src="logos/apple.png" alt="Apple" />
            <span>Apple</span>
          </a>
        </div>
      </div>
      <!-- Pemisah opsi login -->
      <p class="separator">
        <span>atau</span>
      </p>
      <!-- Kotak input email -->
      <div class="input_box">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Masukkan alamat email" required />
      </div>
      <!-- Kotak input password -->
      <div class="input_box">
        <div class="password_title">
          <label for="password">Password</label>
          <a href="#">Lupa Password?</a>
        </div>
        <input type="password" id="password" placeholder="Masukkan password" required />
      </div>
      <!-- Tombol login -->
      <button type="submit">Login</button>
      <p class="sign_up">Belum punya akun? <a href="#">Daftar</a></p>
    </form>
  </div>
</body>
</html>

Run HTML

3. Styling dengan CSS

File style.css akan digunakan untuk menghias form login. Berikut adalah kode CSS yang diperlukan:

/* Mengimpor Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Mereset gaya default dan mengatur font-family */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    width: 100%;
    min-height: 100vh;
    padding: 0 10px;
    display: flex;
    background: #626cd6;
    justify-content: center;
    align-items: center;
}

/* Gaya form login */
.login_form {
    width: 100%;
    max-width: 435px;
    background: #fff;
    border-radius: 6px;
    padding: 41px 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.login_form h3 {
    font-size: 20px;
    text-align: center;
}

/* Gaya tombol Google & Apple */
.login_form .login_option {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.login_form .login_option .option {
    width: calc(100% / 2 - 12px);
}

.login_form .login_option .option a {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #F8F8FB;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    margin: 34px 0 24px 0;
    text-decoration: none;
    color: #171645;
    font-weight: 500;
    transition: 0.2s ease;
}

.login_form .login_option .option a:hover {
    background: #ededf5;
    border-color: #626cd6;
}

.login_form .login_option .option a img {
    max-width: 25px;
}

.login_form p {
    text-align: center;
    font-weight: 500;
}

.login_form .separator {
    position: relative;
    margin-bottom: 24px;
}

/* Gaya pemisah opsi login */
.login_form .separator span {
    background: #fff;
    z-index: 1;
    padding: 0 10px;
    position: relative;
}

.login_form .separator::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #C2C2C2;
    display: block;
}

form .input_box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Gaya kotak input */
form .input_box input {
    width: 100%;
    height: 57px;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    outline: none;
    background: #F8F8FB;
    font-size: 17px;
    padding: 0px 20px;
    margin-bottom: 25px;
    transition: 0.2s ease;
}

form .input_box input:focus {
    border-color: #626cd6;
}

form .input_box .password_title {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

form .input_box {
    position: relative;
}

a {
    text-decoration: none;
    color: #626cd6;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* Gaya tombol login */
form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #626CD6;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 28px;
    transition: 0.3s ease;
}

form button:hover {
    background: #4954d0;
}

4. Menjalankan Proyek

Setelah menambahkan kode HTML dan CSS, buka file index.html di browser Anda. Anda akan melihat form login yang responsif dan menarik.

Kesimpulan

Membuat form login dengan HTML dan CSS adalah proyek yang sempurna untuk pemula. Dengan mengikuti langkah-langkah di atas, Anda tidak hanya akan memahami dasar-dasar pengembangan web, tetapi juga memiliki proyek yang bisa ditambahkan ke portofolio Anda. Jangan ragu untuk bereksperimen dengan desain dan fitur tambahan seperti validasi form atau animasi CSS untuk meningkatkan keterampilan Anda.