Cara Membuat Form yang Menarik dengan CSS

Form adalah komponen penting di hampir setiap website — mulai dari form login, registrasi, hingga form kontak. Sayangnya, tampilan form HTML bawaan browser seringkali terlihat membosankan dan tidak konsisten antar browser. Dengan CSS, kamu bisa mengubah form menjadi terlihat profesional dan nyaman digunakan. Artikel ini membahas cara membuat form yang menarik dari awal.

Reset Style Bawaan Browser

Langkah pertama adalah me-reset tampilan bawaan elemen form agar konsisten di semua browser:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

Struktur HTML Form

Gunakan struktur yang semantik dan aksesibel:

<form class="form-keren" novalidate>
  <h2>Hubungi Kami</h2>

  <div class="form-grup">
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">
  </div>

  <div class="form-grup">
    <label for="email">Alamat Email</label>
    <input type="email" id="email" name="email" placeholder="[e-mail]">
  </div>

  <div class="form-grup">
    <label for="topik">Topik</label>
    <select id="topik" name="topik">
      <option value="">Pilih topik...</option>
      <option value="umum">Pertanyaan Umum</option>
      <option value="teknis">Masalah Teknis</option>
      <option value="kerjasama">Kerjasama</option>
    </select>
  </div>

  <div class="form-grup">
    <label for="pesan">Pesan</label>
    <textarea id="pesan" name="pesan" rows="5"
              placeholder="Tulis pesan kamu di sini..."></textarea>
  </div>

  <button type="submit" class="tombol-kirim">Kirim Pesan</button>
</form>

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Form yang Menarik dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.