रूप दे

अवलोकन करना

बूटस्ट्रैप दे फार्म नियंत्रण क्लासें कन्नै साढ़ी रिबूट फार्म शैलियां पर विस्तार करदे न। ब्राउज़रें ते डिवाइसें च इक होर सुसंगत रेंडरिंग आस्तै उंदे अनुकूलित प्रदर्शनें च चुनने आस्तै इनें वर्गें दा इस्तेमाल करो.

ईमेल सत्यापन, नंबर चयन, ते होर मते सारे नमें इनपुट नियंत्रणें दा फायदा लैने आस्तै सब्भै इनपुटें पर इक उचित विशेषता दा उपयोग करना सुनिश्चत करो 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 तत्व (चाहे ओह् इक <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;