फॉर्म

आढावा

बूटस्ट्रॅपची फॉर्म नियंत्रणे वर्गांसह आमच्या रीबूट केलेल्या फॉर्म शैलींवर विस्तृत होतात. ब्राउझर आणि डिव्हाइसेसवर अधिक सुसंगत प्रस्तुतीकरणासाठी त्यांच्या सानुकूलित प्रदर्शनांची निवड करण्यासाठी या वर्गांचा वापर करा.

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

सस

अनेक फॉर्म व्हेरिएबल्स सामान्य स्तरावर पुन्हा वापरण्यासाठी आणि वैयक्तिक फॉर्म घटकांद्वारे विस्तारित करण्यासाठी सेट केले जातात. तुम्हाला हे बर्‍याचदा $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;