Yükleniyor...

CSS form kontrolleri

Formlar insanların yazdığı, seçtiği ve gönderdiği yerdir. CSS input, textarea ve select öğelerini daha net ve sakin yapabilir — okunaklı padding, düzenli kenarlıklar ve gerçekten görünen bir odak ipucu — HTML anlamı korurken.

Bir form-kontrol araç seti

📊 Bir bakışta form kontrolleri

Parça Günlük iş
input / textarea / select Birlikte stillediğiniz ana kontroller
padding + border Alanlara yer ve net kenar vermek
border-radius Köşeleri yumuşatmak
:focus-visible Klavye/işaretçi için odak halkası göstermek
:disabled Şu an düzenlenemeyen alanları soldurmak

Paylaşılan bir sınıfı (veya öğe grubunu) bir kez stilleyin ki her alan aynı aileden görünsün. Düğme görünümü sonraki derste.

Metin girdileri — yer ve kenarlar

Varsayılan tarayıcı girdileri cihazlarda sık sık düzensiz görünür. Genişlik, padding, yazı tipi boyutu ve hafif bir kenarlık ayarlayın; yazmak rahat olsun.

Temel metin girdisi

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — yazmak için yer

Textarea’lara yükseklik ve girdilerle aynı padding dili gerekir. Uzun yanıtlar bekliyorsanız dikey resize’a izin verin; düzen sabit kalmalıysa kilitleyin.

Rahat textarea

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — aynı aile

Açılır listeler metin alanlarıyla aynı kenarlık, yarıçap ve padding’i paylaşmalı; form yama gibi görünmesin.

Aynı ailede select

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Görünen bir odak

Odak stillerini yerine koymadan asla kaldırmayın. :focus-visible klavye için net bir halka çizer ve görünümü sakin tutar.

Görünür odak halkası

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Devre dışı alanlar

Disabled kontroller kullanılamaz görünmeli — daha düşük opaklık veya soluk arka plan — düzenin içinden kaybolmadan.

Disabled tonu

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Sakin bir alan alışkanlığı

Paylaşılan bir alan stili tutun, etiket boşluğuna saygı gösterin, odağı koruyun ve düğme kozmetiğini Buttons dersine bırakın.

Paylaşılan alan sınıfı

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Kendiniz deneyin

  1. Metin/e-posta girdilerini padding, border ve border-radius ile stilleyin.
  2. Bir textarea eşleştirin; resize: vertical verin.
  3. Bir select’i aynı kenarlık ailesiyle stilleyin.
  4. :focus-visible outline + kenarlık rengi ekleyin — çıplak outline: none bırakmayın.
  5. :disabled bir girdiyi soldurun ve hâlâ alan gibi okunduğunu kontrol edin.

Sık hatalar

  • Odak yerine koymadan outline: none (klavye kullanıcıları kaybolur)
  • Mobil yazmayı acıtan minik padding/yazı tipi
  • Her kontrolü farklı stilleyip formu rastgele göstermek
  • Bu dersi düğme tasarımına çevirmek (o sonraki)
  • Tablo border-collapse / zebra ile karıştırmak (önceki oturum)

Özet

  • Paylaşılan padding, kenarlık ve yarıçap input, textarea ve select’i birleştirir
  • Textarea’lara yükseklik ve makul resize verin
  • Görünür bir :focus-visible ipucu tutun
  • :disabled alanları soldurun; gizlemeyin
  • Düğme kozmetiğini sonraki derse bırakın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 33 / 35
Css Ders