Format

Vështrim i përgjithshëm

Kontrollet e formës së Bootstrap zgjerohen në stilet tona të formave të rindezura me klasa. Përdorni këto klasa për të zgjedhur ekranet e tyre të personalizuara për një paraqitje më të qëndrueshme nëpër shfletues dhe pajisje.

Sigurohuni që të përdorni një typeatribut të përshtatshëm në të gjitha hyrjet (p.sh., emailpër adresën e emailit ose numberpër informacionin numerik) për të përfituar nga kontrollet më të reja të hyrjes si verifikimi i emailit, zgjedhja e numrave dhe më shumë.

Këtu është një shembull i shpejtë për të demonstruar stilet e formës së Bootstrap. Vazhdoni të lexoni për dokumentacionin mbi klasat e kërkuara, paraqitjen e formularit dhe më shumë.

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

Forma e tekstit

Teksti i formës në nivel blloku ose në nivel inline mund të krijohet duke përdorur .form-text.

Teksti i formularit më poshtë hyrjet mund të stilohen me .form-text. Nëse do të përdoret një element në nivel blloku, shtohet një diferencë e sipërme për ndarje të lehtë nga hyrjet e mësipërme.

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

Teksti inline mund të përdorë çdo element tipik HTML inline (qoftë ai <span>, <small>, ose diçka tjetër) me asgjë më shumë se .form-textklasën.

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

Format me aftësi të kufizuara

Shto disabledatributin boolean në një hyrje për të parandaluar ndërveprimet e përdoruesit dhe për ta bërë atë të duket më i lehtë.

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

Shtoni disabledatributin në a <fieldset>për të çaktivizuar të gjitha kontrollet brenda. Shfletuesit i trajtojnë të gjitha kontrollet e formës ( <input>, <select>dhe <button>elementët) brenda një <fieldset disabled>si të paaftë, duke parandaluar ndërveprimet e tastierës dhe të miut në to.

Megjithatë, nëse forma juaj përfshin edhe elementë të personalizuar të ngjashëm me butonat, <a class="btn btn-*">...</a>si pointer-events: nonep.sh. Në këtë rast, ju duhet t'i modifikoni manualisht këto kontrolle duke shtuar tabindex="-1"për të parandaluar marrjen e fokusit dhe aria-disabled="disabled"për të sinjalizuar gjendjen e tyre tek teknologjitë ndihmëse.

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

Aksesueshmëria

Sigurohuni që të gjitha kontrollet e formularit të kenë një emër të përshtatshëm të aksesueshëm në mënyrë që qëllimi i tyre të mund të përcillet te përdoruesit e teknologjive ndihmëse. Mënyra më e thjeshtë për ta arritur këtë është përdorimi i një <label>elementi, ose—në rastin e butonave—për të përfshirë tekst mjaftueshëm përshkrues si pjesë e <button>...</button>përmbajtjes.

Për situatat kur nuk është e mundur të përfshihet një <label>përmbajtje teksti e dukshme ose e përshtatshme, ka mënyra alternative për të siguruar ende një emër të aksesueshëm, si p.sh.

• <label>elementet e fshehura duke përdorur .visually-hiddenklasën
• Duke treguar një element ekzistues që mund të veprojë si një etiketë duke përdoruraria-labelledby
• Sigurimi i një titleatributi
• Vendosja e qartë e emrit të aksesueshëm në një element duke përdoruraria-label

Nëse asnjëra nga këto nuk është e pranishme, teknologjitë ndihmëse mund të përdorin placeholderatributin si rezervë për emrin <input>dhe <textarea>elementët e aksesueshëm. Shembujt në këtë seksion ofrojnë disa qasje të sugjeruara, specifike për rastin.

Ndërsa përdorimi i përmbajtjes së fshehur vizualisht ( .visually-hidden, aria-label, madje edhe placeholderpërmbajtje, e cila zhduket sapo një fushë formulari të ketë përmbajtje) do të përfitojë nga përdoruesit e teknologjisë ndihmëse, mungesa e tekstit të dukshëm të etiketës mund të jetë ende problematike për përdorues të caktuar. Një formë etiketimi i dukshëm është përgjithësisht qasja më e mirë, si për aksesueshmërinë ashtu edhe për përdorshmërinë.

Sass

Shumë variabla të formës vendosen në një nivel të përgjithshëm për t'u ripërdorur dhe zgjeruar nga përbërës individualë të formës. Ju do t'i shihni këto më shpesh si $input-btn-*dhe $input-*variabla.

Variablat

$input-btn-*variablat janë variabla të përbashkëta globale midis butonave tanë dhe përbërësve tanë të formës. Ju do t'i gjeni këto të ricaktuara shpesh si vlera në variabla të tjerë specifikë të komponentëve.

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