रूपाणि

अवलोकनम्

Bootstrap इत्यस्य form controls अस्माकं Rebooted form styles इत्यत्र classes इत्यनेन सह विस्तारं कुर्वन्ति । ब्राउजर्-यन्त्रेषु च अधिक-सुसंगत-प्रतिपादनार्थं तेषां अनुकूलित-प्रदर्शनेषु विकल्पं कर्तुं एतेषां वर्गानां उपयोगं कुर्वन्तु ।

ईमेल सत्यापनम्, संख्याचयनम्, इत्यादीनां नूतनानां निवेशनियन्त्रणानां लाभं ग्रहीतुं typeसर्वेषु निवेशेषु (उदा email. ईमेलपतेः कृते वा संख्यात्मकसूचनार्थं वा) समुचितविशेषणस्य उपयोगं अवश्यं कुर्वन्तुnumber

अत्र Bootstrap इत्यस्य form styles प्रदर्शयितुं द्रुतम् उदाहरणम् अस्ति । आवश्यकवर्गाणां, प्रपत्रविन्यासस्य, इत्यादीनां दस्तावेजीकरणार्थं पठनं कुर्वन्तु ।

<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 इत्यनेन सह शैलीं कर्तुं शक्यते .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उपयोक्तृपरस्परक्रियाः निवारयितुं तथा च लघुतरं दृश्यते इति कृत्वा निवेशे boolean विशेषतां योजयन्तु ।

<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

यदि एतेषु कश्चन अपि उपस्थितः नास्ति तर्हि सहायकप्रौद्योगिकयः on and elements placeholderइत्यस्य सुलभनामस्य fallback इत्यस्य रूपेण विशेषतायाः उपयोगस्य आश्रयं कर्तुं शक्नुवन्ति । अस्मिन् खण्डे उदाहरणानि कतिपयानि सुझातानि, प्रकरणविशिष्टानि उपायानि प्रददति ।<input><textarea>

यद्यपि दृग्गतरूपेण गुप्तसामग्री ( .visually-hidden, aria-label, अपि च placeholderसामग्री, यत् एकवारं प्रपत्रक्षेत्रे सामग्री भवति तदा अन्तर्धानं भवति) इत्यस्य उपयोगेन सहायकप्रौद्योगिकीप्रयोक्तृभ्यः लाभः भविष्यति, तथापि दृश्यमानलेबलपाठस्य अभावः कतिपयेभ्यः उपयोक्तृभ्यः समस्याजनकः भवितुम् अर्हति दृश्यमानस्य लेबलस्य कश्चन रूपः सामान्यतया सर्वोत्तमः उपायः भवति, सुलभतायाः उपयोगितायाश्च कृते ।

सस्स

अनेकाः रूपचराः व्यक्तिगतरूपघटकैः पुनः उपयोगाय विस्ताराय च सामान्यस्तरस्य सेट् भवन्ति । भवन्तः एतानि अधिकतया as $input-btn-*and $input-*variables इति पश्यन्ति ।

चर

$input-btn-*variables अस्माकं बटन्स् तथा अस्माकं form घटकानां मध्ये साझा वैश्विकचराः सन्ति । एतानि अन्यघटकविशिष्टचरानाम् मूल्यरूपेण बहुधा पुनः नियुक्तानि भवन्तः पश्यन्ति ।

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