Özet - Kayıt formu

Form stilleriyle kayıt formu kurarsın.

Kayıt formuna giriş

Bu grupta form stillerinin tümünü öğrendin: input, label, placeholder, focus, button, checkbox. Şimdi bunları birleştirip küçük bir kayıt formu kuracağız.

Kayıt formu, kullanıcının adını, e-postasını, parolasını aldığı ve bir onay kutusuyla sözleşmeyi istediği yerdir. Her alan okunur olmalı; odak çerçevesi görünür; gönderme düğmesi davetkâr olmalı. Tek tek kavramları bir araya getirmenin tam sırası.

Uygulama Kayıt formu alanlarını biçimle

.register-form input seçicisi içine şunları yaz: padding: 12px 16px;, border: 1px solid #ccc;, border-radius: 6px;, font-size: 1rem;.

Örnek çözümü göster

.register-form input seçicisini aç; dört bildirimi alt alta yaz.
Örnek çözüm:
.register-form input {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

Uygulama Kayıt formu düğmesini biçimle

.register-form button seçicisi içine şunları yaz: background: #2563eb;, color: white;, padding: 10px 20px;, border: none;, border-radius: 6px;, cursor: pointer;.

Örnek çözümü göster

.register-form button seçicisini aç; beş bildirimi alt alta yaz.
Örnek çözüm:
.register-form button {
  background: #2563eb;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Kendini test et

Kayıt formunda en kritik detay hangisi?
- Arka planın çok renkli olması
- Mümkün olduğunca fazla alan içermesi
- Odak ve hata durumlarının görünür olması
- Her etiketin farklı yazı tipi kullanması
Cevabı göster

Odak ve hata durumlarının görünür olması — Doğru! Odak ve hata durumları kullanıcıyı yönlendirir; erişilebilirliği artırır.
Form stillerini eşleştir

input

veri alanı
label

alan başlığı
button:hover

üzerine gelince
appearance: none

öntanımlıyı sıfırlar
:focus-visible

klavye odağı

Kayıt input'una iç boşluk ver

.register-form input {
  padding: ____;
  border: 1px solid #ccc;
  font-size: 1rem;
}

Cevabı göster

.register-form input {
  padding: 12px 16px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

Sıradaki ders: Tablo iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler