MulaiCode
CSS

CSS Forms

Pelajari cara mempercantik form HTML menggunakan CSS.

CSS Forms

Dengan CSS, kita bisa membuat tampilan form HTML menjadi lebih menarik dan responsif.


Contoh Styling Form

<style>
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }
 
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }
 
  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
 
  input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>
 
<form>
  <label for="name">Nama</label>
  <input type="text" id="name" name="name" placeholder="Nama Anda...">
 
  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="Email Anda...">
 
  <label for="subject">Subjek</label>
  <textarea id="subject" name="subject" placeholder="Tulis sesuatu..." style="height:100px"></textarea>
 
  <input type="submit" value="Kirim">
</form>

Tips Membuat Form Lebih Baik

  • Gunakan padding untuk ruang dalam input.
  • Gunakan border-radius untuk sudut membulat.
  • Pastikan ada cukup margin antar elemen.
  • Gunakan warna hover pada tombol untuk UX yang lebih baik.

On this page