Styling Form dengan CSS: Membuat Form yang Menarik
Apa Itu Styling Form?
Form atau formulir adalah komponen penting dalam interaksi pengguna di website — seperti login, registrasi, pencarian, dan lainnya. Meskipun secara default form memiliki tampilan sederhana, kita bisa mempercantik dan membuatnya lebih profesional menggunakan CSS.
Dengan styling form:
- Pengalaman pengguna meningkat.
- Tampilan form lebih menarik dan konsisten.
- Interaksi visual (hover, focus) memberikan respons yang jelas.
- Desain tetap responsif dan ramah mobile.
1. Struktur Dasar Form HTML
Sebelum kita mulai styling, berikut contoh struktur form dasar:
<form class="form-login">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Masukkan email">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Masukkan password">
<button type="submit">Login</button>
</form>
2. Styling Input Text dan Password
Kita bisa mengubah penampilan input text dan password agar lebih menarik.
Contoh:
.form-login input[type="email"],
.form-login input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-login input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
💡 Gunakan transition untuk efek hover/focus yang halus.
3. Styling Tombol Form (<button>)
Tombol form juga perlu diberi gaya agar sesuai dengan tema desain.
Contoh:
.form-login button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-login button:hover {
background-color: #0056b3;
}
Anda juga bisa menambahkan efek tambahan seperti ikon atau loading animation jika dibutuhkan.
4. Mengatur Layout Form
Gunakan layout yang rapi dan mudah dibaca. Flexbox atau Grid bisa digunakan untuk mengatur form dengan lebih baik.
Contoh:
.form-login {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: 'Segoe UI', sans-serif;
}
Jika ingin membuat form dua kolom:
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
HTML:
<div class="form-grid">
<input type="text" placeholder="Nama Depan">
<input type="text" placeholder="Nama Belakang">
</div>
5. Styling Label dan Placeholder
Label dan placeholder juga bisa distil agar lebih menarik.
Contoh:
.form-login label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.form-login input::placeholder {
color: #aaa;
font-style: italic;
}
Anda juga bisa menambahkan efek saat input diisi atau fokus:
.form-login input:not(:placeholder-shown) {
border-color: green;
}
6. Menyembunyikan Border Default Browser
Beberapa browser seperti Chrome menampilkan border biru saat input fokus. Untuk menggantinya dengan gaya sendiri:
.form-login input:focus,
.form-login select:focus,
.form-login textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
7. Styling Elemen Form Lainnya
Selain input dan tombol, beberapa elemen form juga bisa distil:
a. Checkbox dan Radio Button
Checkbox dan radio button agak susah distil langsung karena bergantung pada sistem operasi. Namun, kita bisa membuat custom checkbox/radio menggunakan HTML dan CSS.
Contoh Custom Checkbox:
<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
Setuju dengan syarat dan ketentuan
</label>
CSS:
.custom-checkbox {
position: relative;
cursor: pointer;
padding-left: 25px;
margin-bottom: 10px;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 3px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #007bff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
b. Select Box
Elemen <select> juga susah distil sepenuhnya karena bergantung pada OS. Namun, kita bisa mengganti warna dan ukuran dasarnya:
.form-login select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
font-size: 1rem;
}
Untuk dropdown style penuh, gunakan JavaScript atau library seperti Select2.
8. Validasi Visual dengan CSS
Anda bisa menambahkan indikator validasi hanya dengan CSS:
input:required {
border-left: 4px solid orange;
}
input:valid {
border-left: 4px solid green;
}
input:invalid {
border-left: 4px solid red;
}
Ini akan membantu pengguna memahami apakah input sudah benar atau belum sebelum submit.
9. Contoh Praktis Form Login
HTML
<form class="form-login">
<h2>Login</h2>
<label for="email">Email</label>
<input type="email" id="email" required placeholder="Masukkan email">
<label for="password">Password</label>
<input type="password" id="password" required placeholder="Masukkan password">
<label class="custom-checkbox">
<input type="checkbox" required>
<span class="checkmark"></span>
Saya setuju
</label>
<button type="submit">Login</button>
</form>
CSS
.form-login {
max-width: 400px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
font-family: 'Segoe UI', sans-serif;
}
.form-login h2 {
text-align: center;
margin-bottom: 20px;
}
.form-login label {
display: block;
margin-top: 15px;
font-weight: bold;
color: #333;
}
.form-login input[type="email"],
.form-login input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-login input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.form-login input:required {
border-left: 4px solid orange;
}
.form-login input:valid {
border-left: 4px solid green;
}
.form-login input:invalid {
border-left: 4px solid red;
}
.form-login button {
margin-top: 20px;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-login button:hover {
background-color: #0056b3;
}
10. Tips dan Trik Efektif
- Gunakan box-sizing: border-box untuk kontrol ukuran yang lebih baik.
- Gunakan transition untuk efek hover dan focus yang halus.
- Gunakan flex atau grid untuk layout form yang rapi dan responsif.
- Buat custom checkbox/radio untuk desain yang lebih konsisten.
- Gunakan :valid, :invalid, dan :required untuk validasi visual.
- Uji tampilan form di perangkat mobile untuk memastikan tidak rusak.
11. Kesimpulan
Styling form dengan CSS memungkinkan kita menciptakan antarmuka yang lebih menarik dan ramah pengguna. Dengan memahami cara mengatur input, tombol, label, dan validasi, Anda bisa membuat form yang bukan hanya cantik, tapi juga interaktif dan profesional.
Selanjutnya, kita akan membahas Styling Tabel dengan CSS, yaitu cara membuat tabel yang mudah dibaca dan menarik secara visual.
💡 Tips Praktis
- Gunakan rem untuk ukuran font agar tetap aksesibel.
- Gunakan box-shadow dan border-radius untuk nuansa modern.
- Gunakan gap dan flex-direction untuk layout yang fleksibel.
- Simpan warna utama dalam variabel CSS untuk kemudahan pemeliharaan.
- Pastikan form tetap mudah diakses oleh pengguna keyboard dan screen reader.
