రూపాలు

అవలోకనం

బూట్‌స్ట్రాప్ ఫారమ్ నియంత్రణలు తరగతులతో మా రీబూట్ చేసిన ఫారమ్ స్టైల్‌లపై విస్తరిస్తాయి. బ్రౌజర్‌లు మరియు పరికరాల్లో మరింత స్థిరమైన రెండరింగ్ కోసం వారి అనుకూలీకరించిన డిస్‌ప్లేలను ఎంచుకోవడానికి ఈ తరగతులను ఉపయోగించండి.

ఇమెయిల్ ధృవీకరణ, నంబర్ ఎంపిక మరియు మరిన్ని వంటి కొత్త ఇన్‌పుట్ నియంత్రణల ప్రయోజనాన్ని పొందడానికి 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>

లోపల ఉన్న అన్ని నియంత్రణలను నిలిపివేయడానికి disableda కు లక్షణాన్ని జోడించండి . <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;