फार्म के रूप में बा

अवलोकन कइल जाव

बूटस्ट्रैप के फॉर्म कंट्रोल क्लास के साथ हमनी के रिबूट फॉर्म स्टाइल पर विस्तार करेला। ब्राउजर आ डिवाइस सभ में अउरी सुसंगत रेंडरिंग खातिर इनहन के कस्टमाइज्ड डिस्प्ले सभ में ऑप्ट करे खातिर एह क्लास सभ के इस्तेमाल करीं।

ईमेल सत्यापन, नंबर चयन आ अउरी कई गो नया इनपुट नियंत्रण सभ के फायदा उठावे खातिर 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>

इनलाइन टेक्स्ट कौनों भी बिसेस इनलाइन एचटीएमएल तत्व (चाहे ऊ एगो <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>ब्राउजर सभ a के अंदर के सगरी नेटिव फॉर्म कंट्रोल ( <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;