रूपां

नियाळ

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

ईमेल सत्यापन, क्रमांक निवड, आनी हेर सारकिल्या नव्या इनपुट नियंत्रणांचो फायदो घेवपाक typeसगळ्या इनपुटांचेर योग्य गुणधर्म वापरपाची खात्री करात (देखीक, emailईमेल पत्त्या खातीर वा संख्यात्मक म्हायती खातीर).number

Bootstrap ची फॉर्म शैली दाखोवपाक हांगा एक बेगीन उदाहरण आसा. गरजेच्या वर्गांचेर दस्तावेजीकरणा खातीर वाचत रावचें, फॉर्म मांडावळ, आनी हेर.

<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>ब्राउझर 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-*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;