Pembuat Formulir CSS

Formulir dasar

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Empat gaya umum

Label floating terlihat paling menarik, tetapi memerlukan penambahan kode markup atau JavaScript untuk mendeteksi keadaan kosong. Sementara itu, label outlined merupakan solusi yang paling universal.

Daftar periksa aksesibilitas

• Label yang terlihat jelas untuk setiap input. Jangan pernah menggunakan placeholder sebagai satu-satunya label; label tersebut akan menghilang saat fokus ditekan dan tidak memberikan kontras yang memadai.
• <label for> atau versi terbungkus <label>: Keduanya sah; versi terbungkus sedikit lebih mudah digunakan.
• Indikator fokus: Jangan pernah menggunakan outline: none tanpa pengganti. Pengguna keyboard memerlukannya.
• Pesan kesalahan: hubungkan pesan tersebut melalui aria-describedby pada masukan. Jangan hanya menggunakan warna untuk menandai kesalahan; tambahkan teks atau ikon.
• Bidang wajib: gunakan atribut required. Tambahkan penanda visual (tanda bintang) pada label untuk pengguna yang dapat melihat.
• Jenis input: gunakan type="email", type="tel", type="url", atau type="number"; keyboard seluler dapat menyesuaikan diri.
• Atribut autocomplete: autocomplete="email", autocomplete="current-password", dan sebagainya; membantu pengguna menghemat waktu mengetik secara signifikan.

Status validasi asli

CSS memiliki kelas semu untuk memastikan validitas formulir:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (untuk input numerik dengan batas minimum dan maksimum)
• :placeholder-shown (kosong, tempat penampungan terlihat)
• :user-invalid (tidak valid dan pengguna telah berinteraksi, yang sesuai untuk jenis kesalahan)

Kelas pseudo :user-invalid merupakan cara paling tepat untuk menampilkan kesalahan hanya setelah pengguna melakukan suatu tindakan, sehingga menghindari munculnya batas merah sebelum interaksi terjadi. Dukungan untuk fitur ini tersedia di semua versi utama sekitar tahun 2023.

Status dinonaktifkan

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Input yang dinonaktifkan tidak dapat difokuskan maupun dikirimkan. Jika Anda ingin data tersebut dapat difokuskan oleh alat pembaca layar, gunakan readonly, formulir akan mengirimkan nilai tersebut, tetapi pengguna tidak dapat mengeditnya.