સ્વરૂપો

ઝાંખી

બુટસ્ટ્રેપના ફોર્મ નિયંત્રણો વર્ગો સાથે અમારી રીબૂટ કરેલ ફોર્મ શૈલીઓ પર વિસ્તૃત થાય છે. સમગ્ર બ્રાઉઝર્સ અને ઉપકરણો પર વધુ સુસંગત રેન્ડરિંગ માટે તેમના કસ્ટમાઇઝ્ડ ડિસ્પ્લેને પસંદ કરવા માટે આ વર્ગોનો ઉપયોગ કરો.

નવા ઇનપુટ નિયંત્રણો જેવા કે ઈમેઈલ વેરિફિકેશન, નંબર સિલેક્શન અને વધુનો લાભ લેવા માટે 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>

અંદરના તમામ નિયંત્રણોને અક્ષમ 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;