Tampilan formulir HTML dapat sangat ditingkatkan dengan CSS: mengatur padding luas, border halus, bayangan fokus, dan tombol submit yang memikat.
CSS Forms
Formulir Pendaftaran Modern:
<!DOCTYPE html>
<html>
<head>
<style>
.form-card { max-width: 300px; padding: 20px; background: white; border-radius: 10px; border: 1px solid #e2e8f0; font-family: sans-serif; }
.form-control { width: 100%; padding: 10px; margin: 8px 0 15px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: #04AA6D; box-shadow: 0 0 0 3px rgba(4, 170, 109, 0.2); }
.btn-submit { width: 100%; background: #04AA6D; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; }
</style>
</head>
<body style="background:#f8fafc; padding:20px;">
<div class="form-card">
<h4 style="margin: 0; color: #0d2e5c;">Masuk Akun</h4>
<input type="text" class="form-control" placeholder="Email Anda">
<button class="btn-submit">Masuk ยป</button>
</div>
</body>
</html>Selalu gunakan box-sizing: border-box; pada input agar width: 100%; tidak membuat kotak melebar keluar kartu.