Bentuk

Ihtisar

Kadali formulir Bootstrap ngalegaan gaya formulir Rebooted kami sareng kelas. Anggo kelas ieu pikeun milih kana tampilan anu disaluyukeun pikeun rendering anu langkung konsisten dina panyungsi sareng alat.

Pastikeun ngagunakeun typeatribut anu pas dina sadaya input (contona, emailkanggo alamat email atanapi numberkanggo inpormasi numerik) pikeun ngamangpaatkeun kadali input anu langkung énggal sapertos verifikasi email, pilihan nomer, sareng seueur deui.

Ieu conto gancang pikeun nunjukkeun gaya formulir Bootstrap. Tetep maca pikeun dokuméntasi ngeunaan kelas anu diperyogikeun, perenah formulir, sareng seueur deui.

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

Wangun téks

Téks formulir tingkat blok atanapi tingkat inline tiasa didamel nganggo .form-text.

Formulir téks di handap inputs bisa styled kalawan .form-text. Lamun unsur blok-tingkat bakal dipaké, margin luhur ditambahkeun pikeun spasi gampang ti inputs luhur.

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

Téks inline tiasa nganggo unsur HTML inline has (naha a <span>, <small>, atanapi anu sanés) kalayan henteu langkung ti .form-textkelas.

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

Bentuk ditumpurkeun

Tambihkeun disabledatribut boolean dina input pikeun nyegah interaksi pangguna sareng ngajantenkeun langkung hampang.

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

Tambahkeun disabledatribut ka a <fieldset>nganonaktipkeun sakabeh kadali dina. Browser ngubaran sagala kadali formulir asli ( <input>, <select>, sarta <button>elemen) di jero a <fieldset disabled>salaku ditumpurkeun, nyegah duanana keyboard jeung mouse interaksi on aranjeunna.

Nanging, upami bentuk anjeun ogé kalebet elemen sapertos tombol khusus sapertos <a class="btn btn-*">...</a>, ieu ngan bakal dipasihkeun gaya pointer-events: none, hartosna aranjeunna tetep tiasa difokuskeun sareng tiasa dianggo nganggo keyboard. Dina hal ieu, anjeun kedah sacara manual ngarobih kadali ieu ku cara nambihan tabindex="-1"pikeun nyegah aranjeunna nampi fokus sareng aria-disabled="disabled"nunjukkeun kaayaanana kana téknologi anu ngabantosan.

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

Aksesibilitas

Mastikeun yén sakabéh kadali formulir boga ngaran diaksés luyu ambéh tujuan maranéhanana bisa conveyed ka pamaké téhnologi pitulung. Cara pangbasajanna pikeun ngahontal ieu nyaéta ngagunakeun <label>unsur, atanapi-dina kasus tombol-ngalebetkeun téks déskriptif anu cekap salaku bagian tina <button>...</button>eusi.

Pikeun kaayaan anu teu mungkin ngalebetkeun <label>eusi téks anu katingali atanapi luyu, aya cara alternatif pikeun tetep masihan nami anu tiasa diaksés, sapertos:

• <label>elemen disumputkeun maké .visually-hiddenkelas
• Nunjuk ka unsur aya nu bisa meta salaku labél ngagunakeunaria-labelledby
• Nyadiakeun titleatribut
• Nyetél sacara eksplisit nami anu tiasa diaksés dina unsur anu nganggoaria-label

Upami teu aya anu aya, téknologi anu ngabantosan tiasa nganggo placeholderatribut salaku mundur pikeun nami anu tiasa diaksés <input>sareng <textarea>elemen. Conto dina bagian ieu nyadiakeun sababaraha saran, pendekatan husus-kasus.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Sass

Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-* and $input-* variables.

Variables

$btn-input-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.

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