फारमहरू

अवलोकन

बुटस्ट्र्यापको फारम नियन्त्रणहरू कक्षाहरूसँग हाम्रो रिबुट गरिएको फारम शैलीहरूमा विस्तार हुन्छ। ब्राउजरहरू र यन्त्रहरूमा थप सुसंगत रेन्डरिङको लागि तिनीहरूको अनुकूलित प्रदर्शनहरू अप्ट इन गर्न यी कक्षाहरू प्रयोग गर्नुहोस्।

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