Bootstrap form-control ile input, textarea ve dosya alanı

Form sınıfları Reboot üzerine kurulur

Bootstrap, sayfaya eklendiği anda tarayıcıların form öğelerine verdiği varsayılanları Reboot adlı temel katmanla sadeleştirir. Reboot <fieldset> öğesinin kenarlığını, iç ve dış boşluğunu kaldırır, böylece onu alanları gruplamak için rahatça sarmalayıcı olarak kullanabilirsiniz. <legend> bir tür başlık gibi görünecek şekilde yeniden biçimlenir, <label> öğesi display: inline-block olur ki ona margin verilebilsin. <input>, <select>, <textarea> ve <button> öğelerinin margin değeri sıfırlanır ve satır yüksekliği üst öğeden devralınır. <textarea> yalnızca dikey yönde boyutlandırılabilir, çünkü yatay büyütme sayfa düzenini kolayca bozar.

Bu sadeleştirme her öğeye uygulanır ama tek başına bir "Bootstrap formu" görünümü vermez. Asıl görünüm, sizin bilerek eklediğiniz sınıflardan gelir: belgeler bu yaklaşımı, tarayıcılar ve cihazlar arasında daha tutarlı bir görüntü için sınıflarla katılımlı (opt-in) bir biçimlendirme olarak tarif eder. Yani class yazmadığınız bir alan Reboot görünümünde kalır. Reboot'un tipografi tarafını Reboot ve tipografi sınıfları yazısında bulabilirsiniz.

İlk form: etiket, alan ve yardım metni

Aşağıdaki örnek belgelerdeki genel bakış örneğinin Türkçeleştirilmiş, kısaltılmış hâlidir. Her alan bir .mb-3 sarmalayıcısı içinde durur; bu sınıf alttan boşluk bırakan bir margin yardımcı sınıfı ve belgeler formlarda tek yönlü, tercihen alt margin kullanmayı önerir.

<form>
  <div class="mb-3">
    <label for="eposta" class="form-label">E-posta adresi</label>
    <input type="email" class="form-control" id="eposta" aria-describedby="epostaYardim">
    <div id="epostaYardim" class="form-text">Adresinizi kimseyle paylaşmayız.</div>
  </div>
  <div class="mb-3">
    <label for="parola" class="form-label">Parola</label>
    <input type="password" class="form-control" id="parola">
  </div>
  <div class="mb-3">
    <label for="mesaj" class="form-label">Mesajınız</label>
    <textarea class="form-control" id="mesaj" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Örnekte dikkat edilecek üç nokta var. Birincisi, etiketin for değeri alanın id değeriyle aynıdır; bu eşleşme etiketi alana bağlar ve alanın erişilebilir adını oluşturur. İkincisi, yardım metni aria-describedby ile alana bağlanmıştır; belgeler bu bağlantının açıkça kurulmasını ister, çünkü ekran okuyucular alan odaklandığında ancak bu sayede açıklamayı da okur. Üçüncüsü, belgeler her alana uygun type değeri vermenizi önerir: e-posta için email, sayı için number gibi. Böylece tarayıcının yerleşik denetimlerinden ve uygun klavyelerden yararlanırsınız; bu öznitelikler HTML'in konusu olduğu için ayrıntısı HTML öğrenme rehberinde.

Bootstrap 4'ten geliyorsanız iki değişikliği bilmeniz gerekir: v5'te etiketler artık .form-label sınıfı ister ve .form-text kendi başına bir display değeri atamaz. İkinci değişiklik sayesinde yardım metnini blok olarak göstermek için <div>, satır içi göstermek için <span> veya <small> kullanmanız yeterlidir. Blok kullanımda .form-text üstten küçük bir boşluk bırakır. Tüm sürüm farkları Bootstrap 4'ten 5'e geçiş yazısında.

form-control sınıfının arkasındaki CSS

Bir sınıfın ne yaptığını en net gösteren şey derlenmiş kuralın kendisidir. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf şöyle tanımlıdır:

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* (kısaltıldı) */
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

Bu kuraldan birkaç pratik sonuç çıkar. display: block ve width: 100% yüzünden alanlar varsayılan olarak alt alta dizilir ve kabın tamamını kaplar; dar bir alan istiyorsanız genişliği sütun sınıflarıyla vermelisiniz. appearance: none tarayıcının kendi kutu çizimini kapatır, bu sayede alan her tarayıcıda aynı kenarlıkla görünür. Odakta kenarlık #86b7fe rengine döner ve outline kaldırılıp yerine 0.25rem kalınlığında yarı saydam bir gölge halkası konur; odak göstergesi kaybolmaz, yalnızca biçimi değişir. Placeholder metni #6c757d grisiyle ve tam opaklıkla yazılır.

Kenarlık ve gölge geçişi 0.15 saniyelik bir transition ile yumuşatılır. Kullanıcı işletim sisteminde azaltılmış hareket tercih etmişse aynı dosyadaki @media (prefers-reduced-motion: reduce) bloğu bu geçişi transition: none ile kapatır. Bu davranışın tüm bileşenlere yayılan hâlini Bootstrap erişilebilirlik yazısında anlatıyoruz.

Boyut: form-control-lg ve form-control-sm

Alanın yüksekliğini değiştirmek için .form-control yanına .form-control-lg veya .form-control-sm eklersiniz. Belgeler bunu yükseklik ayarı olarak sunar; derlenmiş CSS'e bakınca yüksekliğin iç boşluk ve yazı boyutundan doğduğunu görürsünüz.

<input class="form-control form-control-lg" type="text" placeholder="Büyük alan" aria-label="Büyük alan örneği">
<input class="form-control" type="text" placeholder="Varsayılan alan" aria-label="Varsayılan alan örneği">
<input class="form-control form-control-sm" type="text" placeholder="Küçük alan" aria-label="Küçük alan örneği">

Küçük ve büyük sınıflar ayrıca bir min-height değeri tanımlar; örneğin büyük alan için calc(1.5em + (1rem + 2px)). Aynı boyut ailesi başka yerlerde de karşınıza çıkar: select için .form-select-lg ve .form-select-sm (select yazısı), giriş grupları için .input-group-lg ve .input-group-sm (input group yazısı), yatay formdaki etiketler için .col-form-label-lg ve .col-form-label-sm (form layout yazısı). Bir formda bir alanı büyütüp etiketini büyütmezseniz hizalama kayar, bu yüzden boyutu her zaman eşleriyle birlikte düşünün.

disabled, readonly ve form-control-plaintext

disabled boole özniteliği alanı gri gösterir ve fare etkileşimini keser; kullanıcı içine tıklayıp yazamaz. readonly ise değerin değiştirilmesini engeller ama alanı etkileşimden tamamen koparmaz. Derlenmiş kurala bakarsanız ikisinin de aynı #e9ecef arka planını aldığını görürsünüz, yani görsel olarak çok benzerler; fark davranıştadır. Belgelerdeki bir örnek iki özniteliği aynı alanda birlikte kullanır.

Salt okunur bir değeri form düzenini bozmadan düz metin gibi göstermek istiyorsanız readonly alana .form-control yerine .form-control-plaintext verin. Bu sınıf arka planı saydam yapar, kenarlığı saydam bir kenarlığa çevirir ama dikey iç boşluğu (padding: 0.375rem 0) ve satır yüksekliğini korur. Böylece yanındaki normal alanlarla aynı satır hizasında durur. Aşağıdaki örnek yatay form düzeninde bunu gösterir:

<div class="mb-3 row">
  <label for="sabitEposta" class="col-sm-2 col-form-label">E-posta</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="sabitEposta" value="ad@ornek.com">
  </div>
</div>
<div class="mb-3 row">
  <label for="yeniParola" class="col-sm-2 col-form-label">Parola</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="yeniParola">
  </div>
</div>

Fieldset ile bir grubu tek seferde devre dışı bırakmak

Birçok alanı aynı anda kapatmanız gerekiyorsa her birine ayrı ayrı disabled yazmak yerine onları bir <fieldset disabled> içine alın. Belgelere göre tarayıcılar böyle bir fieldset içindeki yerel form kontrollerini, yani <input>, <select> ve <button> öğelerini devre dışı sayar; klavye ve fare etkileşimi birlikte kesilir.

<form>
  <fieldset disabled>
    <legend>Fatura bilgileri (düzenleme kapalı)</legend>
    <div class="mb-3">
      <label for="firmaAdi" class="form-label">Firma adı</label>
      <input type="text" id="firmaAdi" class="form-control" placeholder="Firma adı">
    </div>
    <div class="mb-3">
      <label for="vergiDairesi" class="form-label">Vergi dairesi</label>
      <select id="vergiDairesi" class="form-select">
        <option>Seçim kapalı</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Kaydet</button>
  </fieldset>
</form>

Dosya seçme alanı

Bootstrap 5'te dosya alanı için ayrı bir bileşen yoktur: type="file" olan bir input'a da .form-control verirsiniz. v4'teki .custom-file yapısı kaldırıldı ve yerini .form-control üzerine eklenen özel stiller aldı; .form-control-file sınıfı da artık yok. Derlenmiş CSS, tarayıcının "dosya seç" düğmesini ::file-selector-button sözde öğesiyle biçimlendirir: düğme #e9ecef arka planla alanın soluna yerleşir ve fareyle üzerine gelindiğinde #dde0e3 tonuna koyulaşır.

<div class="mb-3">
  <label for="belge" class="form-label">Belge yükleyin</label>
  <input class="form-control" type="file" id="belge">
</div>
<div class="mb-3">
  <label for="fotograflar" class="form-label">Birden çok fotoğraf</label>
  <input class="form-control" type="file" id="fotograflar" multiple>
</div>
<div>
  <label for="kucukDosya" class="form-label">Küçük dosya alanı</label>
  <input class="form-control form-control-sm" id="kucukDosya" type="file">
</div>

Boyut sınıfları burada da çalışır; .form-control-sm ve .form-control-lg yalnızca alanı değil içteki seçme düğmesinin boşluklarını da küçültüp büyütür. multiple özniteliği birden fazla dosya seçimine izin verir, disabled ise alanı kapatır; derlenmiş kurala göre imleç yalnızca alan devre dışı veya salt okunur değilken pointer olur. Dosya alanını bir "Yükle" etiketi ya da düğmesiyle yan yana koymak isterseniz giriş grubunu kullanın; örnekleri input group ve floating label yazısında.

Renk seçici ve datalist

type="color" olan bir input'a .form-control ile birlikte .form-control-color verdiğinizde alan dar bir renk kutusuna dönüşür. Derlenmiş kurala göre bu sınıf max-width: 3rem, height: auto ve padding: 0.375rem uygular; içteki renk örneğinin yüksekliği 1.5em olur. Görünür bir açıklama metni koymuyorsanız belgelerdeki örnekte olduğu gibi bir title özniteliği ekleyin.

<label for="temaRengi" class="form-label">Tema rengi</label>
<input type="color" class="form-control form-control-color" id="temaRengi" value="#563d7c" title="Renginizi seçin">

Datalist, bir metin alanına yazarken tamamlanabilen öneriler sunar. Input'un list özniteliği, <datalist> öğesinin id değerini gösterir. Görünüşte select menüsüne benzese de belgeler, datalist menülerinin biçimlendirme açısından çok daha sınırlı olduğunu ve tarayıcıdan tarayıcıya tutarsız göründüğünü özellikle belirtir; Bootstrap öneri listesinin kendisini biçimlendirmez. Kesin bir seçim listesi gerekiyorsa select kullanın.

<label for="sehirAra" class="form-label">Şehir</label>
<input class="form-control" list="sehirListesi" id="sehirAra" placeholder="Yazmaya başlayın...">
<datalist id="sehirListesi">
  <option value="İstanbul">
  <option value="Ankara">
  <option value="İzmir">
  <option value="Bursa">
</datalist>

Textarea ile çalışmak

Çok satırlı alanlar için de aynı .form-control sınıfı kullanılır. Yükseklik normalde rows özniteliğinden gelir; derlenmiş CSS ayrıca textarea.form-control için bir satırlık alanla aynı olan calc(1.5em + (0.75rem + 2px)) değerinde min-height tanımlar, böylece alan bundan daha kısa çekilemez. Küçük ve büyük boyut sınıfları da textarea için kendi min-height değerlerini getirir. Reboot sayesinde kullanıcı alanı yalnızca dikey yönde büyütebilir. Floating label kullanırken kural değişir: orada rows yerine açık bir height vermeniz gerekir, ayrıntısı floating label bölümünde.

Sass değişkenleri

Bootstrap'i Sass kaynağından derliyorsanız form kontrollerinin görünümünü sınıfları ezmek yerine değişkenlerle değiştirebilirsiniz. Belgeler iki katman tarif eder: $input-btn-* değişkenleri butonlar ile form kontrolleri arasında paylaşılan genel değerlerdir, $input-* değişkenleri ise butonlar dışındaki form kontrollerinin çoğunda kullanılır. Aşağıdaki tablo v5.0.2 _variables.scss dosyasından birkaç örnek içerir:

Odak halkasının rengi $component-active-bg üzerinden tema rengine bağlıdır; ana rengi değiştirdiğinizde odak rengi de onunla birlikte değişir. Değişkenleri ezmenin doğru sırası ve !default mantığı Sass ile özelleştirme yazısında, tema renkleri theme colors yazısında anlatılıyor.

Sık yapılan hatalar

• Etiketi alana bağlamamak: for ile id eşleşmezse etiket tıklanınca alan odaklanmaz ve alanın erişilebilir adı oluşmaz.
• Placeholder'ı etiket yerine kullanmak: Belgeler, yardımcı teknolojilerin placeholder'ı yalnızca son çare olarak ad kabul edebileceğini ve bu metnin alan dolunca kaybolduğunu hatırlatır. Görünür bir etiket en iyisidir.
• v4 alışkanlıkları: .form-group, .form-row ve .form-control-file v5.0.2 CSS dosyasında yoktur. Gruplama için margin ve grid sınıflarını, dosya için .form-control kullanın.
• Select'e form-control vermek: Select menüsü .form-select ister; onay kutusu ise .form-check-input. Yanlış sınıf, ok simgesi ve iç boşluk gibi ayrıntıları bozar.
• Genişliği CSS ile zorlamak: .form-control her zaman yüzde yüz genişliktedir. Alanı daraltmak için onu bir sütuna koyun, width değerini satır içi yazmayın.
• Yardım metnini bağlamamak: .form-text yalnızca görsel bir sınıftır; alanla ilişkisini aria-describedby kurar.

Sık Sorulan Sorular

form-control sınıfı hangi öğelerde kullanılır?

Metin türündeki <input> öğelerinde (text, email, password, number gibi), <textarea> öğesinde, dosya alanında ve .form-control-color ile birlikte renk alanında. Onay kutusu, radyo, select ve range için ayrı sınıflar vardır.

Alan neden tüm genişliği kaplıyor?

Çünkü .form-control kuralı display: block ve width: 100% içerir. Daha dar bir alan için onu bir grid sütununa yerleştirin; seçenekler form layout yazısında.

readonly ile disabled arasındaki fark nedir?

v5.0.2 CSS ikisine de aynı gri arka planı verir. disabled alanla etkileşimi keser, readonly değerin değiştirilmesini engeller. Değeri düz metin gibi göstermek istiyorsanız readonly ile .form-control-plaintext kullanın.

Bootstrap 5.0 dosya alanının yazısını değiştirebilir mi?

Bootstrap 5.0 dosya alanı tarayıcının yerel seçme düğmesini ::file-selector-button ile biçimlendirir; düğmenin metni için ayrı bir sınıf ya da seçenek belgelenmemiştir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Checkbox, radio, switch ve select · Input group ve floating label · Form layout · Form doğrulama · HTML öğrenme rehberi