ഫോമുകൾ

അവലോകനം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഫോം നിയന്ത്രണങ്ങൾ ക്ലാസുകൾക്കൊപ്പം ഞങ്ങളുടെ റീബൂട്ട് ചെയ്ത ഫോം ശൈലികളിൽ വിപുലീകരിക്കുന്നു . ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും ഉടനീളം കൂടുതൽ സ്ഥിരതയാർന്ന റെൻഡറിങ്ങിനായി അവരുടെ ഇഷ്‌ടാനുസൃതമാക്കിയ ഡിസ്‌പ്ലേകൾ തിരഞ്ഞെടുക്കാൻ ഈ ക്ലാസുകൾ ഉപയോഗിക്കുക.

ഇമെയിൽ സ്ഥിരീകരണം, നമ്പർ തിരഞ്ഞെടുക്കൽ എന്നിവയും അതിലേറെയും പോലുള്ള പുതിയ ഇൻപുട്ട് നിയന്ത്രണങ്ങൾ പ്രയോജനപ്പെടുത്തുന്നതിന് 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ഒരു ഫോം ഫീൽഡിന് ഉള്ളടക്കം ഉള്ളപ്പോൾ അപ്രത്യക്ഷമാകുന്ന ഉള്ളടക്കം പോലും) സഹായ സാങ്കേതിക ഉപയോക്താക്കൾക്ക് പ്രയോജനം ചെയ്യും, ദൃശ്യമായ ലേബൽ ടെക്‌സ്‌റ്റിന്റെ അഭാവം ചില ഉപയോക്താക്കൾക്ക് ഇപ്പോഴും പ്രശ്‌നമുണ്ടാക്കിയേക്കാം. കാണാവുന്ന ലേബലിന്റെ ചില രൂപങ്ങൾ പൊതുവെ പ്രവേശനക്ഷമതയ്ക്കും ഉപയോഗക്ഷമതയ്ക്കും വേണ്ടിയുള്ള മികച്ച സമീപനമാണ്.

സാസ്

പല ഫോം വേരിയബിളുകളും വീണ്ടും ഉപയോഗിക്കാനും വ്യക്തിഗത ഫോം ഘടകങ്ങൾ വിപുലീകരിക്കാനും പൊതുവായ തലത്തിൽ സജ്ജീകരിച്ചിരിക്കുന്നു. $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;