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