Mendesain Formulir, Tombol, Daftar, & Tabel

Komponen yang ada di hampir semua website

Setelah menguasai dasar, saatnya menerapkannya pada komponen nyata. Mulai dari formulir, karena tampilan bawaan browser untuk input dan tombol tergolong kuno.

Styling input

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font: inherit;               /* pakai font halaman, bukan font bawaan browser */
  box-sizing: border-box;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #3c5a44;
  box-shadow: 0 0 0 3px rgba(60, 90, 68, 0.25);   /* cincin fokus yang jelas */
}

Bila kamu menghapus outline, wajib menggantinya dengan penanda fokus lain seperti box-shadow di atas. Elemen form tidak otomatis mewarisi font, karena itu font: inherit penting.

Styling tombol

.tombol {
  display: inline-block;
  padding: 10px 20px;
  background: #3c5a44;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tombol:hover    { background: #2f4636; }
.tombol:disabled { opacity: 0.5; cursor: not-allowed; }

Properti cursor: pointer mengubah kursor menjadi tangan, tanda bahwa elemen bisa diklik.

Styling daftar & menu

ul.menu {
  list-style: none;     /* hapus bullet */
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}
ul.menu a { text-decoration: none; color: inherit; }

list-style bisa none, disc, circle, square, decimal, dan lainnya. Menu navigasi nyaris selalu berupa daftar yang bullet-nya dihilangkan.

Styling tabel

table {
  border-collapse: collapse;   /* garis tepi sel menyatu */
  width: 100%;
}
th, td {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}
thead th { background: #3c5a44; color: #fff; }
tbody tr:nth-child(even) { background: #f7f4ec; }   /* selang-seling */
tbody tr:hover { background: #fff3cd; }

border-collapse: collapse adalah langkah pertama membuat tabel tampak rapi. Tanpanya, setiap sel punya garis ganda.