फ़ॉर्म फ़ील्ड में कॉन्टेंट अपने-आप फ़िट होने की सुविधा

डिफ़ॉल्ट रूप से, <input>, <textarea>, और <select> जैसे फ़ॉर्म कंट्रोल के डाइमेंशन तय होते हैं. इनका साइज़ एक जैसा रहता है, भले ही उपयोगकर्ता कितना भी कॉन्टेंट डाले या चुने.

इन कंट्रोल को अपने-आप छोटा या बड़ा होने की अनुमति देने के लिए, field-sizing: content सीएसएस प्रॉपर्टी का इस्तेमाल करें. इससे, ये कंट्रोल अपने कॉन्टेंट (प्लेसहोल्डर के साथ) के हिसाब से फ़िट हो पाएंगे.

फ़ॉर्म कंट्रोल का साइज़ अपने-आप सेट होने की सुविधा

इनपुट, चुने गए विकल्पों या टेक्स्ट एरिया पर field-sizing: content सेट करने से, उपयोगकर्ता के टाइप करने या विकल्प चुनने पर, उनका साइज़ डाइनैमिक तौर पर बदल जाता है. हालांकि, आपको इनहेरिट की गई स्टाइलिंग, डिफ़ॉल्ट लेआउट, और कम से कम/ज़्यादा से ज़्यादा सीमाओं का ध्यान रखना होगा, ताकि उपयोगकर्ता को बेहतर अनुभव मिल सके.

लेआउट से जुड़ी समस्याओं से बचने के लिए, हमारा सुझाव है कि टेक्स्ट इनपुट पर field-sizing: content के साथ-साथ, min-inline-size (या min-width) और max-inline-size (या max-width), दोनों को सेट करें. कम से कम साइज़ सेट करने से, इनपुट फ़ील्ड खाली होने पर उसकी चौड़ाई शून्य नहीं होती. इससे वह क्लिक करने लायक बना रहता है. वहीं, ज़्यादा से ज़्यादा साइज़ सेट करने से, वह ज़रूरत से ज़्यादा बड़ा नहीं होता और पेज का लेआउट खराब नहीं होता.

टेक्स्ट एरिया के लिए, हॉरिज़ॉन्टल तौर पर अपने-आप साइज़ बदलने की सुविधा चालू करने से, उपयोगकर्ता अनुभव (UX) खराब हो सकता है. उदाहरण के लिए, लंबे प्लेसहोल्डर वाला टेक्स्ट एरिया, उपयोगकर्ता के एक वर्ण टाइप करने पर हॉरिज़ॉन्टल तौर पर अचानक छोटा हो जाएगा. इससे बचने के लिए, टेक्स्टएरिया में साफ़ तौर पर चौड़ाई (जैसे, width: 100%) लागू करें. इससे टेक्स्टएरिया की हॉरिज़ॉन्टल चौड़ाई स्थिर रहती है. हालांकि, कॉन्टेंट रैप होने पर, वर्टिकल साइज़ अपने-आप बदल जाता है.

हमारा सुझाव है कि field-sizing: content का इस्तेमाल करके, <select> एलिमेंट पर max-inline-size (या max-width) सेट करें. इससे यह पक्का किया जा सकेगा कि चुने गए बहुत लंबे विकल्प, पेज के लेआउट को खराब न करें.

/* 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;
}

अहम जानकारी: साफ़ तौर पर बताई गई width और height प्रॉपर्टी, सभी फ़ॉर्म कंट्रोल पर field-sizing: content को बदल देती हैं. अगर आपके प्रोजेक्ट का ग्लोबल सीएसएस, इनपुट, चुने गए विकल्पों या टेक्स्ट एरिया को width: 100% पर सेट करता है, तो आपको उन्हें साफ़ तौर पर width: auto (या width: fit-content) पर रीसेट करना होगा. ऐसा उन एलिमेंट पर करना होगा जो अपने-आप साइज़ बदलने की सुविधा के लिए, field-sizing: content का इस्तेमाल करते हैं. इसके उलट, अगर पहले से ही टेक्स्टएरिया की ऊंचाई को ग्लोबल तौर पर सेट किया गया है, तो आपको साफ़ तौर पर height: auto सेट करना चाहिए.

अहम जानकारी: ग्रिड और फ़्लेक्सबॉक्स लेआउट, अक्सर उपलब्ध जगह को भरने के लिए अपने चाइल्ड एलिमेंट को अपने-आप बड़ा कर देते हैं. अगर field-sizing: content का इस्तेमाल करने वाला कोई फ़ॉर्म कंट्रोल छोटा नहीं हो रहा है, तो उसके कंटेनर की अलाइनमेंट प्रॉपर्टी देखें. साथ ही, स्ट्रेचिंग को बदलने के लिए, फ़ॉर्म कंट्रोल पर align-self: start या justify-self: start लागू करें.

फ़ॉलबैक रणनीतियां

field-sizing को प्रोग्रेसिव एन्हांसमेंट के तौर पर इस्तेमाल किया जाना चाहिए. जिन ब्राउज़र में यह प्रॉपर्टी काम नहीं करती उनमें फ़ॉर्म कंट्रोल, डिफ़ॉल्ट और तय साइज़ के हिसाब से अनुकूल गिरावट के साथ काम करते हैं. उपयोगकर्ताओं को तय साइज़ वाले इनपुट और टेक्स्ट एरिया में, ओवरफ़्लो होने वाले कॉन्टेंट के लिए स्टैंडर्ड स्क्रोलिंग का अनुभव मिलेगा.

अगर पुराने ब्राउज़र के लिए, डाइनैमिक तौर पर बढ़ने वाले फ़ील्ड ज़रूरी हैं, तो आपको सुविधा की पहचान करने की सुविधा और समस्या हल करने के लिए कोई मुश्किल तरीका इस्तेमाल करना होगा. टेक्स्टएरिया के लिए सबसे बेहतर फ़ॉलबैक, सीएसएस ग्रिड ट्रिक का इस्तेमाल करता है. इसमें छिपा हुआ स्यूडो-एलिमेंट, उपयोगकर्ता के इनपुट को रीयल-टाइम में दिखाता है. इससे ग्रिड कंटेनर (और उसके अंदर मौजूद टेक्स्टएरिया) को बड़ा होने के लिए मजबूर किया जाता है.

<!-- 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;
  }
}

हर फ़ॉर्म कंट्रोल के लिए, डीओएम नोड में स्टाइल को डुप्लीकेट करने और स्टेट को सिंक करने की प्रोसेस जटिल होती है. इसलिए, ज़्यादातर ऐप्लिकेशन के लिए, फ़िक्स्ड इनपुट के डिफ़ॉल्ट फ़ॉलबैक व्यवहार पर भरोसा करना सबसे सही तरीका है. हालांकि, अगर उपयोगकर्ता अनुभव के लिए डाइनैमिक साइज़िंग ज़रूरी है, तो यह तरीका नहीं अपनाया जाना चाहिए.