Forme

Prezentare generală

Controalele formularului Bootstrap se extind pe stilurile noastre de formulare repornite cu clase. Utilizați aceste clase pentru a opta pentru afișajele lor personalizate pentru o redare mai consecventă pe browsere și dispozitive.

Asigurați-vă că utilizați un typeatribut adecvat pentru toate intrările (de exemplu, emailpentru adresa de e-mail sau numberpentru informații numerice) pentru a profita de controalele de intrare mai noi, cum ar fi verificarea e-mailului, selectarea numerelor și multe altele.

Iată un exemplu rapid pentru a demonstra stilurile de formulare ale Bootstrap. Continuați să citiți pentru documentația despre clasele necesare, aspectul formularelor și multe altele.

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

Textul formularului

Textul de formular la nivel de bloc sau la nivel de linie poate fi creat folosind .form-text.

Textul formularului de mai jos intrările poate fi stilat cu .form-text. Dacă va fi folosit un element la nivel de bloc, se adaugă o marjă superioară pentru o distanță ușoară față de intrările de mai sus.

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

Textul inline poate folosi orice element HTML inline tipic (fie acesta <span>, <small>, sau altceva) cu nimic mai mult decât .form-textclasa.

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

Formulare dezactivate

Adăugați disabledatributul boolean pe o intrare pentru a preveni interacțiunile utilizatorului și pentru a o face să pară mai ușoară.

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

Adăugați disabledatributul la a <fieldset>pentru a dezactiva toate controalele din interior. Browserele tratează toate comenzile de formulare native ( <input>, <select>, și <button>elementele) din interiorul unui <fieldset disabled>ca fiind dezactivate, prevenind atât interacțiunile tastaturii, cât și ale mouse-ului.

Cu toate acestea, dacă formularul dvs. include și elemente personalizate asemănătoare butoanelor, cum ar fi <a class="btn btn-*">...</a>, acestea vor primi doar un stil de pointer-events: none, ceea ce înseamnă că sunt încă focalizabile și operabile folosind tastatura. În acest caz, trebuie să modificați manual aceste comenzi adăugând tabindex="-1"pentru a le împiedica să primească focalizare și aria-disabled="disabled"pentru a semnala starea lor către tehnologiile de asistență.

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

Accesibilitate

Asigurați-vă că toate controalele formularului au un nume accesibil adecvat, astfel încât scopul lor să poată fi transmis utilizatorilor tehnologiilor de asistență. Cel mai simplu mod de a realiza acest lucru este să folosiți un <label>element sau, în cazul butoanelor, să includeți text suficient de descriptiv ca parte a <button>...</button>conținutului.

Pentru situațiile în care nu este posibil să se includă un <label>conținut text vizibil sau adecvat, există modalități alternative de a furniza în continuare un nume accesibil, cum ar fi:

• <label>elemente ascunse folosind .visually-hiddenclasa
• Indicând un element existent care poate acționa ca o etichetă folosindaria-labelledby
• Furnizarea unui titleatribut
• Setarea explicit a numelui accesibil pe un element folosindaria-label

Dacă niciuna dintre acestea nu este prezentă, tehnologiile de asistență pot recurge la utilizarea placeholderatributului ca alternativă pentru numele <input>și <textarea>elementele accesibile. Exemplele din această secțiune oferă câteva abordări sugerate, specifice cazului.

În timp ce utilizarea conținutului ascuns vizual ( .visually-hidden, aria-label, și chiar placeholderconținut, care dispare odată ce un câmp de formular are conținut) va aduce beneficii utilizatorilor de tehnologie de asistență, lipsa textului etichetei vizibile poate fi totuși problematică pentru anumiți utilizatori. O anumită formă de etichetă vizibilă este, în general, cea mai bună abordare, atât pentru accesibilitate, cât și pentru utilizare.

Sass

Multe variabile de formular sunt setate la nivel general pentru a fi reutilizate și extinse de componente individuale de formular. Le vei vedea cel mai des ca $input-btn-*și $input-*variabile.

Variabile

$input-btn-*variabilele sunt variabile globale partajate între butoanele noastre și componentele formularului. Veți găsi acestea reatribuite frecvent ca valori altor variabile specifice componente.

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