Form Alanları İçeriğe Otomatik Olarak Sığdırılır

<input>, <textarea> ve <select> gibi form kontrolleri varsayılan olarak sabit boyutlara sahiptir. Kullanıcının girdiği veya seçtiği içerik miktarından bağımsız olarak boyutları sabit kalır.

Bu kontrollerin, içeriklerine (yer tutucular dahil) sığacak şekilde otomatik olarak küçülmesine veya büyümesine izin vermek için field-sizing: content CSS özelliğini kullanın.

Otomatik boyutlandırılan form kontrolleri

Girişler, seçimler veya metin alanlarında field-sizing: content ayarını yapmak, kullanıcı seçenekleri yazarken veya seçerken bunların dinamik olarak yeniden boyutlandırılmasına olanak tanır. Ancak sağlam bir kullanıcı deneyimi sağlamak için devralınan stilleri, varsayılan düzenleri ve minimum/maksimum kısıtlamaları hesaba katmanız gerekir.

Düzen sorunlarını önlemek için metin girişlerinde field-sizing: content ile birlikte hem min-inline-size (veya min-width) hem de max-inline-size (veya max-width) değerlerini ayarlamanız önerilir. Minimum boyut, girişin boşken sıfır genişliğe daralmasını (tıklanamaz hale gelmesini) önler ve maksimum boyut, girişin süresiz olarak genişleyip sayfa düzenini bozmasını engeller.

Metin alanları için yatay otomatik boyutlandırmaya izin vermek, rahatsız edici bir kullanıcı deneyimine neden olabilir (ör. uzun bir yer tutucu içeren metin alanı, kullanıcı tek bir karakter yazdığında yatay olarak aniden küçülür). Bunu önlemek için metin alanına açık bir genişlik (ör. width: 100%) uygulayın. Bu, metin alanını sabit bir yatay genişlikte kalmaya zorlar ancak içerik sarmalandıkça dikey olarak otomatik boyutlandırılır.

Çok uzun seçili seçeneklerin sayfa düzenini bozmaması için field-sizing: content kullanarak <select> öğelerinde max-inline-size (veya max-width) ayarlamanız önerilir.

/* Applies horizontal auto-sizing to inputs */
input {
  /* Instructs the element to size itself to fit its content */
  field-sizing: content;

  /* Reset explicit width if inherited from global styles */
  width: auto;

  /* Prevents the input from collapsing and disappearing when empty */
  min-inline-size: 15ch;

  /* Prevents infinite horizontal growth */
  max-inline-size: 50ch;
}

textarea {
  /* Instructs the element to size itself to fit its content */
  field-sizing: content;

  /* Reset explicit height if inherited from global styles */
  height: auto;

  /* Use a fixed width to prevent jarring horizontal shifts when replacing a long placeholder */
  width: 50ch; /* or 100% depending on your layout */

  /* Sets a reasonable minimum height (e.g., 3 lines) for empty textareas */
  min-block-size: 3lh;

  /* Prevents infinite vertical growth. Once a textarea hits this */
  /* height, it will stop growing and show a vertical scrollbar. */
  max-block-size: 10lh;
}

select {
  /* Sizes the select element to fit the active option only */
  field-sizing: content;

  /* Prevents the dropdown from expanding infinitely and breaking the layout */
  max-inline-size: 50ch;
}

ÖNEMLİ: Açık width ve height özellikleri, tüm form kontrollerinde field-sizing: content özelliğini geçersiz kılar. Projenizin global CSS'si girişleri, seçimleri veya metin alanlarını width: 100% olarak ayarlıyorsa otomatik boyutlandırmanın çalışması için field-sizing: content kullanan öğelerde bunları açıkça width: auto (veya width: fit-content) olarak sıfırlamanız gerekir. Daha önce genel olarak sabit bir yükseklik ayarlandıysa metin alanlarında height: auto değerini açıkça ayarlamanız gerekir.

ÖNEMLİ: Izgara ve Flexbox düzenleri, genellikle alt öğelerini mevcut alanı dolduracak şekilde dolaylı olarak genişletir. field-sizing: content kullanan herhangi bir form denetimi küçülmüyorsa kapsayıcısının hizalama özelliklerini kontrol edin ve esnemeyi geçersiz kılmak için form denetimine align-self: start veya justify-self: start uygulayın.

Yedek stratejiler

field-sizing, progresif geliştirme olarak değerlendirilmelidir. Özelliği desteklemeyen tarayıcılarda form kontrolleri, varsayılan ve sabit boyutlandırma davranışlarına kontrollü azalma ile geri döner. Kullanıcılar, sabit boyutlu girişlerde ve metin alanlarında taşan içerikler için standart kaydırma deneyimini yaşar.

Eski tarayıcılar için dinamik olarak büyüyen alanlar kesinlikle gerekliyse özellik algılama ve karmaşık bir geçici çözüm kullanmanız gerekir. Metin alanları için en sağlam yedek, gizli bir sözde öğenin kullanıcının girişini gerçek zamanlı olarak yansıtarak ızgara kapsayıcısını (ve içindeki metin alanını) genişlemeye zorladığı bir CSS ızgara hilesi kullanır.

<!-- The textarea is wrapped in a container that will mirror its value -->
<div class="growable-textarea" data-replicated-value="">
  <textarea></textarea>
</div>

// Only attach the fallback event listeners if field-sizing is unsupported
if (!CSS.supports('field-sizing', 'content')) {
  document.querySelectorAll('.growable-textarea > textarea').forEach(textarea => {
    textarea.addEventListener('input', () => {
      textarea.parentNode.dataset.replicatedValue = textarea.value;
    });
  });
}

/* Only apply the fallback if field-sizing is NOT supported */
@supports not (field-sizing: content) {
  .growable-textarea {
    display: grid;
  }

  /* The pseudo-element and textarea must share the exact same cell, font, and padding */
  .growable-textarea::after,
  .growable-textarea > textarea {
    grid-area: 1 / 1 / 2 / 2;
    font: inherit;
    padding: 0.5rem;
    border: 1px solid #999;
  }

  /* The pseudo-element renders the copied text invisibly to stretch the grid */
  .growable-textarea::after {
    /* The space is necessary for trailing empty lines to be rendered */
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
  }

  .growable-textarea > textarea {
    resize: none;
    overflow: hidden;
  }
}

Her form denetimi için stilleri kopyalamanın ve durumu DOM düğümleri arasında senkronize etmenin karmaşıklığı göz önüne alındığında, dinamik boyutlandırma kullanıcı deneyimi açısından kritik olmadığı sürece çoğu uygulama için sabit girişlerin varsayılan yedek davranışını kullanmak önerilen yaklaşımdır.