CSS Form Üreticisi

Temel form

<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; }

Dört yaygın stil

Yüzen etiket en şık görünendir, ancak boş durumu algılamak için ek işaretleme veya JavaScript gerektirir. Çerçeveli stil ise en evrensel olanıdır.

Erişilebilirlik Kontrol Listesi

• Her giriş alanı için görünür bir etiket. Yer tutucuyu (placeholder) tek etiket olarak kullanmayın; odaklanınca kaybolur ve kontrast açısından yetersizdir.
• <label for> veya sarmalayan <label>. İkisi de geçerlidir; sarmalayan biçim biraz daha kolaydır.
• Odak göstergesi: Bir alternatif koymadan asla outline: none kullanmayın. Klavye kullanıcıları için gereklidir.
• Hata mesajları: bunları giriş alanındaki aria-describedby aracılığıyla bağlayın. Hataları yalnızca renkle belirtmeyin; bir metin mesajı veya simge ekleyin.
• Zorunlu alanlar: required özniteliğini kullanın. Gören kullanıcılar için etikete görsel bir işaret (yıldız) ekleyin.
• Giriş türleri: type="email", type="tel", type="url", type="number" kullanın; mobil klavyeler buna uyum sağlar.
• autocomplete öznitelikleri: autocomplete="email", autocomplete="current-password" vb. Kullanıcıların yazma süresini önemli ölçüde azaltır.

Yerel (native) doğrulama durumları

CSS, form geçerliliği için sözde sınıflar (pseudo-class) sunar:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (en az ve en fazla değerleri içeren sayısal girdiler için)
• :placeholder-shown (boş; yer tutucu görünür)
• :user-invalid ( geçersiz ve kullanıcı etkileşimde bulunmuştur, hata stilleri için doğru değer )

:user-invalid sözde sınıfı, hataları yalnızca kullanıcı bir işlem yaptıktan sonra göstermenin en temiz yoludur ve etkileşim öncesinde kırmızı kenarlıkların çıkmasını önler. Bu destek yaklaşık 2023 yılında tüm başlıca tarayıcılara geldi.

Devre dışı durum

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

Devre dışı bırakılmış giriş alanları odaklanamaz ve gönderilemez. Ekran okuyucular için bunları odaklanabilir tutmak istiyorsanız readonly kullanın; form değeri gönderir ancak kullanıcı onu düzenleyemez.