Dagiti Pormas

Panangkita iti pakabuklan

Dagiti kontrol ti porma ti Bootstrap ket mangpalawa kadagiti estilo ti pormatayo a Rebooted nga addaan kadagiti klase. Usaren dagitoy a klase tapno agpili kadagiti napasadaan a displayda para iti ad-adu a naurnos a panagiparang iti ballasiw dagiti browser ken alikamen.

Siguraduen nga agusar ti maitutop typea kababalin kadagiti amin nga input (kas pagarigan, emailpara iti pagtaengan ti email wenno numberpara iti numero nga impormasion) tapno magundawayan dagiti baro a kontrol ti input a kas ti panangipaneknek ti email, panagpili ti numero, ken dadduma pay.

Adda ditoy ti napardas a pagarigan tapno maipakita dagiti estilo ti porma ti Bootstrap. Itultuloymo ti agbasa para iti dokumentasion kadagiti kasapulan a klase, layout ti porma, ken dadduma pay.

<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>

Porma ti teksto

Ti teksto ti porma ti bloke-level wenno inline-level ket mabalin a maparsua babaen ti panagusar ti .form-text.

Ti teksto ti porma iti baba dagiti input ket mabalin nga estilo babaen ti .form-text. No ti maysa nga elemento ti bloke-nga-angin ket mausarto, ti akinngato a pingir ket mainayon para iti nalaka a panagsisina manipud kadagiti input iti ngato.

<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>

Ti teksto iti uneg ti linia ket mabalinna nga usaren ti ania man a gagangay nga elemento ti HTML iti uneg ti linia (maysa man a <span>, <small>, wenno sabali pay) nga awan ti ad-adu ngem ti .form-textklase.

<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>

Dagiti pormas dagiti baldado

Inayon ti disabledboolean a kababalin iti maysa nga input tapno malapdan dagiti panagtitinnulong ti agar-aramat ken mangaramid daytoy a kasla nalaglag-an.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Inayon ti disabledattribute iti a <fieldset>tapno mapasardeng amin dagiti kontrol iti uneg. Dagiti browser ket tratuenda amin dagiti katutubo a kontrol ti porma ( <input>, <select>, ken <button>dagiti elemento) iti uneg ti a a <fieldset disabled>kas baldado, a manglapped ti agpada a panagtitinnulong ti teklado ken mouse kadagitoy.

Nupay kasta, no ti pormam ket mangiraman pay kadagiti kostumbre a kasla buton nga elemento a kas ti <a class="btn btn-*">...</a>, dagitoy ket maited laeng ti estilo ti pointer-events: none, kayatna a sawen a dagitoy ket mabalin pay laeng a maipamaysa ken mapaandar babaen ti panagusar ti teklado. Iti daytoy a kaso, masapul a manual a baliwam dagitoy a kontrol babaen ti pananginayon tabindex="-1"tapno malapdan ida nga umawat ti pokus ken aria-disabled="disabled"tapno mangipasimudaag ti kasasaadda kadagiti makatulong a teknolohia.

<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>

Ti pannakagun-od

Siguraduen nga amin a kontrol ti porma ket addaan iti maitutop a madanon a nagan tapno ti panggepda ket maidanon kadagiti agus-usar kadagiti makatulong a teknolohia. Ti kasimplean a wagas tapno maragpat daytoy ket ti panagusar ti maysa <label>nga elemento, wenno—iti kaso dagiti buton—tapno mairaman ti umdas a mangiladawan a teksto a kas paset ti <button>...</button>linaon.

Para kadagiti kasasaad a saan a mabalin a mairaman ti makita <label>wenno maitutop a linaon ti teksto, adda dagiti alternatibo a wagas ti panangipaay pay laeng ti madanon a nagan, a kas ti:

• <label>elemento a nailemmeng babaen ti panangusar iti .visually-hiddenklase
• Panangitudo ti addan nga elemento a mabalin nga agtignay a kas etiketa nga agus-usararia-labelledby
• Panangipaay iti maysa nga titleattribute
• Nalawag a panangisaad ti mabalin a makastrek a nagan iti maysa nga elemento nga agus-usararia-label

No awan kadagitoy ti adda, dagiti makatulong a teknolohia ket mabalinda ti agpatulong iti panagusar ti placeholderattribute a kas ti fallback para iti mastrek a nagan iti <input>ken <textarea>dagiti elemento. Dagiti pagarigan iti daytoy a benneg ket mangipaay kadagiti sumagmamano a naisingasing, kaso-espesipiko a pamay-an.

Bayat a ti panagusar ti makita a nailemmeng a linaon ( .visually-hidden, aria-label, ken uray pay placeholderti linaon, a mapukaw apaman a ti maysa a tay-ak ti porma ket addaan iti linaon) ket makagunggona kadagiti makatulong nga agar-aramat ti teknolohia, ti kaawan ti makita a teksto ti etiketa ket mabalin pay laeng a problema para kadagiti sumagmamano nga agar-aramat. Sumagmamano a porma ti makita nga etiketa ket sapasap a ti kasayaatan a pamay-an, agpadpada para iti pannakagun-od ken pannakausar.

Sass nga

Adu a variable ti porma ket naikeddeng iti sapasap a lebel tapno mausar manen ken mapalawa babaen dagiti indibidual a paset ti porma. Masansan a makitam dagitoy kas $btn-input-*ken $input-*variables.

Dagiti Variable

$btn-input-*dagiti variable ket dagiti naibingbingay a sangalubongan a variable iti nagbaetan dagiti butontayo ken dagiti paset ti pormatayo. Masarakamto dagitoy a masansan a naituding manen a kas dagiti pateg kadagiti sabali a paset-espesipiko a variable.

$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;