Membuat CSS untuk Form

November 13, 2025 Posting Komentar

Dalam pembuatan sebuah website form memiliki peran penting sebagai sarana interaksi untuk pengguna.
Pada kesempatan kali ini, kita akan mempelajari cara membuat dan menata form menggunakan CSS untuk membuat tampilan menjadi lebih menarik.

Struktur Folder

.
└── membuat-form/
    └── form.html

Membuat File HTML

Berikut adalah isi dari file form.html


<!DOCTYPE html>
<html>
<head>
  <title>CSS Form</title>
</head>
<body>
  <form>

    <label>NIS</label>
    <input type="text" placeholder="12345">
    <small>invalid</small>
    <br>

    <label>Nama</label>
    <input type="text">
    <br>

    <label>Email</label>
    <input type="email">
    <br>

    <label>Password</label>
    <input type="password">
    <br>

    <label>Telepon</label>
    <input type="tel">
    <br>

    <label>URL Website</label>
    <input type="url">
    <br>

    <label>Pencarian</label>
    <input type="search">
    <br>

    <label>Angka</label>
    <input type="number" min="1" max="10">
    <br>

    <label>Tanggal</label>
    <input type="date">
    <br>

    <label>Waktu</label>
    <input type="time">
    <br>

    <label>Bulan</label>
    <input type="month">
    <br>

    <label>Minggu</label>
    <input type="week">
    <br>

    <label>Upload File</label>
    <input type="file">
    <br>

    <label>Pilih Kelas</label>
    <select>
      <option>X IPA</option>
      <option>XI IPS</option>
      <option>XII RPL</option>
    </select>
    <br>

    <label>Kota (Datalist)</label>
    <input list="kota">
    <datalist id="kota">
      <option>Jakarta</option>
      <option>Bandung</option>
      <option>Surabaya</option>
    </datalist>
    <br>

    <label>Textarea</label>
    <textarea></textarea>
    <br>

    <label>Jenis Kelamin</label>
    <input type="radio" name="jk"> Laki-laki
    <input type="radio" name="jk"> Perempuan
    <br>

    <label>Hobi</label>
    <input type="checkbox"> Membaca
    <input type="checkbox"> Olahraga

    <fieldset>
      <legend>Jenis Kelamin</legend>
      <label style="width:auto"> <input type="radio" name="jk"> Laki-laki </label>
      <label style="width:auto"> <input type="radio" name="jk"> Perempuan </label>
    </fieldset>
    <br>

    <fieldset>
      <legend>Hobi</legend>
      <label style="width:auto"> <input type="checkbox"> Membaca </label>
      <label style="width:auto"> <input type="checkbox"> Olahraga </label>
    </fieldset>
    <br>

    <label>Range Nilai</label>
    <input type="range" min="0" max="100">
    <br>

    <label>Pilih Warna</label>
    <input type="color">
    <br>

    <label>Progress</label>
    <progress value="60" max="100"></progress>
    <br>

    <label>Meter</label>
    <meter value="0.5">50%</meter>
    <br>

    <label>Output</label>
    <output>0</output>
    <br>

    <input type="submit" value="Simpan">
    <input type="reset" value="Reset">
    <button type="button">Button biasa</button>

  </form>

</body>
</html>

Lihat hasilnya

Agar tampilan form menjadi lebih menarik, kita akan menambahkan kode CSS. Letakkan kode CSS berikut di dalam tag <style>.


form > * { margin-bottom: 8px; }

label {
  display: inline-block;
  width: 200px;
  font-weight: 500;
  vertical-align: middle;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[list],
input[type="file"],
select,
textarea {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ced4da;
  width: 240px;
  border-radius: 4px;
  vertical-align: middle;
}

textarea { height: 80px; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #0d6efd;
}

button,
input[type="submit"],
input[type="reset"] {
  padding: 8px 14px;
  border: 1px solid #0d6efd;
  background: #0d6efd;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: #0b5ed7;
}

Bagaimana hasilnya? tenttunya lebih menarik daripada sebelumnya.

WebKomp.my.id

Membuat CSS untuk Form

Struktur Folder

Membuat File HTML

Posting Komentar untuk "Membuat CSS untuk Form"