Wadah formulir

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 51 dari 76.

Tantangan

Mudah

Dalam pelajaran ini, kita akan membuat form terlihat lebih terstruktur dan menarik secara visual.

Ikuti langkah-langkah berikut:

Terapkan style pada container form agar lebih menonjol. Tulis aturan CSS yang menargetkan elemen dengan class login-form.
1. Atur warna latar belakang (putih atau warna apa pun yang terlihat bagus).
2. Tambahkan padding agar ada ruang di dalam konten.
3. Buat sudutnya membulat.
4. Terapkan box-shadow untuk menciptakan efek mengambang yang lembut.
5. Tambahkan border di sekeliling form (pilih warna dan ketebalan apa pun).
Pusatkan teks di dalam form menggunakan property text-align .

Coba sendiri

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>