ފޯމުތައް

އޯވަރވިއު

ބޫޓްސްޓްރެޕްގެ ފޯމް ކޮންޓްރޯލްތައް އަޅުގަނޑުމެންގެ ރީބޫޓް ކޮށްފައިވާ ފޯމް ސްޓައިލްތަކުގައި ކްލާސްތަކާއެކު ފުޅާކޮށްދެއެވެ. މި ކްލާސްތައް ބޭނުންކޮށްގެން އެމީހުންގެ ކަސްޓަމައިޒް ކޮށްފައިވާ ޑިސްޕްލޭތަކަށް ވަދެ ބްރައުޒާތަކާއި ޑިވައިސްތަކުގެ ތެރެއިން އެއްގޮތަކަށް ރެންޑަރިންގ އެއް ލިބޭނެއެވެ.

އީމެއިލް ވެރިފިކޭޝަން، ނަންބަރު ހޮވުން، އަދި އެހެނިހެން އާ އިންޕުޓް ކޮންޓްރޯލްތަކުގެ ފައިދާ ނެގުމަށްޓަކައި 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>ބްރައުޒާތަކުން 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

މިއިން އެއްވެސް އެއްޗެއް ނެތްނަމަ، އެހީތެރި ޓެކްނޮލޮޖީތަކުން 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;