Meydan okuma - Form ve tablo

Form ve tablo stilleriyle kayıt arayüzü kurarsın.

Form ve tablo arayüzü

Bir kayıt arayüzünde form ve tablo yan yana çalışır. .field etiketi için dolgu, kenar ve kenar yuvarlatma verilir; :focus durumunda kenar rengi vurgulanır, böylece kullanıcı aktif alanı görür. İpucu metni placeholder özniteliğine yazılır, değerine değil.

Tabloda border-collapse: collapse ile kenarlar birleşir; :nth-child(even) ile çift satırlara zebra çizgi, tr:hover ile üzerine gelinen satır vurgulanır. Bu beş nokta, okunaklı bir kayıt arayüzü kurar.

Uygulama Kayıt arayüzünü stillendir

Aşağıdaki CSS'i tamamla. .field etiketine 8px dolgu ve 4px kenar yuvarlatma ver; :focus durumunda kenar rengi #2563eb olsun. Tablo için border-collapse: collapse yaz ve çift satırların arka planını #f5f5f5 yap.

Örnek çözümü göster

/* giriş alanı */
.field {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.field:focus {
  border-color: #2563eb;
}

/* tablo */
table {
  border-collapse: collapse;
}

/* çift satır */
tbody tr:nth-child(even) {
  background: #f5f5f5;
}

Kendini test et

Form ve tablo özelliğini eşleştir

:focus

Aktif alan kenarını vurgular
placeholder

İpucu metnini taşır
border-collapse: collapse

Tablo kenarlarını birleştirir
:nth-child(even)

Çift satırları işaretler
tr:hover

Üzerine gelinen satırı vurgular

Zebra çizgi seçicisini yaz

tbody tr:____ {
  background: #f5f5f5;
}

Cevabı göster

tbody tr:nth-child(even) {
  background: #f5f5f5;
}

Bir input'a yazılacak ipucu metni en uygun olarak hangi yere konur?
```
<input type="text" ... />
```
- <input ... value="Adınızı girin">
- <label>Adınızı girin</label>
- <input ... title="Adınızı girin">
- <input ... placeholder="Adınızı girin">
Cevabı göster

<input ... placeholder="Adınızı girin"> — Doğru. placeholder, alan boşken görünen ve yazınca kaybolan ipucu metnidir.

Sıradaki ders: Meydan okuma - Orta seviye projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler