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>

formulir 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 fokus sareng tiasa dianggo nganggo keyboard. Dina hal ieu, anjeun kedah ngarobih kadali ieu sacara manual 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 deskriptif 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 ieu, téknologi pitulung tiasa nganggo placeholderatribut salaku fallback pikeun nami anu tiasa diaksés <input>sareng <textarea>elemen. Conto dina bagian ieu nyadiakeun sababaraha saran, pendekatan husus-kasus.

Bari ngagunakeun eusi visually disumputkeun ( .visually-hidden, aria-label, komo placeholdereusi, nu disappears sakali widang formulir boga eusi) bakal nguntungkeun pamaké téhnologi mantuan, kurangna téks labél katempo bisa kénéh jadi masalah pikeun pamaké tangtu. Sababaraha bentuk labél anu katingali umumna mangrupikeun pendekatan anu pangsaéna, boh pikeun diakses sareng usability.

Sass

Loba variabel formulir diatur dina tingkat umum bisa ulang dipaké tur ngalegaan ku komponén formulir individu. Anjeun bakal ningali ieu paling sering salaku $btn-input-*sareng $input-*variabel.

Variabel

$btn-input-*variabel dibagi variabel global antara tombol urang jeung komponén formulir urang. Anjeun bakal mendakan ieu sering ditugaskeun deui salaku nilai pikeun variabel khusus komponén anu sanés.

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