रूप

अवलोकन

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

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

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Sass

Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-* and $input-* variables.

Variables

$btn-input-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.

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