फार्म

अवलोकन

बूटस्ट्रैप के फॉर्म नियंत्रण कक्षाओं के साथ हमारे रीबूट किए गए फॉर्म शैलियों पर विस्तारित होते हैं। ब्राउज़रों और उपकरणों में अधिक सुसंगत प्रतिपादन के लिए इन कक्षाओं का उपयोग उनके अनुकूलित डिस्प्ले में ऑप्ट इन करने के लिए करें।

ईमेल सत्यापन, संख्या चयन, आदि जैसे नए इनपुट नियंत्रणों का लाभ उठाने के लिए typeसभी इनपुट (जैसे, emailईमेल पते या संख्यात्मक जानकारी के लिए) पर एक उपयुक्त विशेषता का उपयोग करना सुनिश्चित करें ।number

यहां बूटस्ट्रैप की प्रपत्र शैलियों को प्रदर्शित करने के लिए एक त्वरित उदाहरण दिया गया है। आवश्यक कक्षाओं, प्रपत्र लेआउट, आदि पर दस्तावेज़ीकरण के लिए पढ़ते रहें।

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

प्रपत्र पाठ

ब्लॉक-लेवल या इनलाइन-लेवल फॉर्म टेक्स्ट का उपयोग करके बनाया जा सकता है .form-text।

इनपुट के नीचे फॉर्म टेक्स्ट को स्टाइल किया जा सकता है .form-text। यदि एक ब्लॉक-स्तरीय तत्व का उपयोग किया जाएगा, तो ऊपर दिए गए इनपुट से आसान अंतर के लिए एक शीर्ष मार्जिन जोड़ा जाता है।

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

इनलाइन टेक्स्ट किसी भी विशिष्ट इनलाइन HTML तत्व का उपयोग कर सकता है (चाहे वह a <span>, <small>, या कुछ और हो) .form-textवर्ग के अलावा और कुछ नहीं।

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

अक्षम प्रपत्र

disabledउपयोगकर्ता इंटरैक्शन को रोकने और इसे हल्का दिखाने के लिए इनपुट पर बूलियन विशेषता जोड़ें ।

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

सभी नियंत्रणों को अक्षम करने के लिए disabledविशेषता को a में जोड़ें । <fieldset>ब्राउज़र सभी मूल प्रपत्र नियंत्रणों ( <input>, <select>, और <button>तत्वों) को एक <fieldset disabled>अक्षम के रूप में मानते हैं, उन पर कीबोर्ड और माउस दोनों की बातचीत को रोकते हैं।

हालांकि, अगर आपके फॉर्म में कस्टम बटन जैसे तत्व भी शामिल हैं, जैसे कि <a class="btn btn-*">...</a>, इन्हें केवल की शैली दी जाएगी pointer-events: none, जिसका अर्थ है कि वे अभी भी कीबोर्ड का उपयोग करके फोकस करने योग्य और संचालित हैं। tabindex="-1"इस मामले में, आपको इन नियंत्रणों को फोकस प्राप्त करने से रोकने के लिए और aria-disabled="disabled"सहायक तकनीकों को उनकी स्थिति का संकेत देने के लिए जोड़कर मैन्युअल रूप से संशोधित करना होगा ।

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

सरल उपयोग

सुनिश्चित करें कि सभी प्रपत्र नियंत्रणों का एक उपयुक्त सुलभ नाम है ताकि उनके उद्देश्य को सहायक तकनीकों के उपयोगकर्ताओं तक पहुँचाया जा सके। इसे प्राप्त करने का सबसे सरल तरीका है एक <label>तत्व का उपयोग करना, या—बटनों के मामले में— <button>...</button>सामग्री के हिस्से के रूप में पर्याप्त रूप से वर्णनात्मक पाठ शामिल करना।

उन स्थितियों के लिए जहां एक दृश्यमान या उपयुक्त टेक्स्ट सामग्री शामिल करना संभव नहीं है <label>, वहां अभी भी एक सुलभ नाम प्रदान करने के वैकल्पिक तरीके हैं, जैसे:

• <label>.visually-hiddenवर्ग का उपयोग करके छिपे हुए तत्व
• एक मौजूदा तत्व की ओर इशारा करते हुए जो एक लेबल के रूप में कार्य कर सकता हैaria-labelledby
• एक titleविशेषता प्रदान करना
• स्पष्ट रूप से उपयोग कर रहे तत्व पर सुलभ नाम सेट करनाaria-label

यदि इनमें से कोई भी मौजूद नहीं है, तो सहायक प्रौद्योगिकियां एक्सेस योग्य नाम के लिए फॉलबैक के रूप में विशेषता का उपयोग करने का सहारा ले सकती placeholderहैं । इस खंड के उदाहरण कुछ सुझाए गए, केस-विशिष्ट दृष्टिकोण प्रदान करते हैं।<input><textarea>

दृष्टिगत रूप से छिपी हुई सामग्री ( .visually-hidden, aria-label, और यहां तक ​​कि placeholderसामग्री, जो प्रपत्र फ़ील्ड में सामग्री होने के बाद गायब हो जाती है) का उपयोग करते समय सहायक प्रौद्योगिकी उपयोगकर्ताओं को लाभ होगा, दृश्यमान लेबल टेक्स्ट की कमी अभी भी कुछ उपयोगकर्ताओं के लिए समस्याग्रस्त हो सकती है। अभिगम्यता और उपयोगिता दोनों के लिए दृश्य लेबल का कुछ रूप आम तौर पर सबसे अच्छा तरीका है।

सास

कई प्रपत्र चर सामान्य स्तर पर अलग-अलग प्रपत्र घटकों द्वारा पुन: उपयोग और विस्तारित करने के लिए सेट किए जाते हैं। आप इन्हें अक्सर $input-btn-*और $input-*चर के रूप में देखेंगे।

चर

$input-btn-*चर हमारे बटनों और हमारे प्रपत्र घटकों के बीच वैश्विक चर साझा किए जाते हैं । आप पाएंगे कि ये अक्सर अन्य घटक-विशिष्ट चरों के मानों के रूप में पुन: असाइन किए जाते हैं।

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;