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