रूप

अवलोकन

बूटस्ट्रैप के फॉर्म कंट्रोल क्लास के साथ हमर रिबूट फॉर्म स्टाइल पर विस्तार करैत अछि. ब्राउज़र आरू डिवाइसऽ म॑ अधिक सुसंगत रेंडरिंग लेली ओकरऽ अनुकूलित प्रदर्शनऽ म॑ विकल्प चुनै लेली ई वर्गऽ के उपयोग करऽ ।

ईमेल सत्यापन, संख्या चयन, आ बेसि जैना नव इनपुट नियंत्रणक कें लाभ उठावय कें लेल 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सामग्री, जे एक बेर कोनों फॉर्म फील्ड मे सामग्री रहला पर गायब भ जायत छै) कें उपयोग सं सहायक प्रौद्योगिकी उपयोगकर्ताक कें लाभ होयत, दृश्यमान लेबल पाठ कें कमी एखनहु किछु उपयोगकर्ताक कें लेल समस्याग्रस्त भ सकय छै. दृश्यमान लेबल कें कोनों रूप आमतौर पर सर्वोत्तम दृष्टिकोण छै, सुलभता आ उपयोगिता दूनू कें लेल.

सस्स

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

चर

$btn-input-*चर हमर बटन आरू हमरऽ फॉर्म घटक के बीच साझा वैश्विक चर छै. अहां कें इ सब कें अक्सर अन्य घटक-विशिष्ट चर कें लेल मान कें रूप मे पुनः असाइन कैल गेलय भेटतय.

$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;