Label ve placeholder

label ve ::placeholder stillerini öğrenirsin.

label etiketi stilleri

<label> etiketi, bir form alanının ne için olduğunu söyler. Tarayıcı varsayılan olarak onu satır içi ve sıradan bir metin gibi gösterir. Bu çoğu formda yetersiz kalır.

Etiketi daha okunur kılmak için font-size, font-weight ve margin-bottom ayarlanır. Böylece etiket, alanın hemen üstünde belirgin durur; kullanıcı ne gireceğini hemen görür.

::placeholder sözde öğesi

Bir input'un içine yazılan soluk ipucu metnine placeholder denir. Kullanıcı yazmaya başlayınca kaybolur. Tarayıcı onu soluk gri gösterir.

Bu rengi değiştirmek için ::placeholder sözde öğesi kullanılır. Örnek: input::placeholder { color: #6b7280; }. Böylece ipucu marka rengine uyar veya daha okunur bir tona geçer.

Form düzeni

Bir formu düzenlerken etiket ve alan doğru biçimde dizilmeli. En basit yöntem: etiketi bir blok yap, altına alanı koy. Böylece her ikisi alt alta, hizalı durur.

Bunun için label { display: block; margin-bottom: 4px; } yazılır. Ardından input kendi satırına gelir. Form alanları arasına da margin-bottom eklenir; böylece alanlar soluk soluca yapışmaz.

Uygulama label ve placeholder stillerini yaz

İki bildirim bloğu yaz. label için: display: block;, font-size: 0.95rem;, margin-bottom: 4px;. input::placeholder için: color: #6b7280;.

Örnek çözümü göster

iki seçici aç; gerekli bildirimleri alt alta yaz.
Örnek çözüm:
label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
input::placeholder {
  color: #6b7280;
}

Kendini test et

Hangisi placeholder rengini değiştirir?
- input:placeholder { ... }
- input.placeholder { ... }
- input::placeholder { ... }
- input--placeholder { ... }
Cevabı göster

input::placeholder { ... } — Doğru! ::placeholder çift ikinokta ile başlayan sözde öğedir.

::placeholder rengini değiştir

input::placeholder {
  color: ____;
}

Cevabı göster

input::placeholder {
  color: #6b7280;
}

Form öğelerini eşleştir

label

alan başlığı
::placeholder

ipucu metni
input

veri alanı
button

gönderme düğmesi

Sıradaki ders: Focus durumları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler