Mga porma

Pangkalahatang-ideya

Lumalawak ang mga kontrol sa form ng Bootstrap sa aming mga istilo ng Na-reboot na form na may mga klase. Gamitin ang mga klaseng ito para mag-opt in sa kanilang mga naka-customize na display para sa mas pare-parehong pag-render sa mga browser at device.

Tiyaking gumamit ng naaangkop na typekatangian sa lahat ng mga input (hal, emailpara sa email address o numberpara sa numerical na impormasyon) upang samantalahin ang mga mas bagong kontrol sa input tulad ng pag-verify ng email, pagpili ng numero, at higit pa.

Narito ang isang mabilis na halimbawa upang ipakita ang mga istilo ng form ng Bootstrap. Panatilihin ang pagbabasa para sa dokumentasyon sa mga kinakailangang klase, layout ng form, at higit pa.

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

Ang block-level o inline-level na form text ay maaaring gawin gamit ang .form-text.

Ang form na text sa ibaba ng mga input ay maaaring i-istilo ng .form-text. Kung gagamitin ang isang block-level na elemento, isang itaas na margin ang idaragdag para sa madaling pagpupuwang mula sa mga input sa itaas.

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

Ang inline na text ay maaaring gumamit ng anumang tipikal na inline na elemento ng HTML (maging ito ay isang <span>, <small>, o iba pa) na walang iba kundi ang .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>

Mga hindi pinaganang form

Idagdag ang disabledkatangian ng boolean sa isang input upang maiwasan ang mga pakikipag-ugnayan ng user at gawin itong mas magaan.

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

Idagdag ang disabledattribute sa isang <fieldset>upang i-disable ang lahat ng kontrol sa loob. Tinatrato ng mga browser ang lahat ng mga kontrol ng native na form ( <input>, <select>, at mga <button>elemento) sa loob ng isang <fieldset disabled>bilang hindi pinagana, na pumipigil sa parehong mga pakikipag-ugnayan sa keyboard at mouse sa mga ito.

Gayunpaman, kung kasama rin sa iyong form ang mga custom na elementong tulad ng button gaya ng <a class="btn btn-*">...</a>, bibigyan lang ang mga ito ng istilong pointer-events: none, ibig sabihin, napokus at nagagamit pa rin ang mga ito gamit ang keyboard. Sa kasong ito, dapat mong manu-manong baguhin ang mga kontrol na ito sa pamamagitan ng pagdaragdag tabindex="-1"upang pigilan ang mga ito sa pagtanggap ng focus at aria-disabled="disabled"upang ipahiwatig ang kanilang estado sa mga teknolohiyang pantulong.

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

Accessibility

Tiyakin na ang lahat ng mga kontrol sa form ay may naaangkop na naa-access na pangalan upang ang kanilang layunin ay maiparating sa mga gumagamit ng mga teknolohiyang pantulong. Ang pinakasimpleng paraan para makamit ito ay ang paggamit ng <label>elemento, o—sa kaso ng mga button—upang magsama ng sapat na naglalarawang teksto bilang bahagi ng <button>...</button>nilalaman.

Para sa mga sitwasyon kung saan hindi posibleng magsama ng nakikita <label>o naaangkop na nilalaman ng text, may mga alternatibong paraan ng pagbibigay pa rin ng naa-access na pangalan, gaya ng:

• <label>nakatago ang mga elemento gamit ang .visually-hiddenklase
• Pagturo sa isang umiiral na elemento na maaaring kumilos bilang isang label gamitaria-labelledby
• Pagbibigay ng titlekatangian
• Tahasang pagtatakda ng naa-access na pangalan sa isang elemento na gumagamitaria-label

Kung wala sa mga ito, maaaring gamitin ng mga pantulong na teknolohiya ang paggamit ng placeholderattribute bilang isang fallback para sa naa-access na pangalan sa <input>at mga <textarea>elemento. Ang mga halimbawa sa seksyong ito ay nagbibigay ng ilang iminungkahing paraan na partikular sa kaso.

Habang ang paggamit ng visually hidden content ( .visually-hidden, aria-label, at kahit placeholderna content, na nawawala kapag may content ang isang form field) ay makikinabang sa mga gumagamit ng pantulong na teknolohiya, ang kakulangan ng nakikitang label na text ay maaaring maging problema pa rin para sa ilang partikular na user. Ang ilang anyo ng nakikitang label ay karaniwang ang pinakamahusay na diskarte, kapwa para sa pagiging naa-access at kakayahang magamit.

Sass

Maraming mga variable ng form ang nakatakda sa isang pangkalahatang antas upang muling gamitin at palawigin ng mga indibidwal na bahagi ng form. Makikita mo ang mga ito nang madalas bilang $btn-input-*at mga $input-*variable.

Mga variable

$btn-input-*ang mga variable ay ibinahaging mga pandaigdigang variable sa pagitan ng aming mga button at aming mga bahagi ng form. Makikita mo ang mga ito na madalas na muling itinalaga bilang mga halaga sa iba pang mga variable na partikular sa bahagi.

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