CSS untuk Form

Formulir (form) adalah elemen penting dalam sebuah halaman web yang memungkinkan pengguna untuk memasukkan informasi. Dengan CSS, kita dapat meningkatkan tampilan form agar lebih menarik dan mudah digunakan. Artikel ini akan membahas cara-cara dasar untuk menata form menggunakan CSS.

1. Dasar Styling untuk Form

Pada dasarnya, kita dapat menata form dengan menerapkan CSS pada elemen-elemen seperti <input>, <textarea>, <select>, dan <button>. Berikut adalah contoh dasar styling form:

Nama: Email: Pesan:

2. Styling Placeholder

Placeholder adalah teks yang muncul di dalam input saat belum ada nilai yang dimasukkan. Kita bisa menggunakan ::placeholder untuk mengubah tampilannya:

input::placeholder {
    color: #999;
    font-style: italic;
}

3. Fokus pada Input

Efek fokus dapat meningkatkan user experience (UX) dengan memberi tanda visual saat elemen form sedang aktif.

input:focus,
textarea:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    outline: none;
}

4. Styling Khusus untuk Checkbox dan Radio Button

Checkbox dan radio button sering kali membutuhkan styling tambahan agar tampilannya sesuai desain. Berikut contoh sederhana:

input[type="checkbox"],
input[type="radio"] {
    accent-color: #4CAF50;
}

5. Menata Dropdown dengan Select

Elemen <select> sering kali memiliki tampilan default yang berbeda di setiap browser. Untuk menatanya, kita dapat menggunakan CSS seperti berikut:

select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
}

6. Membuat Tampilan Form Responsif

Agar form tetap terlihat baik di berbagai perangkat, kita dapat menerapkan media queries untuk menyesuaikan tampilan di layar kecil:

@media (max-width: 600px) {
    form {
        padding: 12px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        padding: 6px;
    }

    button {
        width: 100%;
    }
}

Kesimpulan

Dengan penataan yang tepat, form bisa menjadi lebih menarik dan memudahkan pengguna dalam memasukkan informasi. Penataan ini tidak hanya menambah estetika, tetapi juga meningkatkan pengalaman pengguna.